HTML-Based Web Development
Senior 4 · ICT
HTML-Based Web Development
Lesson 2 of 5
25 min
Long before computers, an editor preparing a book for the printer wrote instructions on the author's pages by hand: underline this as a heading, set this in italics, start a new paragraph here. That was called marking up the manuscript. HTML does the same job in the file itself. In this lesson you mark up text: headings and paragraphs, words that need emphasis, chemical formulas and powers, and lists.
HTML has six levels of heading, <h1> to <h6>. <h1> is the title of the page's content, <h2> marks its main sections, <h3> the sub-sections inside an <h2>, and so on. Together they make an outline, like the contents page of a book. Screen readers list a page's headings so that a blind user can jump between them, and search engines use them to work out what the page is about.
A paragraph goes in <p>. Browsers collapse white space: any run of spaces, tabs and line breaks in the code is shown as ONE space. To force a new line inside a paragraph, as in an address or a poem, use the void element <br>. <hr> draws a horizontal line that marks a change of topic. <pre> (preformatted text) is the exception to the rule: it keeps every space and line break exactly as typed.
Run it and compare the code with the page. The extra spaces and the line breaks in the first paragraph disappear; the <br> elements give three short lines; the text in <pre> keeps its spacing and appears in a fixed-width font.
Definition
Block-level element: an element that starts on a new line and takes the full width available, for example <h1>, <p>, <ul>, <blockquote>.
Inline element: an element that sits inside a line of text and is only as wide as its content, for example <strong>, <em>, <sub>, <a>. Inline elements go inside block elements, not the other way round.
Character reference (entity): a code beginning with & and ending with ; that displays a character, for example < for < and © for ©.
Modern HTML asks what a piece of text means, not how it should look; the look is the job of CSS in Unit 6. That is why HTML has two pairs that look the same in a browser but mean different things.
| Element | Meaning | Usually shown as |
|---|---|---|
<strong> | Strong importance, seriousness or urgency (a warning) | bold |
<b> | Draws attention without extra importance (a keyword, a product name) | bold |
<em> | Stress emphasis: the word you would say louder; it can change the meaning of the sentence | italic |
<i> | Text set off from the rest: a foreign word, a scientific name, a thought | italic |
<mark> | Highlighted because it is relevant, such as a search term | highlighted |
<sub>, <sup> | Subscript (H₂O) and superscript (x²) | lowered, raised |
<del>, <ins> | Text deleted from, and inserted into, a document | |
<small> | Side comments and small print, such as copyright | smaller |
<abbr title="…"> | An abbreviation; title gives the full form, shown when you hover | dotted underline |
<code>, <kbd> | Computer code; keys the user presses | fixed-width font |
<blockquote> | A long quotation, as its own block | indented block |
Screen readers can announce <strong> and <em> differently from normal text, so choose by meaning. <u> exists, but underlined text looks like a link on the web, so avoid it.
Run it and find each element on the page. Hover over "REB" to see the full name from the title attribute. The last but one line shows why entities exist: a real < would start a tag, so to display one you write <.
| You want | Write | Why |
|---|---|---|
| < | < | a real < starts a tag |
| > | > | pairs with < |
| & | & | a real & starts an entity |
| " | " | inside an attribute value in double quotes |
| a space that never breaks | | keeps "5 000" or "Page 7" on one line |
| © | © | copyright notices |
| → | → | an arrow, as in a chemical equation |
With <meta charset="UTF-8"> you can type letters such as é, ç and ü straight into the code; you need entities only for the characters HTML itself uses.
Worked example 1: mark up a science note
Mark up this note so it displays correctly: Important: in photosynthesis 6CO2 + 6H2O → C6H12O6 + 6O2 (light energy is needed).
Step 1, decide the meaning of each part. "Important" is a warning-like label, so it is <strong>, not <b>. The numbers inside formulas count atoms, so they are subscripts; the large numbers in front (the 6s) are ordinary text. The arrow is a character that is not on the keyboard.
Step 2, write it.
<p><strong>Important:</strong> in photosynthesis 6CO<sub>2</sub> + 6H<sub>2</sub>O → C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> + 6O<sub>2</sub> (light energy is needed).</p>
Step 3, check. The line breaks in the code collapse to spaces, so the paragraph displays on one line: Important: in photosynthesis 6CO₂ + 6H₂O → C₆H₁₂O₆ + 6O₂ (light energy is needed).
HTML has three kinds of list. Every item in an ordered or unordered list is an <li> (list item), and the only thing allowed directly inside <ul> or <ol> is an <li>.
| List | Tags | Use it when |
|---|---|---|
| Unordered | <ul> with <li> | the order does not matter (things to bring, features) |
| Ordered | <ol> with <li> | the order matters (steps, rankings); items are numbered automatically |
| Description | <dl> with <dt> (term) and <dd> (description) | pairs of terms and their meanings (a glossary, questions and answers) |
Three attributes change how an <ol> counts:
| Attribute | Effect |
|---|---|
type="1" (default), "A", "a", "I", "i" | numbers 1, 2, 3; capital letters A, B, C; small letters a, b, c; capital Roman numerals I, II, III; small Roman numerals i, ii, iii |
start="5" | the first item gets 5 (or E, or V, according to the type); always a whole number |
reversed | counts down instead of up |
A list inside another list is a nested list. The inner <ul> or <ol> goes INSIDE an <li> of the outer list, after that item's text:
Run it. The browser numbers the ordered list for you, so adding a step in the middle renumbers everything. The lab rules start at C because of type="A" start="3". In the nested list, the inner bullets change shape (disc, then circle) to show the level.
Worked example 2: the misplaced inner list
A student wrote this, and the validator reports an error.
<ol>
<li>Hardware</li>
<ul>
<li>Input devices</li>
<li>Output devices</li>
</ul>
<li>Software</li>
</ol>Diagnosis. The inner <ul> sits directly inside the <ol>, but only <li> elements may be children of a list. Fix. Move </li> after the inner list, so the list belongs to the "Hardware" item:
<ol>
<li>Hardware
<ul>
<li>Input devices</li>
<li>Output devices</li>
</ul>
</li>
<li>Software</li>
</ol>The page may look almost the same either way, but only the second is valid, and only the second tells a screen reader that the two device types belong under "Hardware".
Worked example 3: choose the list
| Content | List | Reason |
|---|---|---|
| Steps to create a strong password | <ol> | the steps must be done in order |
| Items to bring on a school trip | <ul> | the order of the items does not matter |
| Computing terms and their meanings | <dl> | each term is paired with a description |
| The five best times in a 100 m race, fastest last | <ol reversed> | a ranking counting down from 5 to 1 |
Dave Gray: HTML Lists Tutorial. Watch how ordered, unordered and description lists are written and nested, and how the type, start and reversed attributes change the numbering.
Warning
<h4> straight after an <h2>), and use one <h1> per page.<br> to make space between paragraphs. Use separate <p> elements; spacing is CSS's job.Tip
"Strong is serious, em is spoken." Use <strong> for text that is important or urgent, and <em> for the word you would stress when reading aloud.
Practice
<p>Muraho Rwanda</p>, and how is it different from typing three ordinary spaces?<ol type="A" start="4"> has three items. What labels do they get?<b> and <strong> look identical in a browser but are not interchangeable. Give one example where each is the right choice.H<sub>2</sub>SO<sub>4</sub> (b) 10<sup>3</sup> (c) <p><strong>Danger:</strong> high voltage</p><ol><li>Choose File, Save As</li><li>Type the name index.html</li><li>Set Save as type to All files</li><li>Click Save</li></ol>, one item per line. For Roman numerals: <ol type="i">.<dl><dt>Tag</dt><dd>A keyword in angle brackets that starts or ends an element.</dd><dt>Element</dt><dd>An opening tag, its content and its closing tag.</dd><dt>Attribute</dt><dd>Extra information in an opening tag, written name="value".</dd></dl><strong> says the text is important and <b> only draws attention to it. Screen readers and search engines can treat them differently. <strong>: "Do not look directly at the Sun." <b>: the key terms in a summary paragraph.Key points
h1–h6 build the page's outline; choose the level by structure, not size. Paragraphs go in p; white space collapses except in pre.strong (important), em (stressed), sub, sup, mark, abbr, code, kbd, del, ins.<, &, and © display characters HTML would otherwise treat as code.ul for unordered, ol for ordered (with type, start, reversed), dl with dt and dd for terms; a nested list goes inside an li.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.
<h1>ICT Notes</h1>
<h2>Unit 5: HTML</h2>
<p>A paragraph is one block of text. Extra spaces
and line breaks
in the code are shown as a single space.</p>
<p>To end a line without starting a new paragraph, use br:<br>
S4 ICT Club<br>
Computer Lab 2<br>
Wednesdays after classes</p>
<hr>
<h2>Unit 6: CSS</h2>
<pre>
pre keeps every space
and every
line break.
</pre><p><strong>Warning:</strong> do not switch off the computer while it is saving.</p>
<p>I <em>said</em> Wednesday, not Thursday.</p>
<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
<p>The area of a square of side x is x<sup>2</sup>.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your file.</p>
<p><abbr title="Rwanda Basic Education Board">REB</abbr> develops the national curriculum.</p>
<p>Club T-shirt: <del>6,000 Frw</del> <ins>5,000 Frw</ins></p>
<p>Your search for <mark>tag</mark> found 12 results.</p>
<p>In Python you write <code>print("Muraho")</code>.</p>
<blockquote>
<p>The Web is for everyone.</p>
</blockquote>
<p>To show a tag as text, write <p>. To show an ampersand, write &amp;.</p>
<p><small>© S4 ICT Club. Prices are illustrative.</small></p><h3>What you need</h3>
<ul>
<li>A text editor</li>
<li>A web browser</li>
<li>A folder for your site</li>
</ul>
<h3>How to see your first page</h3>
<ol>
<li>Write the HTML</li>
<li>Save it as index.html</li>
<li>Open it in a browser</li>
</ol>
<h3>Rules of the lab, starting at C</h3>
<ol type="A" start="3">
<li>No food or drink near the computers</li>
<li>Log off before you leave</li>
</ol>
<h3>Some provinces and their districts</h3>
<ul>
<li>City of Kigali
<ul>
<li>Gasabo</li>
<li>Kicukiro</li>
<li>Nyarugenge</li>
</ul>
</li>
<li>Northern Province
<ul>
<li>Burera</li>
<li>Gakenke</li>
<li>Gicumbi</li>
<li>Musanze</li>
<li>Rulindo</li>
</ul>
</li>
</ul>
<h3>Glossary</h3>
<dl>
<dt>HTML</dt>
<dd>The language that gives a web page its structure.</dd>
<dt>Browser</dt>
<dd>The program that requests and displays web pages.</dd>
</dl>Quick check
Code: a paragraph with the words Hello, then five spaces and a line break, then World. What does the browser display?