html images links and lists: quick revision, 15 bites

Three Tags That Build Every Web Page

Images, links, lists — the web's core trio.

Almost every webpage you visit relies on three HTML elements to look and behave the way it does.

Takeaway. Master <img>, <a>, and list tags and you can build the visual and navigational skeleton of any page.

The <img> Tag: Embedding Pictures

One tag, one image, one src.

Takeaway. <img> is a self-closing tag — it has no closing </img> and always needs src.

Writing Your First Image Tag

See the tag, see the result.

Takeaway. Always include alt — it improves accessibility and appears when the image can't load.

The <a> Tag: Creating Hyperlinks

Click here — literally.

Takeaway. The <a> tag needs both an href attribute and visible link text to work.

Linking to Another Page

href is the doorway.

Takeaway. Use target="_blank" when you want the link to open without leaving the current page.

Unordered vs Ordered Lists

Bullets or numbers — pick wisely.

Takeaway. Both use <li> for items — only the outer tag changes the marker style.

Building a List in HTML

Outer tag + <li> items = list.

Takeaway. Every list item must sit inside its own <li> tag, nested within <ul> or <ol>.

Description Lists: Term + Meaning

Perfect for glossaries and FAQs.

Takeaway. Use <dl> when each item has a name and an explanation, like a dictionary entry.

Forgetting alt Text on Images

No alt = broken accessibility.

Takeaway. alt is not optional in good HTML — it's the image's voice for those who can't see it.

Closing <img> Like a Normal Tag

No </img> — it's self-closing.

Takeaway. Void elements like <img> never get a closing tag.

Where You See These Tags Daily

You've clicked a thousand <a> tags.

Takeaway. These three tags power nearly every clickable, visual, or structured element on the web.

Attributes Exam Questions Love

src, href, alt — memorize these.

Takeaway. Mixing up src and href is the most common exam slip — src is for images, href is for links.

Remember src vs href

src = source, href = hyperlink.

**src** stands for **source** — where the image comes from. **href** stands for **hyperlink reference** — where the link goes.

Takeaway. src = see it, href = click it.

Keep File Paths Simple

Same folder? Just the filename.

Takeaway. Correct relative paths prevent the most common 'broken image' errors.

Lists Can Be Nested

Lists inside lists — totally legal.

You can place a `<ul>` or `<ol>` **inside** an `<li>` to create sub-lists — perfect for menus, outlines, and file trees.

Takeaway. Nested lists let you build hierarchical structures without any CSS.