Headings and paragraphs
`<h1>` is the main heading. `<h2>` is a subheading. `<h3>` is a heading inside an h2 section.
`<p>` is a paragraph. The browser adds space before and after it.
Use headings in order. Choose the tag for what the text is, not for how big it looks. CSS controls the size.
<h1>Café Retiro</h1>
<h2>Breakfast</h2>
<h3>Served until 12:00</h3>
<p>Fresh coffee, toast with tomato and olive oil, and homemade cakes.</p>
?Why?Search engines and screen readers use headings to understand the page. A blind visitor can jump from heading to heading.
Ordered and unordered lists
An unordered list `<ul>` shows bullet points. Use it when order does not matter.
An ordered list `<ol>` shows numbers. Use it when order matters, such as steps or a top 3.
Each item goes in `<li>` (list item), inside the ul or ol.
<ul>
<li>Café con leche</li>
<li>Tostada con tomate</li>
<li>Tarta de Santiago</li>
</ul>
<ol>
<li>Choose a cake.</li>
<li>Pay at the counter.</li>
<li>Collect your order.</li>
</ol>!Watch outAn li must be inside a ul or ol. A list item on its own is invalid HTML.
div and classes
A `<div>` is a box that groups other elements. On its own it changes nothing you can see.
A class is a label you give to elements with the class attribute. CSS can then style everything with that label.
Many elements can share one class. One element can have two classes, separated by a space.
<div class="offer">
<h2>Today's offer</h2>
<p>Coffee and a croissant for €3.20.</p>
<p class="note">Until 11:00 only.</p>
</div>/* every element with class="offer" */
.offer {
background-color: #FFF3E0;
border: 2px dashed #8B4513;
padding: 10px;
}
.note {
font-style: italic;
}?Why?A class lets you style some paragraphs differently without changing every paragraph.
Tables: table, tr, th, td
`<table>` starts a table. Each row is a `<tr>` (table row).
Inside a row, each cell is a `<td>` (table data) or a `<th>` (table header). Header cells are bold and centred by default.
Build a table row by row, from top to bottom. In each row, write the cells from left to right.
<table>
<tr>
<th>Drink</th>
<th>Price</th>
</tr>
<tr>
<td>Café con leche</td>
<td>€1.80</td>
</tr>
<tr>
<td>Té verde</td>
<td>€1.60</td>
</tr>
</table>!Watch outEvery row must be closed with `</tr>` before the next `<tr>`. A missing closing tag can shift cells into the wrong row.
Merging cells: colspan and rowspan
colspan makes a cell stretch across several columns. colspan="3" fills 3 columns.
rowspan makes a cell stretch down several rows. rowspan="2" fills 2 rows.
When a cell spans, leave out the cells it covers. A row below a rowspan cell has one cell fewer.
e.g.ExampleCheck by counting columns in each row:
Row 1: one th with colspan 3 → 3 columns
Row 2: 3 th → 3
Row 3: 3 td → 3
Row 4: Saturday + 09:00 (rowspan 2) + 21:00 → 3
Row 5: Sunday + (09:00 from above) + 15:00 → 3. Only 2 td are written.
<h2 id="hours">Opening hours</h2>
<table>
<tr>
<th colspan="3">Opening hours</th>
</tr>
<tr>
<th>Day</th>
<th>Open</th>
<th>Close</th>
</tr>
<tr>
<td>Monday to Friday</td>
<td>07:30</td>
<td>20:00</td>
</tr>
<tr>
<td>Saturday</td>
<td rowspan="2">09:00</td>
<td>21:00</td>
</tr>
<tr>
<td>Sunday</td>
<td>15:00</td>
</tr>
</table>!Watch outIf row 5 also had a cell for 09:00, the row would have 4 columns and the table would stick out on the right.
Table and cell sizes
Set a width or height in pixels (px) for a fixed size, or in percent (%) for a share of the space.
width: 80% on a table makes it 80% of the page width, so it shrinks on a phone. 600px stays the same on every screen.
Use a style attribute in the tag, or a rule in the stylesheet. Older pages use width="80%" attributes. You may see them in source files.
<table style="width:80%">
<tr>
<th style="width:200px">Day</th>
<td style="height:40px">Monday to Friday</td>
</tr>
</table>/* the same sizes, set in the stylesheet */
table {
width: 80%;
}
th {
width: 200px;
}
td {
height: 40px;
}!Watch outWrite the unit with no space: 200px, not 200 px or 200. Without a valid unit, the browser ignores the size.
Images
`<img>` inserts an image. It has no closing tag.
src is the relative path to the image file. alt is the alternative text, read aloud by screen readers and shown if the image cannot load.
width and height set the display size in pixels. Keep the aspect ratio (topic 12), or the image looks stretched.
e.g.Exampletarta.jpg is 600 × 400 pixels. The ratio is 600 ÷ 400 = 1.5.
The question asks for a width of 300 pixels.
Height = 300 ÷ 1.5 = 200 pixels. The ratio is kept.
width="300" height="300" would squash the cake into a square.
<img src="images/tarta.jpg" alt="A slice of tarta de Santiago, an almond cake" width="300" height="200">
?Why?Alt text makes the page accessible to blind visitors. The exam often asks for it and gives the exact words.
Sound and video
`<audio>` plays sound and `<video>` plays video. Put the file in a `<source>` tag inside them, with its type.
controls shows play, pause and volume buttons. autoplay starts the media when the page loads.
Video takes width and height in pixels. Text inside the element shows only if the browser cannot play the file.
<audio controls>
<source src="media/jingle.mp3" type="audio/mpeg">
Your browser cannot play this sound.
</audio>
<video width="480" height="270" controls autoplay muted>
<source src="media/barista.mp4" type="video/mp4">
Your browser cannot play this video.
</video>?Why?controls, autoplay and muted are true or false attributes. Writing the word switches them on. They need no value.
!Watch outMost browsers block autoplay with sound. Add muted so autoplay works. Without controls, a visitor cannot pause the media.