Content Sectioning

Semantic

Address

1 Infinite Loop
Cupertino, CA 95014
United States

This is in an <article>

This is a <footer>

This is in a <header>

This is in a <section>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 in an <hgroup>

Heading 2 in an <hgroup>

Heading 3 in an <hgroup>

<p> outside <article>

Inside <article>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text

Blockquotes

Blockquote: I quickly explained that many big jobs involve few hazards

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

Lists

Definition list

Definition List Title
This is a definition list division.
Definition List Title
Definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Div

This is in a <div>

Figure / Figcaption

Wrapped in a <figure> element, no <figcaption>

Image alt text

Wrapped in a <figure> element, with a <figcaption>

Image alt text
Here is a caption for this image.

Horizontal rules


main

This is in a <main>

Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

This is footer for this section

Pre-formatted text <pre>

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Code, Pre-formatted

pre {
display: block;
padding: 7px;
border: 1px solid #E1E1E8;
line-height: 160%;
}

Inline Text Semantics

Inline text

This is a text link.

Abbreviation: HTML

The b element is stylistically different text from normal text, without any special importance.

<bdi> indicates a different text-flow direction.

<bdo> indicates an override for text-flow direction.

the
<br> tag is used to create a line break.

This is a citation.

This text is deleted and This text is inserted.

Inline code: <div>code</div>

data can be used to markup machine-readable text.

The dfn element indicates a definition.

The i element is text that is offset from the normal text.

This text has added emphasis.

use keyboard text to indecate keystrokes

The mark element indicates a highlight.

This text is a short inline quotation.

This is example of Japanese text annotated with <Ruby> tags ()(らい) .(ドット) audio(オーディオ) (mirai dot audio) to help with pronunciation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar ultricies dictum. Morbi erat nisi, suscipit at viverra eget, rhoncus ac sapien. Maecenas eleifend nulla quis consectetur sollicitudin. Mauris vitae faucibus magna. Mauris at maximus risus. Praesent consequat elementum elementum. Vestibulum sollicitudin ac dolor congue auctor. Fusce euismod ante nec ipsum efficitur, ac porta justo ultrices. Suspendisse sed iaculis metus, vitae tincidunt est. Phasellus vulputate eros lacus, id dictum sem mollis in. Praesent massa urna, commodo a facilisis sed, ullamcorper sit amet lacus.

This text has a strikethrough.

Sample <samp> output: This is sample output from a computer program.

This small text is small for for fine print, etc.

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything.

Strong is used to indicate strong importance.

Lastly don't forget the sub (H2O)

Superscript®.

The time element:

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

The variable element, such as x = y.

The HTML <wbr> element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Images and Media

Area / Map

A <map> with <area> can be used to define clickable regions.

Audio

Images

Image, no <figure> element

Image alt text

Wrapped in a <figure> element, no <figcaption>

Image alt text

Wrapped in a <figure> element, with a <figcaption>

Image alt text
Here is a caption for this image.

<img> inside <a> element

Image alt text

Track

The HTML <track> element is used as a child of the media elements— <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles.

Video

Scripting

Canvas

canvas

Noscript

Use <noscript> which defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

Script

The HTML <script> element is used to embed or reference an executable script.

Tabular data

Table Caption
Table Col group 1 Heading 1 Table Heading 2 Group 2 Table Heading 3 Group 2 Table Heading 4 Group 3 Table Heading 5 Group 3
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Form elements

Input fields

[Top]

Select menus

[Top]

Checkboxes

[Top]

Radio buttons

[Top]

Textareas

[Top]

HTML5 inputs

[Top]

I am legend
I am also legend Check me out Or check me out

[Top]

Action buttons

Meter

2 out of 10

Progress

progress

Interactive elements

Context menu

Right-click over this to see the menu
hello world
hello world

Toolbar menu

  • Action
  • Another action

  • Separated action
  • Summary / Details

    You should read more below
    And this is the details.