Skip to content
preservelog

Basic HTML Elements - Text Elements

4. Text Elements![[newspaper_small.jpg]]

Section titled “4. Text Elements![[newspaper_small.jpg]]”

Structured content makes the reading experience easier and more enjoyable.

In HTML, each paragraph has to be wrapped in a <p> element, like so:

<p>I am a paragraph, oh yes I am.</p>

Each heading has to be wrapped in a heading element:

htmlCopy to Clipboard

<h1>I am the title of the story.</h1>
  • Headings (<h1> to <h6>)
    • Creating headings of different levels
    • Importance of headings for SEO and accessibility
  • Paragraphs (<p>)
    • Structuring text content with paragraphs
  • Line Breaks (<br>)
    • Adding line breaks within text
  • Horizontal Rules (<hr>)
    • Inserting horizontal lines to separate content

Certainly! Let’s dive into a detailed explanation of these HTML elements:

  1. Headings (<h1> to <h6>)

Headings are used to structure the content of a webpage hierarchically. There are six levels of headings, from <h1> (most important) to <h6> (least important).

Creating headings:

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

Importance for SEO and accessibility:

  • SEO: Search engines use headings to understand the structure and content of a page. An <h1> is typically used for the main title of the page and carries the most weight.
  • Accessibility: Screen readers use headings to navigate content. A proper heading structure allows users to understand the page’s organization and jump to specific sections.

Best practices:

  • Use only one <h1> per page
  • Maintain a logical hierarchy (don’t skip levels)
  • Use headings to outline your content, not for styling purposes

The paragraph element is used to structure blocks of text.

Example:

<p>This is a paragraph of text. It can contain multiple sentences and will typically have some space above and below it when rendered in a browser.</p>

Key points:

  • Browsers typically add some margin above and below paragraphs
  • Paragraphs automatically start on a new line
  • Empty paragraphs can be used to add extra space between content (though CSS is preferred for styling)
  1. Line Breaks (<br>)

The line break element is used to create a single line break within text.

Example:

<p>This is the first line.<br>This is the second line.</p>

Key points:

  • It’s an empty element (no closing tag needed)
  • Use sparingly; for formatting poetry or addresses, not for creating space between paragraphs
  • For accessibility, avoid using multiple <br> tags to create larger gaps; use CSS margins instead
  1. Horizontal Rules (<hr>)

The horizontal rule element is used to create a thematic break between content sections.

Example:

<p>This is the end of one section.</p>
<hr>
<p>This is the beginning of another section.</p>

Key points:

  • It’s typically rendered as a horizontal line
  • It’s an empty element (no closing tag needed)
  • Use it to separate content thematically, not just for visual decoration
  • Can be styled with CSS to change its appearance

Accessibility considerations:

  • Screen readers will typically announce an <hr> as a “separator”
  • If you’re using it purely for decoration, consider using CSS borders instead

Best practices for all these elements:

  1. Use them for their semantic meaning, not just for visual styling
  2. Combine them effectively to create well-structured, easy-to-read content
  3. Use CSS for visual styling rather than relying on HTML alone
  4. Consider how your content will be perceived by both search engines and assistive technologies

By using these elements correctly, you create web content that is well-structured, accessible, and optimized for search engines.