Links, Images, and Semantic Elements
Links
The href attribute is where the link goes. Links can point to other sites (absolute URLs) or other pages on your own site (relative URLs). target="_blank" opens a new tab, and should be paired with rel="noopener" so the new page can't control the original tab.
Images
alt text is not optional, it's read aloud by screen readers and shown if the image fails to load. A decorative image with no informational value can use alt="", but never omit the attribute entirely.
Semantic layout elements
Instead of wrapping everything in generic <div>s, HTML5 gives you elements that describe a section's role on the page:
| Element | Role |
|---|---|
<header> | Introductory content, often a logo and navigation. |
<nav> | A block of navigation links. |
<main> | The primary content, unique to this page, one per page. |
<section> | A thematic grouping of content, usually with its own heading. |
<article> | Self-contained content that would make sense on its own (a blog post, a product card). |
<footer> | Closing content, like copyright or contact links. |
TIP
Semantic elements look identical to a <div> by default, their real value is meaning: screen readers, browsers, and search engines all use them to understand your page's structure.