Text, Links & Images

Now that you understand tags and elements, it's time to add real content to your pages. This lesson covers the most common content elements: text formatting, lists, links, and images.

Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Use them to create a logical document hierarchy:

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>

Paragraphs and text formatting

Wrap body text in <p> tags. Use inline elements to emphasize text:

<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>
<p>This is <mark>highlighted</mark> and <code>monospace</code>.</p>

Lists

Use <ul> for unordered (bulleted) lists and <ol> for ordered (numbered) lists. Each item is wrapped in <li>:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Links

Links are created with the <a> (anchor) tag. The href attribute specifies the destination URL:

<a href="https://example.com">Visit Example</a>
<a href="mailto:hello@example.com">Send Email</a>
<a href="#section-id">Jump to section</a>

Images

Images are self-closing and require the src (source) attribute. The alt attribute provides alternative text for screen readers and broken images:

<img src="photo.jpg" alt="A sunset over the ocean">
<img src="https://via.placeholder.com/200" alt="Placeholder image">

Putting it all together

Quiz