Difference between revisions of "Semantic HTML"

From Wiki @ Karl Jones dot com
Jump to: navigation, search
(→‎External links)
Line 3: Line 3:
 
== Description ==
 
== Description ==
  
−
Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
+
All [[HTML]] is semantic, to some degree.
  
−
== Examples ==
+
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)]] –
 +
 
 +
* [[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 (HTML element)|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 quote|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.
 +
 
 +
== Example: italic ==
  
 
As an example, recent HTML standards discourage use of the <code>italic</code> tag:
 
As an example, recent HTML standards discourage use of the <code>italic</code> tag:

Revision as of 08:26, 26 April 2016

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:

  • 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.

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=13937"