HTML Text Elements

Text is the foundation of every web page. HTML provides specific elements to structure text meaningfully — from headings to paragraphs to lists.

Headings

Headings create a hierarchy for your content. Use h1 through h6, with h1 being the most important:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Least important</h6>

Best practices:

• Only one h1 per page (the page title)
• Don’t skip levels (h1 → h3 skips h2)
• Headings should make sense when read in order

Paragraphs

The <p> element wraps blocks of text:

<p>This is a paragraph. Browsers add space before and after paragraphs automatically.</p>
<p>This is another paragraph. Each paragraph starts on a new line.</p>

Important: Never use <br> to separate paragraphs. Use <p> elements instead.

Line Breaks

Use <br> for line breaks within a paragraph (rarely needed):

<p>
  123 Main Street<br />
  Cairo, Egypt 12345
</p>

Text Formatting

HTML provides semantic elements for text emphasis:

<strong>Bold text</strong> (important)
<em>Italic text</em> (emphasis)
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

Unordered Lists

Use <ul> for lists where order doesn’t matter:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered Lists

Use <ul> for lists where order matters:

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

Nested Lists

Lists can be nested inside other lists:

<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Description Lists

Use <dl> for key-value pairs:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Blockquotes

Use <blockquote> for quoted content:

<blockquote cite="https://example.com">
  <p>The best way to learn HTML is to build real projects.</p>
</blockquote>

Code

Use <code> for inline code and <pre> for code blocks:

<p>Use the <code>&lt;p&gt;</code> tag for paragraphs.</p>

<pre>
  function greet() {
    console.log("Hello!");
  }
</pre>

Complete Example

Here’s a real-world text structure:

<article>
  <h1>Getting Started with Web Development</h1>
  <p>Web development has three core technologies:</p>

  <ul>
    <li><strong>HTML</strong> — Structure and content</li>
    <li><strong>CSS</strong> — Styling and layout</li>
    <li><strong>JavaScript</strong> — Interactivity and behavior</li>
  </ul>

  <h2>Why Learn HTML First?</h2>
  <p>HTML is the <em>easiest</em> of the three to learn. It's also the foundation — you can't add styles or behavior without content.</p>

  <blockquote>
    <p>"HTML is not a programming language. It's a markup language that defines the structure of your content."</p>
  </blockquote>

  <h3>Your First Steps</h3>
  <ol>
    <li>Learn the basic text elements</li>
    <li>Practice with simple pages</li>
    <li>Build a complete website</li>
  </ol>
</article>

Common Mistakes

1. Skipping heading levels — h1 → h3 hurts accessibility
2. Using <br> for spacing — Use CSS margins instead
3. Bold/italic for emphasis — Use <strong> and <em> instead
4. Missing list items — Each <li> must be inside <ul> or <ol>