Semantic HTML

From Wiki @ Karl Jones dot com
Jump to: navigation, search

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the text in web pages and web applications, rather than merely to define its presentation or look.

Description

All HTML is semantic, to some degree.

Some HTML elements are more semantic than other HTML elements.

  • Alternately, some HTML elements are more in violation of semantic principles than others.

Separation of concerns

Separation of concerns refers to the principle of separating HTML from CSS, such that each is responsible for its own concerns:

  • HTML is responsible for semantics (meaning)
  • CSS is responsible for presentation, appearance, look-and-feel

HTML5 semantic elements

HTML5 introduced several new semantic elements:

  • article (HTML element) – "The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry."
  • header (HTML element) – The spec defines it as "a group of introductory or navigational aids". In HTML5 you can have as many as you want, for example within sections.
  • nav (HTML element) – Intended for major, site-wide navigation information. More than one may appear on the page, but use only for major navigation, not arbitrary sets of links.
  • section (HTML element) – Used for grouping together thematically-related content. The spec describes the section element as "a thematic grouping of content, typically with a heading."
    • Before replacing div elements with section elements, ask yourself: "Is all of the content related?"
  • aside (HTML element) – Used for tangentially related content. Useful if the content within the aside can be removed without reducing the meaning of the main content. Pull quotes are an example of tangentially related content.
  • footer (HTML element) – Footer elements contain information about its containing element: who wrote it, copyright, links to related content, etc. HTML5 allow for multiple footers, for example footers within sections.

div elements

The div element still has a perfectly valid use.

You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes.

A common example is using a
to wrap all of the content on the page, and then using CSS to centre all the content in the browser window, or apply a specific background image to the whole content.

Example: italic

As an example, recent HTML standards discourage use of the italic tag: 

<i>

The emphasis tag is semantically more accurate: 

<em>

The CSS stylesheet should then specify whether emphasis is denoted by an italic font, a bold font, underlining, slower or louder audible speech, etc.

This is because italics are used for purposes other than emphasis, such as citing a source, for which HTML provides the cite tag: 

<cite>

Another use for italics is foreign phrases or loanwords; web designers may use built-in XHTML language attributes or specify their own semantic markup by choosing appropriate names for the class attribute values of HTML elements (e.g. class="loanword").

Marking emphasis, citations and loanwords in different ways makes it easier for web agents such as search engines and other software to ascertain the significance of the text.

Separation of concerns

See Separation of concerns.

See also

External links

Discussion

Retrieved from "http://wiki.karljones.com/index.php?title=Semantic_HTML&oldid=13946"