XHTML 1.1 - Served as application/xhtml+xml
Web Semantics
great coding means semantics
Semantic HTML
Another important part of separating structure from presentation is using web semantics in your markup to structure the document’s
content. When an XHTML element exists that has a structural meaning (which is the best definition of web semantics) suitable for the part of the
content that is being marked up, there is no reason to use anything else. In other words, do not use CSS to make an HTML element look
like another HTML element, for instance by using a <span> element instead of an <h1> element to mark up a heading.
By using semantic HTML (another term that defines web semantics), you will make the different parts of a document meaningful to any web browser, be it the very latest graphical web browsers on a modern PC, an old web browser that doesn’t handle CSS, or a text-based browser in a Unix shell.
Semantic Headings
To mark up headings, use <h1>, <h2>, <h3>, <h4>, <h5>
or <h6> depending on the heading level. <h1> is the highest level.
Web Semantics Examples:
<h1>Document heading</h1> <h2>Sub heading</h2>Semantics Document heading
Semantics Sub heading
Web Semantic Paragraphs
Use the <p> element to mark up paragraphs. Do not use the <br /> element to create space between paragraphs. Margins
between paragraphs are handled by CSS, and requires paragraphs to be marked up semantically correctly.
Web Semantics Example:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Ed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.</p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla.
Web Semantics Lists
A list of things should be marked up as a list. There are a few different kinds of lists that make up websemantics XHTML: unordered lists, ordered lists, and definition lists.
Semantics for Unordered lists, also known as bulleted lists, start with <ul> and end with </ul>. Each list item is
contained in an <li> element.
Semantics for Ordered lists start with <ol> and end with </ol>.
Definition lists are a little different, and can be used to mark up a list of terms and descriptions. Correct, Semantic Definition lists start with
<dl> and end with </dl>. Each term that is being described is contained in a <dt> element, and
the description is contained in one or more <dd> elements.
Web Semantics Examples:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- website
- A collection of linked web pages that represent a company or an individual.
- web page
- The basic unit of information on the Web, containing text, graphics and other media.
CSS makes it possible to use lists even when you don’t want the list’s content to be presented as a traditional list. A navigation bar, which is a list of links, is a good example of this. The advantage of using a list for a menu is that the menu will make sense even in browsers that don’t support CSS.
Web Semantics Quotations
The <q> element should be used for shorter, inline quotations. Web browsers are supposed to automatically render quotation marks before
and after the content of the <q> element. Unfortunately, Internet Explorer doesn’t, and in some cases the <q>
element can even cause accessibility problems. Because of this, some recommend that you avoid using <q>, and insert the quotation marks
manually. Containing inline quotes in <span>-elements with a suitable class allows the use of CSS for styling quotes, but has no semantic
value. Read Mark Pilgrim’s The Q tag for a detailed look at the problems with the
<q> element.
For longer quotations that form one or more paragraphs, the <blockquote> element should be used. CSS can then be used to style the
quotation. Note that text is not allowed directly inside a <blockquote> element – it must be contained in an element, usually a
<p> element.
The cite attribute can be used with both <q> and <blockquote> to supply a URL for the source of the
quotation. Note that if you use <span> instead of <q> for inline quotations, you cannot use the cite
attribute.
Examples:
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1"> The presentation of phrase elements depends on the user agent. </q>.</p>The W3C says that The presentation of phrase elements depends on the user agent.
.
The W3C says that “The presentation of phrase elements depends on the user agent.”.
<blockquote cite="http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html"><p>“The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.”</p> </blockquote>“The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set. ”
Please continue your web semantics journey by clicking on the term (yes, the web semantics term in the beginning of this sentence)...
