Move beyond plain text
After headings and paragraphs, most pages need images, links, comments, and simple text formatting. These features make your page more useful and easier to maintain.
- Images and alt text
- Links and targets
- Comments in code
- Formatting meaningful text
Add images with <img>
The <img> element displays an image. The src attribute gives the image path, and the alt attribute describes the image for accessibility and failed loads.
<img src="../favicon.ico" alt="Modern Front End Tech logo" width="160" height="160">Create links with <a>
The href attribute tells the link where to go. Use target="_blank" for a new tab, and add rel="noopener noreferrer" for safer external links.
<a href="https://www.wikipedia.com" target="_blank" rel="noopener noreferrer">
Visit Wikipedia
</a>Leave notes that users cannot see
HTML comments are useful for reminders, section labels, and temporarily hiding code while you test.
<!-- This note is visible in the code, not on the page. -->Use formatting tags with purpose
Some formatting tags add visual emphasis, and some add meaning. For important text, <strong> is usually better than using bold only for decoration.
<strong>Important text</strong>
<em>Emphasized text</em>
H<sub>2</sub>O
10<sup>2</sup>Build a small card
Create a card with one image, one heading, one paragraph, one link, and one comment in the code.