HTML5 Semantic Elements
What follows is a summary of the HTML elements as defined in the HTML specification.
What is HTML?
HTML or HyperText Markup Language is the World Wide Web core markup language. When you navigate the internet using a web browser the websites that you see, the web applications you interact with, the games that you play are written (in great part) using HTML.
Semantic Elements
HTML5 defines new semantic elements to provide more meaningful content semantics to your websites. These are:
<section>: represents a generic document or application section. It is a thematic grouping of content, typically with a heading. Some examples of sections could be chapters within a book or tabs within a tabbed web application.<nav>: represents the navigation of a website. It should contain links to other pages or parts of the website. Only sections that contain major navigation blocks within a website are appropriate for thenavelement.<article>: represents a component of a page that consists of a self-contained composition within a document, page, application or site and that is intended to be independent, and as such, distributable, shareable and reusable. Examples: blog post, comment, forum post, news article, etc.<aside>: represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which should be considered as separate from the main content. Examples are pull quotes, sidebars, bios, advertising, groups of nav elements, etc.<hgroup>: represents the heading of a section. It is used to group<h1>-<h6>elements when the heading has multiple levels, such as subheadings or taglines.<header>: represents a group of introductory or navigation aids. It is intended to contain a section’s heading (<h1>-<h6>or a<hgroup>) but it is not required. It can also be used to wrap a section’s table of contents, a search form or any relevant logos.<footer>: represents the footer that contains additional information about a section, like who wrote it and when, related links, copyright, etc. When the footer contains entire sections it represents an appendix, indexes, etc.<time>: represents either a time or a date.<mark>: represents a highlighted run of text within a document.
Grouping elements
<main>: represents the dominant content of the<body>of a document.
New Form Elements
References
Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.