Headings

Heading level 1

Headings communicate the organization of the content on the page.

Heading level 2

Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.

Heading level 3

Nest headings by their rank (or level).

Heading level 4

The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>).

Heading level 5

Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

Heading level 6

Skipping heading ranks can be confusing and should be avoided where possible

Paragraph

The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare ipsum quis volutpat efficitur. Pellentesque interdum lorem quis massa consectetur congue.

Unordered lists

• Lorem ipsum dolor sit amet
• Aliquam eu magna nec
• Curabitur gravida ante
• Nam fermentum libero
• Maecenas scelerisque sem eu sapien
• Sed sed mauris sit amet

• Unordered list element
• Nested unordered list
  • Vivamus
  • Curabitur
  • Integer
• Lorem ipsum
• Another nested list
  • Lorem ipsum dolor sit amet
  • Nested inside the nested
    • Elephant
    • Tiger
    • Flamingo
    • Zebra
  • Done nesting for now
• Final list item

Ordered lists

1. This list is ordered
2. Second list item
3. Third list item

1. First let's start another ordered list
2. Second, let's nest a list
   1. First (a) item
   2. Second (b) item
   3. Third (c) item
3. Third, moving on

11. This list starts from "11"
12. and continues with "12"
13. ...then with "13"...
14. Fourteen, let's reverse the nested list
    1. In HTML5 we can reverse lists
    2. and have a countdown
    3. ... THREE ...
    4. ... TWO ...
    5. ... ONE ...
15. And, (15), we are done here

Description lists

Multiple terms, single description

Firefox

Mozilla Firefox

Fx

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

Terms - description pairs

Zebra

A striped animal

Horse

An animal that looks like a monochrome zebra

Cat

A fluffy animal

Tiger

A big-sized cat that wants to eat you

Bird

A winged animal that can fly

Definition

Definition element with a <title> attribute

WWW definition.

Definition list with an <attr> element

The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.

WWW

The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on the Internet.

Blockquote

The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

Code and Pre

Code

Pre

The HTML <pre> element represents preformatted text.
               Text within this element is typically displayed
                           in a non-proportional ("monospace")
                   font exactly as it is laid out in the file.
                Whitespace inside this element is displayed as 
                                                        typed.

<code> and <pre> elements are frequently used together:

#!/bin/bash
# We use <pre><code> for block code that must not wrap

echo "Number: " 
read number
i=1 
while [ $i -ne 10 ]; do
    i=$(expr $i + 1) 
    table=$(expr $i \* $n) 
    echo $table 
done

Figure and Figcaption

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element.

Image

Code snippets

function NavigatorExample() {
    var txt;
    txt = "Browser CodeName: " + navigator.appCodeName + "; ";
    txt+= "Browser Name: " + navigator.appName + "; ";
    txt+= "Browser Version: " + navigator.appVersion  + "; ";
    txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
    txt+= "Platform: " + navigator.platform  + "; ";
    txt+= "User-agent header: " + navigator.userAgent  + "; ";
    console.log("NavigatorExample", txt);
}

Details / Summary

Horizontal line

This paragraph is below an horizontal line

Table with caption

The above table with thead, tfoot, and tbody

Table with colgroup and col

Text rendering elements

• The <a> element (Anchor Element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
• The <b> element is a stylistically different text, usually rendered as bold
• The <strong> element gives text strong importance, and is typically displayed in bold
• The <br> element creates
  a line break in text (carriage-return)
• The <em> element marks text that has stress emphasis.. It can be nested with each level of nesting indicating a greater degree of emphasis.
• The <i> element is text that differs from the normal text, example for technical terms, fictional character thoughts or foreign language phrases
• The <s> element renders text with a strikethrough. Not appropriate to indicate document edits; for that, use the <del> and <ins> elements.
• The <del> element represents a range of text that has been deleted from a document. It is usually renderd as strikethrough
• The <ins> element represents a range of text that has been added to a document.
• The <small> element makes the text font size one size smaller. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text
• The <u> element renders text with an underline. In HTML5, this element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation

Other semantic elements

• The <address> element supplies contact information for its nearest article or body ancestor:
  
  Street 123,
  56789, City,
  Country
• The abbr element represents an abbreviation. If present, the <title> attribute must contain this full description:
• The <cite> element represents a reference to a creative work. It must include the title of a work or a URL reference. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
• The <sub> element is displayed lower, and often smaller, than the main span of text:
  H₂O.
• The <sup> element is displayed higher, and often smaller, than the main span of text:
  3² = 9.
• The <kbd> element represents user input and produces an inline element displayed in the browser's default monospace font.
• The <mark> element represents highlighted text
• The <q> element indicates that the enclosed text is a short inline quotation.
• The <time> element represents either a time on a 24-hour clock. Updated at 15:34
• The <var> element represents a variable in a mathematical expression or a programming context:
  x = y + 2
• The <meter> element represents either a scalar value within a known range or a fractional value:
  180 degrees.
• The <progress> element displays a progress bar:
  70 %
• The <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:
  http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages

Image Embed element

Multiple images under a single figure element

Video Embed element

Embed Audio element

Inline Frame element

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.