Headings, paragraphs and picture descriptions
Here are the tags you will use most. Headings go from h1, the biggest, to h6, the smallest. Use one h1 as the main title, and h2 for subheadings. The tag p is a paragraph. The tag b makes bold letters, and i makes italic letters. A link uses the tag a and an address. Use invented addresses only. A picture uses the tag img. It has a place for the picture file, and a description called alt text, for example alt="A camel in the desert". The alt text matters. People with low vision use a screen reader that reads the description aloud, so they understand the picture. Remember week 1: technology that helps. The alt text is also shown if the picture cannot load. The browser shows the words, the pictures and the links. It hides the tags, and you can see them only if you inspect the page.
| Tag | What it makes |
|---|---|
| <h1> … <h6> | headings, from biggest to smallest |
| <p> | a paragraph |
| <b> <i> | bold and italic letters |
| <a> | a link to another page |
| <img> | a picture with its description |
1<h1>Camels</h1> 2<h2>Where they live</h2> 3<p>In dry deserts.</p>
Camels Where they live In dry deserts.
1<img src="camel.png" alt="A camel walking in the desert">[picture: A camel walking in the desert]
1<a href="https://www.example-class.org">Our class</a>Our class (a link)
Code to page. For each line, draw what the browser shows. (a) <h2>Lunch</h2>; (b) <p>We eat <i>fresh</i> bread.</p>; (c) an img with alt "A basket of oranges". For (c), draw a frame with the words of the description inside. Then explain why the alt text matters.
1<h1>Fish</h1> 2<p>Fish swim.</p>