Text Elements, Headings, Paragraphs, Lists, Links, and Images
Build the most common page content using foundational HTML elements and understand their meaning beyond simple appearance.
Inside this chapter
- Headings and Content Hierarchy
- Paragraphs and Readable Content
- Ordered and Unordered Lists
- Links and Navigation Meaning
- Images and Alternative Text
- Real Project Example
Series navigation
Study the chapters in order for the clearest path from HTML basics and document structure to semantics, accessibility, SEO, maintainability, and advanced markup practice. Use the navigation at the bottom to move smoothly through the full tutorial series.
Headings and Content Hierarchy
Headings are not just large text. They provide document structure. A page should generally have one top-level <h1> representing the main subject, followed by deeper heading levels where appropriate.
<h1>Web Development Tutorial</h1>
<h2>HTML Basics</h2>
<h3>Text Elements</h3>Paragraphs and Readable Content
The <p> element is used for paragraphs of text. Good HTML authors use paragraph tags for readable prose instead of forcing text layout with random line breaks.
Ordered and Unordered Lists
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Plan content</li>
<li>Write structure</li>
<li>Style the page</li>
</ol>Use unordered lists for grouped items without sequence meaning and ordered lists where sequence matters.
Links and Navigation Meaning
<a href="https://example.com">Visit Example</a>Links are a core part of the web. Good link text should describe destination or action clearly instead of using vague labels like “click here.”
Images and Alternative Text
<img src="team-photo.jpg" alt="Customer support team in the office" />The alt attribute is vital for accessibility and fallback meaning. It should describe the image’s purpose in context, not merely restate the file name.
Real Project Example
A company careers page may use headings for job categories, paragraphs for role descriptions, lists for responsibilities, links for application actions, and images for office culture or employee stories. Good HTML makes the page understandable even before styling is added.