Difference between revisions of "Semantic HTML"
Karl Jones (Talk | contribs) (→HTML5 semantic elements) |
Karl Jones (Talk | contribs) (→HTML5 semantic elements) |
||
| Line 32: | Line 32: | ||
* [[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. | * [[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 <div> 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 == | == Example: italic == | ||
Latest revision as of 08:49, 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.
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 aExample: 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
