Every web page you see has a structure: a heading here, a paragraph there, a list and a picture. The language that builds this structure is HTML; the browser reads it and shows the page.
HTML is written with tags. Most tags come in pairs: a start tag like <p> and an end tag with a slash, </p>, with the content in between. Edit the text and watch the preview:
<h1>My Notepad</h1> <h2>Today's shopping list</h2> <p>Bread</p>
<h1> to <h6> are headings: h1 is the biggest and h6 the smallest. <p> is a paragraph. <br> breaks to a new line and has no end tag. You need it because the browser ignores the Enter key in your code.
<h3>My Notepad</h3> <h6>Today's shopping list</h6> <p>Bread<br> Milk<br> Cheese</p>
Lists
<ul> is a bulleted list and <ol> is a numbered list. Each item goes inside <li>, and the browser adds the bullets or numbers for you.
<h2>Tomorrow's Schedule</h2> <ol> <li>Science</li> <li>Math</li> <li>Music</li> </ol> <h2>Bring</h2> <ul> <li>Pencil case</li> <li>Water bottle</li> </ul>
Pictures and attributes
<img> shows a picture and has no end tag. On its own it does not know which picture to show, so we give it an attribute inside the start tag: src="file name". The alt attribute describes the picture: it appears if the picture fails to load, and screen readers read it aloud.
<h2>Birthday party</h2> <ul> <li>Cake<br><img src="img/cake.svg" alt="A pink cake"></li> <li>Balloons<br><img src="img/balloons.svg" alt="Red balloons"></li> </ul>
The second picture does not exist, so its alt text shows instead. To write a note that does not appear on the page, use a comment <!-- ... -->:
<!-- Prices change next week --> <h1>Drink Menu</h1> <p>Orange juice: 20 pounds<br> Mango juice: 25 pounds</p>
<h1>Hello<h1> turns everything after it into a big heading; the correct form is <h1>Hello</h1>.Practice
Show My Notepad with the h3 tag and Today's shopping list with the h6 tag.
___My Notepad___ ___Today's shopping list___
Add <br> after Bread and after Ham so each word appears on its own line.
<h2>Shopping list</h2> <p>Bread Ham Cheese</p>
Turn the four words under the heading into a bulleted list with the ul and li tags (same order).
<h1>Shopping List</h1> Tomato Onion Mushroom Garlic
Turn the soup steps into a numbered list with the ol and li tags.
<h1>How to Make Tomato Soup</h1> Boil water Add ingredients Adjust the seasoning
In the third item (Ball), after the <br>, add a picture with src img/ball.svg and alt An orange ball.
Hint
Both attributes go inside the start tag:<img src="..." alt="..."><h1>My Wishlist</h1> <ul> <li>Cake<br><img src="img/cake.svg" alt="A pink cake"></li> <li>Book<br><img src="img/book.svg" alt="A blue book"></li> <li>Ball<br></li> </ul>
Make the first line an HTML comment so it does not appear on the page.
___ The h1 tag is a heading. ___ <h1>Hello</h1>
Write a three-line profile page in this order: an h1 heading Sara's Page, then a p paragraph I love reading., then a picture with src img/book.svg and alt My favourite book.
Key points
- Tags come in pairs:
<p>...</p>, except<br>and<img>. h1–h6are headings,pis a paragraph,ul/olwithlimake lists.<img src="..." alt="...">:srcis the picture file,altdescribes it.- A comment
<!-- ... -->does not show on the page.