Text, Links, and Images

Text, Links, and Images

Text, links, and images are the building blocks of web content. Mastering these elements gives you the tools to build any page.

Text Elements

HTML provides several elements for structuring text:

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-sub Heading</h3>

<p>This is a paragraph of text. Browsers add space between paragraphs.</p>

<p>You can <strong>bold</strong> and <em>italicize</em> text.</p>

<p>Use <br> for a line break and <hr> for a horizontal rule.</p>

<blockquote>
    <p>A famous quote goes here.</p>
</blockquote>

Heading levels run from <h1> to <h6>. Use only one <h1> per page and maintain a logical heading hierarchy.

Links

The <a> element creates hyperlinks. The href attribute specifies the destination.

<a href="https://example.com">External link</a>
<a href="/about">Internal link</a>
<a href="mailto:user@example.com">Email link</a>
<a href="#section2">Jump to section</a>
<a href="file.pdf" download>Download file</a>

Images

The <img> element embeds images. It is self-closing and requires both src and alt attributes.

<img src="photo.jpg" alt="A mountain landscape" width="800" height="600">

The alt attribute is mandatory for accessibility. Screen readers read it aloud, and browsers display it if the image fails to load.

The Figure Element

Pair images with captions using <figure> and <figcaption>:

<figure>
    <img src="sunset.jpg" alt="Sunset over the ocean">
    <figcaption>Sunset over the Pacific Ocean</figcaption>
</figure>

Key Points

• Use heading tags (<h1> through <h6>) for hierarchical titles.
• <a> creates links; href sets the destination URL.
• <img> embeds images; always include the alt attribute.
• <strong> and <em> provide bold and italic emphasis.
• Use <figure> and <figcaption> for images with captions.