HTML Structure, Elements and Semantic Tags

Common elements

<h1>Main Heading</h1>n<h2>Subheading</h2>n<p>A paragraph of text.</p>n<ul>n    <li>First item</li>n    <li>Second item</li>n</ul>n<img src="photo.jpg" alt="A description of the photo">n<a href="https://tutoline.com">Visit Tutoline</a>

Headings run from <h1> (most important, generally used once per page) down to <h6>. The alt attribute on <img> is not optional in any serious sense — it is read aloud by screen readers for visually impaired visitors, and it is what displays if the image fails to load, so always write a real, descriptive value rather than leaving it blank or filling it with keywords.

Semantic tags

<header>...</header>n<nav>...</nav>n<main>...</main>n<article>...</article>n<footer>...</footer>

Older HTML leaned heavily on generic <div> elements for everything. Modern HTML prefers semantic tags like <header>, <nav>, and <article> that describe what a section of the page actually is, not just how it should be boxed off. This genuinely matters, not just stylistically — screen readers and search engines both use these tags to understand a page’s structure, exactly the same way this site’s own theme uses a <main> landmark for accessibility.

Attributes

An attribute adds extra information to a tag, written inside the opening tag as name="value" — href on a link, src and alt on an image, class and id for styling hooks (covered in the next lesson). Most tags accept several attributes at once.

A common mistake

Forgetting to close a tag, or closing tags out of order (<b><i>text</b></i> instead of the correctly nested <b><i>text</i></b>), does not usually crash anything — browsers are forgiving — but it can produce subtly broken layouts that are hard to trace back to the real cause. Well-formed, properly nested HTML avoids an entire category of mystery bugs.