Home

Images and Semantic Tags

Images

Note:
Image Tags are self-closing, no need for </img>

Local Image

A description of the image?

<img src="../../img/example-of-chaos.png" alt="A description of the image">

Online Image

XKCD of course

<img src="https://imgs.xkcd.com/comics/im_an_idiot.png" alt="XKCD of course">

Semantic Tags

These give meaning to content (for accessibility, SEO, and general clarity).

Examples:

<header> – top of a page/section
<nav> – site navigation
<main> – primary content area
<section> – a grouped chunk of related content
<article> – self-contained content (blog post, news item)
<footer> – bottom info

These all go within the website <body> not in <head>

They don’t look different, but they’re better than just stacking divs forever...