Html5 structure & semantic

HTML5 STRUCTURE &
SEMANTIC
by Muktadiur Rahman

Agenda

 Structure
 Block semantic element
 Inline semantic element
 Embedded media
 Interactivity
 Demo

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

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

Html5 structure & semantic

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html5 structure & semantic (20)

Recently uploaded (20)

Html5 structure & semantic