HTML5 Semantic

Semantic on the web Provides new information to search engines. Required for better understanding of the content of the document. It is not new in HTML5 (ul, li, table, img, etc…). HTML5 brings new possibilities how to add semantic to your document.

Article ( … ) The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Section ( … ) The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Nav ( … ) The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Aside ( … ) The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Header ( … ) The header element represents introductory content for its nearest ancestor sectioning content (article, aside, nav, section) or sectioning root element. A header typically contains a group of introductory or navigational aids.

Footer ( … ) The footer element represents a footer for its nearest ancestor sectioning content (article, aside, nav, section) or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Address ( … ) The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

Figure ( … ) The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document. The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.

Figcaption ( … ) The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any.

Main ( … ) The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Audio ( … ) An audio element represents a sound or audio stream. Browsers renders element as a audio player. Can be controlled using JavaScript API (play, pause, etc…).

Video ( … ) A video element is used for playing videos or movies, and audio files with captions. Browsers renders element as a audio player. Can be controlled using JavaScript API (play, pause, etc…). …

Details + summary (HTML 5.1) Details - the details element represents a disclosure widget from which the user can obtain additional information or controls. Summary - the summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any. More information Here is the source data that is discussed in the article...

Forms validation and new input types Native user interface. Important especially on mobile devices. Native validation.

JSON-LD, MICRODATA, RDFA Additional information for search engine. d-data/breadcrumbs d-data/breadcrumbs Article headline The headline of the Article A most wonderful article The full body of the article