15
Structure Content Presentation Semantics
| Date post: | 25-Dec-2015 |
| Category: |
Documents |
| Upload: | daniela-bridges |
| View: | 220 times |
| Download: | 0 times |
StructureContent
PresentationSemantics
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>An XHTML 1.0 Strict standard template</title><meta http-equiv="content-type"
content="text/html;charset=utf-8" /></head>
<body>
<p>… Your HTML content here …</p>
</body></html>
http://www.blooberry.com/indexdot/html/tagpages/d/doctype.htm
DOCTYPE
XML Namespace
Content Type &Character Set
DOCTYPE Provides info for browsers and validators An attempt to deal with code written according to standards versus
legacy code from 1990’s Browsers can operate in three modes ( render the page differently):
Standards Mode Quirks Mode Almost Standards Mode
Excellent article http://hsivonen.iki.fi/doctype/ http://www.upsdell.com/BrowserNews/res_doctype.htm
Some browsers will switch to Quirks mode if DOCTYPE not present Great Timeline of Browser: http://meyerweb.com/eric/browsers/timeline-structured.html Not valid HTML if you leave DOCTYPE out Different DOCTYPES for each version of HTML and XHTML
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Common Doctypes declarations:
Strict This is what you should be using. Doesn’t allow HTML tags being used for presentational
purposes – Ex. center, font, iframe, strike, u, align bgcolor, noshade, nowrap, text, link, vlink, vspace http://24ways.org/2005/transitional-vs-strict-markup
Transitional Good for legacy code Helpful for people moving from older HTML to web standards
Frameset Not recommended
Firefox tells you the mode in upper right corner: checkmark for standards and an x for quirks mode.
Things to remember about DOCTYPEs Copy your DOCTYPE from a standardized template
because typos or spacing errors could invalidate the DOCTYPE
If a browser reads an HTML file without a DOCTYPE it may think this is a very old html file and the browser may use its old rules (Quirks mode) to try to display it. You may waste time fixing the HTML in a document because of a faulty DOCTYPE
Use the DOCTYPE to help you validate your page – find typos, syntax errors and deprecated tags
For this class use XHTML 1.0 Strict!!!!! As HTML% becomes more popular, all this
DOCTYPE stuff looks like it will go away.
xml namespace <html xmlns="http://www.w3.org/1999/xhtml">
An attribute of the html tag It is an XML thing. Namespaces help clarify
confusion around tags with the same name. The URL is actually a unique identifier – no
code is read from the site or interpreted by the browser
head section<head>
<title>An XHTML 1.0 Strict standard template</title><meta http-equiv="content-type"
content="text/html; charset=utf-8" /></head>
Head section does not display on rendered document. Why??
Head section at a minimum consists of a title and a meta tag containing content type and charset
<meta http-equiv="content-type" content="text/html; charset=utf-8" />•content=“text/html” - MIME (Multipurpose Internet Mail Extensions) is a standard that describes content being sent.
• http://www.w3schools.com/media/media_mimeref.asp
•Content can be text, images, audio or application specific•The server can send a message in the HTTP header stating the content type•Or the document (in web design) can have a attribute in the meta tag stating the type •The server overrules the document•Remember XHTML 1.1 expected a document of type application/xhtml+xml - never really worked•Browser has different “engines” and rules and needs to know how to interpret the bits and bytes•Firebug – Net panel shows headers with content types
<meta http-equiv="content-type" content="text/html; charset=utf-8" />What is this charset stuff??
http://articles.sitepoint.com/article/guide-web-character-encoding/2
http://www.joelonsoftware.com/articles/Unicode.html
ASCII – Unicode – UTF8 – More acronym soup For most html documents you create use utf-8
Very good article
Sometimes you may see the following before the DOCTYPE:
<?xml version="1.0" encoding="UTF-8" ?>
This is called an xml declaration The W3C stated it is optional. This declaration causes IE6 to jump into
quirks modeMost web designers seem to have dropped this declaration.
http://learningtheworld.eu/2008/farewell-xml-declaration/
When HTML was only used by scientists the emphasis was on the structure of a page – no need for the page to look “pretty” Headers(h1), sub-headers(h3), paragraphs(p), lists(ol).
However, users and browser manufacturers allowed users to apply certain HTML tags for presentational (look pretty) purposes. HTML House of Horror: http://
www.goer.org/Journal/2003/10/html_house_of_horror_things_that_go_blink_in_the_n.html#26
Header tags to make something bold and big even if it wasn’t a header.
Blockquote (blockquote) tags to make some text indented even though it wasn’t a quote.
Font (font) tags to change the size and color of text. Table (table) tags to make the layout of a page!
Use HTML for structure Try to use a tag that comes close to the role the content
plays on the page ( CSS: The Missing Manual, 2nd edition)
In other words write semantic HTML http://www.456bereastreet.com/archive/200711/posh_plain_old_s
emantic_html/
http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/
http://www.webdesignfromscratch.com/html-css/semantic-html/
HTML 4.01/XHTML 1.0 list of allowed tags for Strict, Transitional and Frameset http://www.w3schools.com/tags/ Note the deprecated tags – won’t pass validator in Strict
mode
Use CSS (Cascading Style Sheets) for presentation Apply CSS to the HTML tag
From CSS: The Missing Manual 2nd edition1. Use HTML for structure2. Use CSS for presentation3. Stop using <font>, <b>, <i>, <table> for
layout and body tag attributes like background, bgcolor, text, link, alink, vlink
4. Stop using leftmargin, topmargin, marginwidth, marginheight attributes
5. Don’t overuse the <br /> tag• Rule of thumb: Stop using attributes assigned to
tags to control color, borders, backgrounds, and alignments.
• List of deprecated tags and attributes:• http://www.codehelp.co.uk/html/deprecated.html
From CSS: The Missing Manual 2nd edition1. Only use one H1 tag per page2. Use headings to indicate relative
importance of text. Ex. All headers of equal importance should share a <h2> or <h3> tag. Use the next level down for lesser important text. Try not to skip levels.
3. Use <p> for paragraphs of text4. Use <ul> for list of related items5. Use <ol> for steps or order of importance
6. For glossary of terms use <dl>, <dt>, <dd>
7. For quotes use either <blockquote> or <q>8. Be specific if you can: <cite> for book title,
newspaper article, website <address> for contact information
9. Avoid using tags to simply add presentation10. If a tag doesn’t fit the bill look to the <div>
and <span> tag11. Don’t overuse <div> tag12. Develop good coding habits !!!!• http://css-tricks.com/what-beautiful-html-code-
looks-like/
