HTML Text & Typography

Headings in HTML

HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Headings are important for both document structure and SEO.


<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Best Practice: Use headings to create a clear document outline. Each page should have one <h1> element, and headings should follow a logical hierarchy.

Paragraphs and Line Breaks

The <p> element defines a paragraph of text. Browsers automatically add some margin before and after each paragraph.


<p>This is a paragraph. It contains multiple sentences and represents a block of text.</p>
<p>This is another paragraph. HTML automatically adds space between paragraphs.</p>

To create a line break within a paragraph, use the <br> element:


<p>This is a paragraph with a line break.<br>
This text appears on a new line, but within the same paragraph.</p>

This is a paragraph with a line break.
This text appears on a new line, but within the same paragraph.

Text Formatting Elements

HTML provides various elements for formatting text to give it special meaning or appearance:

Element	Description	Example	Result
`<strong>`	Defines important text	`<strong>Important text</strong>`	Important text
`<em>`	Defines emphasized text	`<em>Emphasized text</em>`	Emphasized text
`<mark>`	Defines marked/highlighted text	`<mark>Marked text</mark>`	Marked text
`<small>`	Defines smaller text	`<small>Smaller text</small>`	Smaller text
`<del>`	Defines deleted text	`<del>Deleted text</del>`	~~Deleted text~~
`<ins>`	Defines inserted text	`<ins>Inserted text</ins>`	Inserted text
`<sub>`	Defines subscript text	`H<sub>2</sub>O`	H₂O
`<sup>`	Defines superscript text	`2<sup>3</sup> = 8`	2³ = 8

Note: Avoid using the deprecated <b> and <i> elements for bold and italic text. Use <strong> and <em> instead, as they convey semantic meaning.

Quotations and Citations

Blockquotes

The <blockquote> element defines a section that is quoted from another source:


<blockquote cite="https://www.example.com">
    <p>The only way to learn a new programming language is by writing programs in it.</p>
    <footer>— Dennis Ritchie</footer>
</blockquote>

The only way to learn a new programming language is by writing programs in it.

Dennis Ritchie

Inline Quotes

The <q> element defines a short inline quotation:


<p>According to Einstein, <q>imagination is more important than knowledge</q>.</p>

According to Einstein, imagination is more important than knowledge.

Citations

The <cite> element defines the title of a creative work (e.g., a book, a poem, a song, a movie, a painting, a sculpture, etc.):


<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

The Scream by Edvard Munch. Painted in 1893.

Preformatted Text

The <pre> element defines preformatted text. Text inside this element is displayed in a fixed-width font, and it preserves both spaces and line breaks:


<pre>
    This is
    preformatted text.
    It preserves      spaces
    and line breaks.
</pre>

    This is
    preformatted text.
    It preserves      spaces
    and line breaks.

The <pre> element is often used together with the <code> element to display programming code:


<pre><code>
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));
</code></pre>


function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));

Abbreviations and Acronyms

The <abbr> element defines an abbreviation or an acronym. Using this element provides useful information for browsers, translation systems, and search engines:


<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

The WHO was founded in 1948.

Hover over the abbreviation to see the full title.

Address Information

The <address> element defines contact information for the author/owner of a document or an article. This element is typically displayed in italic, and browsers always add a line break before and after this element:


<address>
    Written by <a href="mailto:webmaster@example.com">John Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

Text Direction

The dir attribute specifies the text direction of an element's content. This is particularly important for languages that are written right-to-left, such as Arabic and Hebrew:


<p dir="ltr">This text goes left to right.</p>
<p dir="rtl">This text goes right to left.</p>

This text goes left to right.

This text goes right to left.

The <bdo> (Bi-Directional Override) element overrides the current text direction:


<bdo dir="rtl">This text will be written from right to left.</bdo>

This text will be written from right to left.

Best Practices for Text and Typography

Use semantic elements that describe the meaning of your content, not just its appearance
Maintain a clear heading hierarchy (h1 → h2 → h3, etc.) for better accessibility and SEO
Use <strong> and <em> instead of <b> and <i> for semantic meaning
Include the lang attribute in the HTML tag to specify the language of your document
Use the dir attribute when working with right-to-left languages
Keep paragraphs concise and focused on a single idea
Use <blockquote> for long quotations and <q> for short, inline quotes
Include the cite attribute with quotations to reference the source
Use <abbr> with a title attribute to explain abbreviations and acronyms
Avoid using too many text formatting elements that might make your content hard to read