Semantic elements
With HTML5, elements with a semantic meaning were introduced. This means that e.g. search engines can reason about the content of an element. You should thus strive to use these elements, rather than divs that bear no semantic meaning. Below are some of these elements listed, with an explanation on how they should be used. A complete overview over the HTML elements can be found at Mozilla Developer Network.
In order for these elements to have a semantic value, they have to be used correctly. That is that there are rules for what elements can be their parent and child. You will find more information about this in the link provided above.
Header
The <header> element holds a group of introductory or navigational aids, e.g. heading elements, logo, search forms and navigation bar.
Do not confuse it with the <head> element, which contains metadata about the document. The <header> element has to be a child of the <body> element, that is, it has to reside within it.
Footer
The <footer> element represents a footer for its nearest section. That is, it can be at the bottom of the <body> element, or at the bottom of a <section> element (more on that later).
In the footer you often find a list of important sub pages on the website, contact information and other useful information that should be easily available for the user.
Section
The <section> element is a generic section of the document, i.e. a thematic grouping of the content, typically with a heading.
Be aware though, do not use the <section> element as a generic container, use the <div> element instead. A rule of thumb is that the <section> element should logically appear in the outline of a document.
Article
The <article> element is a self-contained composition in a document, which is intended to be independently distributable or reusable. This could be a forum post, a blog entry, or a news site article. Each <article> should be identified, typically by including a heading element as a child of the <article> element.
This element can be used by e.g. search engines to filter out unnecessary information on the page, such as the navigation bar and adds.
Nav
The <nav> element is a section of a page that links to other pages or to parts within the page. It is a section with navigation links. This element is only intended for major blocks of navigation, such as the navigation in the header. Links in the footer e.g. does not need to be encapsulated in the <nav> element.
Input
The <input> element is used to create interactive controls for web-based forms in order to accept data from the user. How the element works varies considerably depending on the value of its type attribute.
In stead of copy/pasting that into this document, you can read about it at MDN.
It is important to set the type of input, using the type `attribute` and a matching value, such as:
Button: A push button with no default behavior.
File: A control that lets the user select a file.
Password: A single-line text field whose value is obscured.
Submit: A button that submits the form.
Using the attribute placeholder you can have a placeholder text in your input field. If you use the attribute autofocus, the input field will get the focus automatically when the user opens the page.
If you have several input fields on the page and want the user to tab through them in a specific order, use the tabindex attribute, and a number as the value. This is also useable on other links and buttons.
In a form, as you will see later, it is good design to have a label, as the placeholder will disappear once the user sets his/hers cursor in the input field.
Note that the input field is a self enclosing element.
Output
The <output> element represents the result of a calculation or user action. It should be used within a form element, or as a general output element.
Figure
The <figure> element represents self-contained content, frequently with a caption (see figcaption below), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image or an illustration.
Figure caption
The <figcaption> element represents a caption associated with a figure. <figure> is its immediate ancestor which means <figcaption> can be the first or last element inside a <figure> block. The figcaption element is optional, if it is not there the parent figure element will have no caption.
Strong
Using the <strong> element indicates that the content has a strong importance.
Browsers will by default show the content of a <strong> element as bold. As you might, and should, remember, the <b> element renders the text as bold. Even though they look the same, they have different usages as the <strong> element has a semantic meaning.
The code snippet:
... would render:
Do not use the camera as a candle holder
Em
The <em> element indicates emphasis that subtly changes the meaning of a sentence. Browsers will by default render the content in italic. The <i> element will also render the text italic, but <em> holds a semantic meaning.
The code snippet:
... would render:
I think I am the best person ever!
Quotes
There are two elements used for making quotations, <blockquote> and <q>.
The <blockquote> element is used for longer quotes, taking up an entire paragraph. Note that browsers tend to indent the content of this element. You should not use this element to indent text, rather use CSS. Remember that this element bears semantic meaning, that it is a quote. Use the <p> element inside the <blockquote> element.
The code snippet:
... would render:
For shorter quotes, that sits within a paragraph, use the <q> element.
The code snippet:
... would render:
Eleanor Roosevelt said: "Anger is one letter short of danger"
Both elements may use the cite attribute to indicate where the quote is from. Its value should be a URL that will have more information about the source of the quotation.
Address
The <address> element is used to contain contact details of the author. It can be a physical address, but it can also be a name, phone number or email address.
You can use it together with the <article> element to describe the author of that article.
Last updated