StepByStack Docs

Appearance

Text Content ​

HTML provides a variety of elements specifically designed to structure and give meaning to the text content within your web pages. Using these elements correctly helps browsers, search engines, and assistive technologies (like screen readers) understand your content.

Headings (<h1> - <h6>) ​

Headings are crucial for organizing your content and defining a clear document structure. HTML offers six levels of headings, from <h1> (the most important) to <h6> (the least important).

  • <h1>: Represents the main heading for the entire page or the top-level section. For accessibility and SEO, it's generally recommended to use only one <h1> element per page.
  • <h2>: Represents section headings.
  • <h3>: Represents sub-section headings.
  • <h4>, <h5>, <h6>: Represent further levels of sub-headings.

Think of headings as creating an outline for your content. Use them hierarchically – don't skip levels (e.g., don't jump from an <h2> directly to an <h4> without an <h3>).

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Understanding Headings</title>
</head>
<body>
    <h1>Main Page Title (Level 1)</h1>
    <p>Introduction to the topic...</p>

    <h2>Section One (Level 2)</h2>
    <p>Content for section one...</p>

    <h3>Subsection 1.1 (Level 3)</h3>
    <p>Details for subsection 1.1...</p>

    <h3>Subsection 1.2 (Level 3)</h3>
    <p>Details for subsection 1.2...</p>

    <h2>Section Two (Level 2)</h2>
    <p>Content for section two...</p>
</body>
</html>

TIP

Use headings for structuring your content, not just to make text look big or bold. While browsers apply default styling (larger, bolder fonts for higher levels), the actual appearance should be controlled using CSS. Screen readers use headings to help users navigate the page.

Paragraphs (<p>) ​

The <p> element is one of the most common HTML elements. It's used to define a paragraph of text.

Browsers automatically add some vertical space (margin) before and after each paragraph, separating them visually. It's a block-level element.

html
<p>This is the first paragraph of text. It contains multiple sentences and provides basic information.</p>

<p>This is the second paragraph. Notice how the browser separates it from the first one.</p>

Text Formatting (Semantic vs. Presentational) ​

HTML offers elements to format text within paragraphs or other elements. It's important to distinguish between elements that add semantic meaning and older elements that were primarily presentational.

Semantic Elements ​

These elements describe the meaning or importance of the enclosed text:

  • <strong>: Indicates that the enclosed text has strong importance, seriousness, or urgency. Browsers typically render this as bold text. Screen readers might use a different voice inflection.
  • <em>: Indicates emphasis on the enclosed text. Browsers typically render this as italic text. Screen readers might use a different voice inflection.

Using <strong> and <em> is preferred when the text truly carries extra importance or needs emphasis, as it benefits accessibility and SEO.

html
<p>You <strong>must</strong> complete this step before proceeding.</p>
<p>This task is <em>relatively</em> simple.</p>

Presentational (or Style-Based) Elements ​

Older HTML included elements primarily for visual styling:

  • <b>: Historically used simply to make text bold. HTML5 redefined it to represent text that should be stylistically offset from normal prose (like keywords, product names) without conveying extra importance.
  • <i>: Historically used simply to make text italic. HTML5 redefined it for text in an alternate voice or mood, or representing things like technical terms, thoughts, or foreign words.

While <b> and <i> still work and have niche semantic uses in HTML5, avoid using them purely for visual styling. If you just want text to be bold or italic for aesthetic reasons, use CSS (font-weight: bold; or font-style: italic;). If the text has strong importance or emphasis, use <strong> or <em>.

html
<p>The keyword <b>HTML</b> stands for HyperText Markup Language.</p>
<p>The Latin phrase <i>carpe diem</i> means "seize the day".</p>
<p><strong style="font-weight: normal;">This text has strong importance but isn't bold via CSS.</strong></p>
<p><em style="font-style: normal;">This text is emphasized but isn't italicized via CSS.</em></p>

Other formatting elements exist (e.g., <u> for unarticulated annotations - previously underline, <mark> for highlighted text, <code> for code fragments, <sub> for subscript, <sup> for superscript), but <strong> and <em> are the most crucial semantic formatting elements.

Preformatted Text (<pre>) ​

The <pre> element defines preformatted text. Unlike standard HTML where multiple spaces or line breaks in the source code are collapsed into single spaces, the whitespace (spaces, tabs, line breaks) inside a <pre> element is preserved exactly as it is written in the HTML source.

Browsers typically render the content of <pre> in a monospace font (like Courier or Consolas). It's ideal for displaying:

  • Code snippets
  • ASCII art
  • Text where precise alignment and spacing are important
html
<pre>
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");
</pre>

<pre>
  ____  _             ____        ____  _             _    
 / ___|| |_ ___ _ __ | __ ) _   _/ ___|| |_ __ _  ___| | __
 \___ \| __/ _ \ '_ \|  _ \| | | \___ \| __/ _` |/ __| |/ /
  ___) | ||  __/ |_) | |_) | |_| |___) | || (_| | (__|   | 
 |____/ \__\___| .__/|____/ \__, |____/ \__\__,_|\___|_|\_\
               |_|          |___/                          
</pre>

Blockquotes (<blockquote>) ​

The <blockquote> element is used to indicate that the enclosed text is an extended quotation, cited from another source.

  • It's a block-level element.
  • Browsers usually render blockquotes with some indentation on both sides.
  • The optional cite attribute can be used to provide the URL of the source document or message from which the quotation is taken. This URL is not displayed to the user by default but can be useful for browsers, search engines, or scripts.
html
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <p>The HTML &lt;blockquote&gt; Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>As the MDN documentation states, blockquotes are for extended quotations.</p>

For shorter, inline quotations, the <q> element can be used.

Other Useful Text Elements ​

  • <span>: This is a generic inline container. It has no semantic meaning on its own and doesn't inherently change the appearance of text. Its main purpose is to group inline content so you can apply styles (via class or style attributes) or target it with JavaScript.
    html
    <p>Most of the text is black, but <span style="color: red;">this word</span> is red.</p>
  • <br>: The line break element. It's an empty element used to insert a single line break within text. Use it when a line break is structurally part of the content, such as in poems or addresses. Do not use <br> simply to create vertical space between elements – use CSS margins or padding for that.
html
<p>
  StepByStack<br>
  123 Developer Lane<br>
  WebCity, WC 45678
</p>
  • <hr>: The thematic break element. It represents a paragraph-level thematic break, such as a scene change in a story or a transition to another topic within a section of text. It's an empty element. While browsers typically render it as a horizontal line (horizontal rule), its meaning is semantic (a break in theme), not presentational. Use CSS to style its appearance.
    html
    <p>End of the first topic.</p>
<hr>
<p>Start of the second topic.</p>
Copyright © 2025 StepByStack
Buy Me a Coffee - StepBytStack