HTML5 STRUCTURE & SEMANTIC

by Muktadiur Rahman

Agenda

Structure Block semantic element Inline semantic element Embedded media Interactivity Demo

Structure

Structure

Structure

<section> <header > <hgroup> <footer> <article> <nav>

<section>

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading

<header>

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos

<hgroup>

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines

<footer>

The footer element represents a footer for its nearest ancestor sectioning content 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

<article>

The article element represents a 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..

<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

Block semantic element

<aside> <figure>

<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.

<figure>

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc

Inline semantic element

<mark> <time> <meter> <progress>

<mark>

Defines marked/highlighted text

<time>

Defines a date/time

<meter>

Defines a scalar measurement within a known range (a gauge)

<progress>

The progress element provides a simple and effective way for a web designer to notify a user of their progress regarding a specified task

Embedded media

<audio> <video> <embed>

<audio>

Defines sound, such as music or other audio streams

<video>

 Specifies video, such as a movie clip or other video streams

<embed>

Defines a container for an external application or interactive content (a plug-in)

Interactivity

<details> <datalist> <menu> <command>

<details>

Defines additional details that the user can view or hide

<datalist>

Specifies a list of pre-defined options for input controls. This is used to provide an "auto complete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data

<menu>

In HTML 5, a menu contains command elements, each of which causes an immediate action

<command>

Defines a command button that a user can invoke

demo

Demo on HTML5 Structure & Semantic

Thank You

Q/A