Difference between revisions of "Semantic HTML"
Karl Jones (Talk | contribs) |
Karl Jones (Talk | contribs) (→HTML5 semantic elements) |
||
| Line 20: | Line 20: | ||
[[HTML5]] introduced several new semantic elements: | [[HTML5]] introduced several new semantic elements: | ||
| − | * [[article (HTML element)]] – | + | * [[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. | * [[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. | ||
Revision as of 08:39, 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.
Contents
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.
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 also
External links
- Semantic HTML @ Wikipedia
- HTML structural elements @ w3.org
- Headings and sections @ w3.org
- Usingg HTML sections and outlines @ developer.mozilla.org
- HTML5 semantic elements @ w3schools.com
Discussion
- HTML5 best practices; section/header/aside/article tags @ stackoverflow.com
