Text Elements
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.
Lists
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
- This list is ordered
- Second list item
- Third list item
- First let's start another ordered list
- Second, let's nest a list
- First (a) item
- Second (b) item
- Third (c) item
- Third, moving on
- This list starts from "11"
- and continues with "12"
- ...then with "13"...
- Fourteen, let's reverse the nested list
- In HTML5 we can reverse lists
- and have a countdown
- ... THREE ...
- ... TWO ...
- ... ONE ...
- 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.
Block Level elements
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
echo "The HTML <code> element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font."
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
Details / Summary
I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?
A keyboard.Horizontal line
This paragraph is below an horizontal line
Tables
Used to create and handle tabular data
Table with caption
Planet | Closest | Furthest | Average |
---|---|---|---|
Mercury | 46 million km | 70 million km | 57 million km |
Venus | 107 million km | 109 million km | 108 million km |
Earth | 147 million km | 152 million km | 150 million km |
Mars | 205 million km | 249 million km | 228 million km |
Jupiter | 741 million km | 817 million km | 779 million km |
Saturn | 1.35 billion km | 1.51 billion km | 1.43 billion km |
Uranus | 2.75 billion km | 3.00 billion km | 2.88 billion km |
The above table with thead, tfoot, and tbody
Planet | Closest | Furthest | Average |
---|---|---|---|
Mercury | 46 million | 70 million | 57 million |
Venus | 107 million | 109 million | 108 million |
Earth | 147 million | 152 million | 150 million |
Mars | 205 million | 249 million | 228 million |
Jupiter | 741 million | 817 million | 779 million |
Saturn | 1.35 billion | 1.51 billion | 1.43 billion |
Uranus | 2.75 billion | 3.00 billion | 2.88 billion |
km | km | km |
Table with colgroup and col
See Tables with irregular headers, W3CMars | Venus | |||
---|---|---|---|---|
Produced | Sold | Produced | Sold | |
Teddy Bears | 50,000 | 30,000 | 100,000 | 80,000 |
Board Games | 10,000 | 5,000 | 12,000 | 9,000 |
Poster name | Color | Sizes available | ||
---|---|---|---|---|
Zodiac | Full color | A2 | A3 | A4 |
Black and white | A1 | A2 | A3 | |
Sepia | A3 | A4 | A5 | |
Angels | Black and white | A1 | A3 | A4 |
Sepia | A2 | A3 | A5 |
Text Markup
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 textwith 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:
H2O. - The
<sup>
element is displayed higher, and often smaller, than the main span of text:
32 = 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 ashort inline quotation
. - The
<time>
element represents either a time on a 24-hour clock. Updated at - 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: - 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
Forms
Embedded content
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.