HTML-Based Web Development
Senior 4 · ICT
HTML-Based Web Development
Lesson 1 of 5
25 min
Open any page in a browser, a news site, Irembo or Wikipedia, and press Ctrl + U (on a Mac, Option + Command + U). A second tab opens full of words in angle brackets, such as <h1>, <p> and <a href="…">. That is the page's source code, and it is written in HTML. The browser reads those instructions and draws the headings, paragraphs, pictures and links you normally see. In Senior 1 you learned that the World Wide Web is a collection of pages linked together and reached through a browser. In this unit you write those pages yourself.
HTML is not a programming language like the Python of Unit 4: it has no variables, no if and no loops. It is a markup language. You take ordinary text and mark it up with tags that say what each part is: "this is the main heading", "this is a list", "this is a link to another page".
Definition
HTML (HyperText Markup Language): the standard language for describing the structure and content of web pages. Hypertext is text that contains links to other text; markup means labels added to the text to describe it.
Tag: a keyword in angle brackets. An opening tag such as <p> starts a part of the page and a closing tag such as </p>, with a slash, ends it.
Element: an opening tag, its content and its closing tag together, for example <p>Muraho</p>. A void (empty) element has no content and no closing tag, for example <br> (line break) and <img> (image).
Attribute: extra information written inside an opening tag as name="value", for example lang="en".
Web browser: a program (Chrome, Firefox, Edge, Safari) that requests pages from web servers and renders them, that is, turns the HTML into the page you see.
Tim Berners-Lee, a British scientist working at CERN, the European physics laboratory near Geneva, proposed the World Wide Web in 1989 so that researchers could share documents linked to one another. By the end of 1990 he had written the first web server, the first browser and the first version of HTML. The first public description of the language, a short document called "HTML Tags" that he mentioned on the Internet in late 1991, listed just 18 elements. Most of them, such as the headings, were borrowed from an older document language; the new idea was the hyperlink.
HTML has grown since then. HTML 2.0 was published in 1995 and HTML 4.01 at the end of 1999. Work on HTML5 began in 2004 in a group of browser makers called the WHATWG, and the World Wide Web Consortium (W3C) published it as a standard on 28 October 2014. Since May 2019 the WHATWG alone publishes HTML as a Living Standard: a single document that is updated continually, with new features added and old ones kept working. When people say "HTML" today they mean this standard, and everything in this unit follows it.
Every element follows the same pattern. The diagram labels the parts of one paragraph element.
<P> works), but the convention is lower case.<p class="note" id="welcome">.<p><strong>Muraho</strong></p> is correct; <p><strong>Muraho</p></strong> is not.<!-- like this -->, is a note for people reading the code. The browser does not display it.A complete HTML document has the same skeleton, whatever it is about:
| Part | What it does |
|---|---|
<!DOCTYPE html> | The first line. It tells the browser to use the modern HTML standard. It is a declaration, not an element, so it has no closing tag. |
<html lang="en"> … </html> | The root element: it contains everything else. lang names the page's language (rw for Kinyarwanda, fr for French), which helps screen readers and search engines. |
<head> … </head> | Information about the page, mostly not shown in the page itself: the title, the character encoding, links to style sheets. |
<meta charset="UTF-8"> | Sets the character encoding, so letters such as é, ç and symbols such as © display correctly. |
<meta name="viewport" …> | Makes the page fit the width of a phone screen instead of a shrunken desktop page. |
<title> … </title> | The text on the browser tab, in bookmarks and in search results. Every page must have one. |
<body> … </body> | Everything the visitor sees: headings, paragraphs, images, links, tables, forms. |
Press Run to open this page in the playground. Only the heading and the paragraph appear in the page, because they are the only things in <body>. The title "S4 ICT Club" belongs to the browser tab, not to the page. Change the paragraph, run it again, and watch the page change.
When a browser loads a page, it builds a model of it in memory called the Document Object Model (DOM). Every element becomes a node in a tree, and the text inside an element becomes a text node below it. An element directly inside another is its child; the outer one is its parent; children of the same parent are siblings. This is the DOM tree of the page you just ran:
The tree explains the nesting rule. Each element must sit completely inside its parent, so an element that closes after its parent has closed cannot be placed in the tree, and the browser has to guess what you meant. In Unit 6 you will style elements by finding them in this tree, and JavaScript programs change pages by changing the DOM.
Older pages were built from <div> elements, which are general boxes with no meaning. HTML5 added semantic elements: elements whose name says what their content is. A screen reader can then jump straight to the navigation or the main content, a search engine knows which text matters, and the next person to edit your code understands it at a glance.
| Element | Use it for |
|---|---|
<header> | Introductory content: the site name, a logo, a slogan |
<nav> | The main block of navigation links |
<main> | The page's own main content; only ONE visible <main> per page |
<section> | A themed part of the content, normally with its own heading |
<article> | A self-contained item that would make sense on its own: a news story, a blog post, a comment |
<aside> | Content related to the main content but separate from it: a side box, a list of related links |
<footer> | The end of the page or section: contact details, copyright, related links |
<div> | A box with no meaning, used only when no semantic element fits (often for styling) |
Run it. Without any styling the semantic elements look like plain text stacked down the page: they describe meaning, not appearance. In Unit 6 you will use CSS to place the aside beside the main content, as in the diagram, and colour the header. © is a character entity: a code that displays the © sign.
Worked example 1: find and fix five faults
A student's page shows a strange result. Find every fault.
<html> <head> <title>My page </head> <body> <h1>Welcome</h2> <p>This is <strong>important</p></strong> </body>
<!DOCTYPE html>, is missing, so the browser may fall back to an old "quirks mode".<title> is never closed. Add </title> after "My page".<h1> is closed with </h2>. The closing tag must match the opening tag: <h1>Welcome</h1>.<strong> opened inside <p> but closes after it. Close the inner element first: <p>This is <strong>important</strong></p>.</html> is missing at the end. Add the lang attribute and the <meta charset="UTF-8"> line too.Browsers are forgiving and often display a faulty page anyway, but each browser repairs it in its own way, so the page may look different on different devices. The W3C Markup Validation Service lists faults like these: paste your code into its "Validate by Direct Input" tab.
Worked example 2: reading family relationships in the tree
<body>
<h1>Districts of the Northern Province</h1>
<ul>
<li>Burera</li>
<li>Gakenke</li>
<li>Gicumbi</li>
<li>Musanze</li>
<li>Rulindo</li>
</ul>
</body>(a) What is the parent of each <li>? The <ul>, because each list item is directly inside it.
(b) Name the siblings of <h1>. Only <ul>: it is the only other child of <body>. The <li> elements are <body>'s grandchildren, not its children.
(c) How many element nodes are below <body>? One h1 + one ul + five li = 7 element nodes, plus 6 text nodes (the heading's text and the five district names).
You need only a text editor and a browser; no Internet connection is needed.
website on your Desktop or flash disk.index.html, set "Save as type" to All files and the encoding to UTF-8, and save it in your website folder. index.html is the name web servers look for first in a folder, so it is the usual name for a site's home page.Crash Course Computer Science #30, The World Wide Web. Watch how hypertext, URLs and HTML fit together, and look for the first web page and the browser Tim Berners-Lee wrote at CERN.
Warning
Three faults that stop beginners
index.html.txt. Windows hides extensions, so the file looks right but opens in Notepad instead of the browser. Choose "All files" when saving, or switch on File name extensions in File Explorer's View menu.<head> does not belong there. Visible content goes in <body>.Tip
Indent to see the tree. Indent every child two spaces further than its parent, as in the code boxes above. A closing tag then lines up under its opening tag, and a missing one jumps out at you.
Practice
<h2 id="news">Latest news</h2>, name (a) the tag name, (b) the attribute name, (c) the attribute value, (d) the content.<head> or <body>: <title>, <h1>, <meta charset="UTF-8">, <p>, <footer>.<p><em>Amakuru?</p></em>.lang="rw") whose browser tab reads "Urupapuro rwanjye" and whose page shows the heading "Muraho, Kigali".<div>?<body><header><h1>Club</h1></header><main><p>Hi</p><p>Bye</p></main></body>. Which elements are siblings?<p><em>Amakuru?</em></p>: the inner element closes first.<!DOCTYPE html> then <html lang="rw"><head><meta charset="UTF-8"><title>Urupapuro rwanjye</title></head><body><h1>Muraho, Kigali</h1></body></html>, laid out on separate indented lines.<article>: each story is complete and could stand on its own (it could be shared or reused alone). The name tells browsers, screen readers, search engines and other programmers what the content is; a <div> says nothing.Key points
name="value" details.<!DOCTYPE html>, <html>, <head> (title, meta) and <body> (everything visible).header, nav, main, section, article, aside, footer) describe what content is; div describes nothing.Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>S4 ICT Club</title>
</head>
<body>
<h1>S4 ICT Club</h1>
<p>We meet every Wednesday after classes to build web pages.</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>S4 ICT Club</title>
</head>
<body>
<!-- The header: the site's name, shown on every page -->
<header>
<h1>S4 ICT Club</h1>
<p>Learning to build the web, one tag at a time</p>
</header>
<nav>
Home · Projects · Members
</nav>
<main>
<section>
<h2>This term</h2>
<p>Each member is building a web page about their home district.</p>
</section>
<article>
<h2>Club news</h2>
<p>Our first pages passed the W3C validator with no errors.</p>
</article>
</main>
<aside>
<h2>Next meeting</h2>
<p>Wednesday, Computer Lab 2</p>
</aside>
<footer>
<p>© S4 ICT Club</p>
</footer>
</body>
</html>Quick check
Which element belongs inside the head of a page rather than its body?