Text Images Links and Lists
Format text with headings and paragraphs, embed images with alt text, create hyperlinks, and build ordered and unordered lists.
Text Images Links and Lists is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Headings: h1 to h6
HTML provides six heading levels. Use them to create a document outline, not to change text size. <h1> is the page title (once per page), <h2> for major sections, <h3> for subsections, and so on.
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>Paragraphs and <br>
The <p> element wraps a paragraph of text. The browser adds spacing above and below automatically. Use <br> sparingly — only for line breaks that are meaningful, like in an address or a poem, not for spacing between paragraphs.
Inline Text Elements
Use inline elements to give text meaning: <strong> for important text (bold), <em> for emphasis (italic), <code> for code snippets, <mark> for highlighted text, and <small> for fine print.
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>Images: the <img> Element
The <img> element embeds an image. The src attribute gives the URL and alt provides alternative text for screen readers and when the image fails to load. Always include a meaningful alt value.
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">Writing Good Alt Text
Alt text should convey the image's content and purpose. Decorative images (spacers, icons purely for decoration) use alt="" (empty string) so screen readers skip them. Never write alt="image of" — just describe what it shows.
Hyperlinks: the <a> Element
The <a>(anchor) element creates hyperlinks. The href attribute sets the destination URL. Link text should describe the destination — never write "click here".
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>target=_blank Security Note
When opening links in a new tab with target="_blank", always add rel="noopener noreferrer". Without it, the opened page can access the opener's window object — a security vulnerability called reverse tabnapping.
Unordered Lists: <ul>
Use <ul> (unordered list) when item order doesn't matter — features, ingredients, nav links. Each item is an <li>. The browser renders bullets by default, but you'll almost always style them with CSS.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Ordered Lists: <ol>
Use <ol> (ordered list) when order matters — steps in a tutorial, rankings, instructions. Items are automatically numbered. Use start and reversed attributes to control numbering.
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>Description Lists: <dl>
<dl> (description list) groups terms and their definitions or descriptions. Use it for glossaries, metadata (author/date), and key-value pairs. <dt> is the term, <dd> is the description.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>Nesting Lists
Lists can be nested to represent hierarchies. Place the child <ul> or <ol> inside the parent <li> element. Don't nest purely for indentation — use CSS instead.
Quick Check
Which attribute provides a text description of an image for screen readers?
Recap: Text Images Links and Lists
Use heading elements for document structure, p for paragraphs, img with meaningful alt text for images, a with descriptive link text for navigation, and ul/ol/dl for list content. Semantics make HTML accessible and machine-readable.
Frequently asked questions
Is the “Text Images Links and Lists” lesson free?
Yes — the full text of “Text Images Links and Lists” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Text Images Links and Lists”?
Format text with headings and paragraphs, embed images with alt text, create hyperlinks, and build ordered and unordered lists. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Text Images Links and Lists” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.