On this page

Essential tags

12 min read TextCh. 1 — HTML Fundamentals

Headings (h1-h6)

Headings range from <h1> (most important) to <h6> (least important). There should be only one <h1> per page, and they should follow a logical hierarchy.

Paragraphs and text

The <p> element defines a paragraph. Other text elements include:

  • <strong> — Important text (displayed in bold)
  • <em> — Emphasis (displayed in italics)
  • <code> — Inline code
  • <mark> — Highlighted text
  • <small> — Secondary text

Lists

HTML offers three types of lists:

  1. Unordered lists (<ul>) — Bullet points
  2. Ordered lists (<ol>) — Numbered
  3. Definition lists (<dl>) — Terms and definitions

The <a> element creates a link (hyperlink). The href attribute specifies the destination URL.

Security: When using target="_blank", always add rel="noopener" to prevent tab-napping attacks.

Practice

  1. Create a heading hierarchy: Write a page with one <h1>, two <h2> headings, and at least one <h3> inside each section, respecting the hierarchical order.
  2. Build three types of lists: Create an unordered list (<ul>), an ordered list (<ol>), and a definition list (<dl>) with at least three items each.
  3. Apply text formatting: Write a paragraph that uses <strong>, <em>, <code>, and <mark> to highlight different parts of the content.

In the next lesson, we will learn about semantic HTML.

Caution
Do not skip heading levels (e.g., from h1 to h3 without h2). This affects accessibility and SEO.
html
<h1>Main heading</h1>
<h2>Subheading</h2>

<p>This is a paragraph with <strong>important text</strong> and <em>emphasis</em>.</p>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<a href="https://example.com" target="_blank" rel="noopener">
  Visit site
</a>