Semantic HTML: Links, Images, Lists & Tables

You could build an entire website using only <div> elements, and the browser would happily render it. But a page made only of divs tells a screen reader, a search engine, and the next developer who opens the file absolutely nothing about what each part is for. Semantic HTML fixes that by choosing elements whose names describe their role.

Landmark Elements

A handful of elements describe the major regions of a page:

• <header> — introductory content for a page or a section, often a logo and heading.
• <nav> — a block of primarily navigational links.
• <main> — the one region holding the page's unique, central content (only one per page).
• <section> — a thematic grouping of content, usually with its own heading.
• <article> — a self-contained piece of content that would still make sense if pulled out and syndicated elsewhere, like a blog post or product card.
• <aside> — content tangentially related to the main content, like a sidebar.
• <footer> — closing content for a page or section, like copyright or contact links.

These aren't just cosmetic labels. Screen readers expose them as "landmarks" that let a visitor jump straight to navigation or straight to the main content, instead of listening through everything from the top every single time. Use a plain <div> only when none of these more descriptive elements fit.

Links and Images

A link is written <a href="destination">visible text</a>. The href attribute is what makes it a link at all — without one, an <a> isn't clickable. Destinations can be another page, a section on the same page (#some-id), or an external site.

Images use <img src="path" alt="description" /> — note there's no closing tag, since an image has no content to wrap. The alt attribute is not optional decoration: it's the text a screen reader announces instead of the image, and the text a browser shows if the image fails to load. A purely decorative image (like a background flourish) can use alt="" to be explicitly skipped; anything meaningful needs a real description.

Lists

• <ul> (unordered list) is for items with no inherent order — a set of features, ingredients, or links.
• <ol> (ordered list) is for items where sequence matters — steps in a recipe, rankings.
• Both wrap individual <li> (list item) elements, and lists can nest inside each other to represent sub-groups.

Tables

Tables exist for tabular data — rows and columns of related values, like a pricing chart or a schedule — never for general page layout (that's what Flexbox and Grid, covered later in this course, are for). A table's shape is: <table> wraps optional <thead> (header row) and <tbody> (data rows); each row is a <tr>; header cells use <th>, data cells use <td>. Marking header cells with <th> instead of <td> isn't just visual — it tells assistive technology which cell labels which column or row.

Reaching for the semantically correct element over a generic <div> costs nothing extra to write, and pays off the moment anyone — human or machine — needs to understand your page's structure rather than just its appearance.