~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/2html-text

# 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:

```html
<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:

```html
<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):

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

## Text Formatting

HTML provides semantic elements for text emphasis:

```html
<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:

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

## Ordered Lists

Use `<ul>` for lists where order matters:

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

## Nested Lists

Lists can be nested inside other lists:

```html
<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:

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

## Blockquotes

Use `<blockquote>` for quoted content:

```html
<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:

```html
<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:

```html
<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>`

No changes yet

cancel