HTML5 Semantic Elements
Semantic elements = Elements with
meaning.
A semantic element clearly describes its
meaning to both the browser and the developer.
Examples of non-semantic
elements: <div>
and <span>
- Tells nothing about its content.
Examples of semantic
elements: <form>, <table>,
and <img>
- Clearly defines its content.
Tag
|
Description
|
|
|
Defines an article in the document
|
|
|
Defines content aside from the page content
|
<audio>
|
Define sound content
|
|
|
Defines a part of text that might be formatted in a
different direction from other text outside it
|
<canvas>
|
It is used to draw graphics by
using JavaScript
|
<command>
|
Define a command button that a user can invoke
|
<datalist>
|
It defines a list of predefine
option for input controls
|
|
|
Defines additional details that the user can view or
hide
|
|
|
Defines a dialog box or window
|
<emded>
|
Defines a container for an external applications(a
plug-in)
|
|
|
Defines a caption for a
<figure> element
|
|
|
Defines self-contained content, like illustrations,
diagrams, photos, code listings, etc.
|
|
|
Defines a footer for the document
or a section
|
|
|
Defines a header for the document or a section
|
<keygen>
|
It defines a key generator field
|
|
|
Defines the main content of a document
|
|
|
Defines marked or highlighted text
|
|
|
Defines a command/menu item that the user can invoke
from a popup menu
|
|
|
Defines a scalar measurement
within a known range (a gauge)
|
|
|
Defines navigation links in the document
|
<output>
|
Defines the result of calculation
|
|
|
Defines the progress of a task
|
|
|
Defines what to show in browsers
that do not support ruby annotations
|
|
|
Defines an explanation/pronunciation of characters (for
East Asian typography)
|
|
|
Defines a ruby annotation (for
East Asian typography)
|
|
|
Defines a section in the document
|
|
|
Defines a visible heading for a
<details> element
|
|
|
Defines a date/time
|
<track>
|
Defines text tracks for
<video>/<audio>
|
<video>
|
Defines a video
|
|
|
Defines a possible line-break
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
No comments:
Post a Comment