28:null 29:["$","title",null,{"children":"Hypertext Markup Langugage (HTML) | R.S.B. | Observable"}] 2e:T489,## The Document Object Model (DOM) As we have seen above, a markup document looks a lot like a tree: it has a root, the HTML element, and elements can have children that are containing elements themselves. While HTML is a textual representation of a markup document, the DOM is a programming interface for it. DOM stands for “Document Object Model”, and in this class we will use “DOM” to mean the tree created by the web browsers to represent the document, and the API that they provide in order to access it. Inspecting the DOM of a website. Perhaps the most important habit you will learn in these first web lessons is the following: when in doubt, go to the Developer Tools. In this case, we’ll look at the Element tree, by clicking on the menu bar: View → Developer → Developer Tools. Alternatively, you can right click on any part of the webpage, and choose “Inspect Element”. Notice that there can be a big difference between what is in the DOM and what is in the source. In fact, much of this class is about dynamically generating DOM elements. Here is a [good overview of the developer tools](https://developer.chrome.com/devtools).2f:[{"id":"c739cec3a3cddc81e37714ceaf1d95845e3916d1247c804eeccbfb159acce1afe886d4f390d2e79cbcca1cc999ef58826e2abad9fc7c5225c949f0a3660088fc","href":"https://static.observableusercontent.com/files/c739cec3a3cddc81e37714ceaf1d95845e3916d1247c804eeccbfb159acce1afe886d4f390d2e79cbcca1cc999ef58826e2abad9fc7c5225c949f0a3660088fc","name":"html_basics-2@1.html","type":"text/html","lastModified":1790177316213.616,"size":1017},{"id":"ee63b339c0f6b7727293c5c19c1b8abc0d261b360ab6a52b1f5637826ed4150ff957d9b85a855b028c2dc749e90a4de19eb0e7bad21ca7f1f3b9ce2cdd6e63ac","href":"https://static.observableusercontent.com/files/ee63b339c0f6b7727293c5c19c1b8abc0d261b360ab6a52b1f5637826ed4150ff957d9b85a855b028c2dc749e90a4de19eb0e7bad21ca7f1f3b9ce2cdd6e63ac","name":"html_basics-2.html","type":"text/html","lastModified":1790176412459.599,"size":989},{"id":"561806c7d48b588afa6431b716168510f54086c31d153913176590f3e86e4d0f86cabe95034c15b55049f5efbd5aee82564b41354a572bfc587d4618802ded73","href":"https://static.observableusercontent.com/files/561806c7d48b588afa6431b716168510f54086c31d153913176590f3e86e4d0f86cabe95034c15b55049f5efbd5aee82564b41354a572bfc587d4618802ded73","name":"html_structure.html","type":"text/html","lastModified":1641488478925.866,"size":311},{"id":"68414b90db42cbb7e7e71913af8d92162b7ae50b49602983beab3dbf8af665802a83a4d8fc4f3f2e7d565c1df807403b8109e4c2da930b2a168a1d814b9601a0","href":"https://static.observableusercontent.com/files/68414b90db42cbb7e7e71913af8d92162b7ae50b49602983beab3dbf8af665802a83a4d8fc4f3f2e7d565c1df807403b8109e4c2da930b2a168a1d814b9601a0","name":"html_basics@2.html","type":"text/html","lastModified":1641487038319.044,"size":958},{"id":"5af25c18b824a369ce954c01fb0a77bf4fba13ef1bdee69f05befcb931204134642347b8a14b7806f9ed8af324415b42ce66ceb60df41bce3b703149762eae2d","href":"https://static.observableusercontent.com/files/5af25c18b824a369ce954c01fb0a77bf4fba13ef1bdee69f05befcb931204134642347b8a14b7806f9ed8af324415b42ce66ceb60df41bce3b703149762eae2d","name":"html_forms.html","type":"text/html","lastModified":1641488667001.112,"size":636},{"id":"6ff59a82bb1e8bc8ea1b299e6abc4d1a1ddaf91ba6df1d8eac915884f3eae659bc31ff269dc8ec867e4b5702bda23b6653a88df872aa81dcacd30799d1822e8d","href":"https://static.observableusercontent.com/files/6ff59a82bb1e8bc8ea1b299e6abc4d1a1ddaf91ba6df1d8eac915884f3eae659bc31ff269dc8ec867e4b5702bda23b6653a88df872aa81dcacd30799d1822e8d","name":"html_lists_tables.html","type":"text/html","lastModified":1641488277064.982,"size":471}] 2c:{"id":"165735296111828f","slug":null,"title":"Hypertext Markup Langugage (HTML)","thumbnail":"817ac288ecede6526d93c784e2450912ee9215749dcacf699053bfdcf7e3d64f","access_level":"public","create_time":"$D2022-01-06T13:59:02.649Z","update_time":"$D2026-09-23T15:37:25.452Z","view_time":null,"first_public_time":"$D2026-09-08T12:33:11.781Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2af9b653b6b1f015","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":"starter_2024"},"version":223,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2c655c78fbcd400","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":null}],"members":[{"type":"individual","id":"b2c655c78fbcd400","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":null,"role":"editor"},{"type":"team","id":"2af9b653b6b1f015","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"1e061c03cb460266","slug":"msdv-practicals","title":"MSDV - Practicals","owner":{"id":"2af9b653b6b1f015","login":"darlingit","name":"R.S.B."}},"type":"notebook","body":{"titling":"auto","title":"Hypertext Markup Langugage (HTML)","cells":[{"id":0,"value":"# Hypertext Markup Langugage (HTML)\n Acknowledgments: Thanks to Carlos Scheidegger, Kevin Sun, Alexander Lex ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This worksheet is a brief Introduction to the fundamentals of HTML as a mean to represent content of a web page.\nHTML stands for “HyperText Markup Language”, which used to be a meaningful description of what HTML actually did: \n- it has links (hypertext);\n- it is a markup language.\n\nHTML has developed in time and in this module we will be using its \"descendant\": HTML5. \nHTML5 is much more powerful including providing support for graphics, audio, video, etc.\n\nMost Importantly: we will not be building websites, but web applications, that is: complex programs that only 15 years ago were not possible within a browser. The easier way to look at HTML as “whatever it is that web browsers know how to interpret”, and just not think about the actual term.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"## Elements\nThe important thing about HTML is that the markup is represented by **elements**. An HTML **element** is a portion of the content that is surrounded by a pair of tags of the same name. Like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"```html\nThis is an HTML element.\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"These elements sometimes have meaningful names. In this element, strong is the name of the tag; the open tag is ``, and the matching closing tag is ``. The way you should interpret this is that the text “This is an HTML element” should be “strong”, i.e., typically this will be bold text.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"This is an HTML element.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"### Closing and Self-closing elements\nMost elements apply to some content in between them; for the strong example, that is the text between the opening `` and closing `` tag.\n\nSome elements don’t have internal content between their opening and closing tags, such as a `
` (breaking a line) or `` (including an image) tag. The former doesn’t even need attributes, the latter is typically fully specified by attributes. Note that HTML5 is no longer a XML-based language, so you can use tags without closing elements, such as `
` (breaking a line) or `` (including an image). What you’ll also see in slightly older code is the following shorthand notation: ``, which is equivalent to ``.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"### Nesting\nHTML elements can and commonly do nest:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"```html\nThis is strong and this is underlined and strong. Just strong again.\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"This is strong and this is underlined and strong. Just strong again.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"### Attributes\nIn addition to the names, opening tags can contain extra information about the element. These are called attributes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"```html\nA link to the Informatics Department\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"In this case, we’re using the `a` element (which stood for “anchor”, but now is almost universally used as a “link”). The attribute `href` means “HTML reference”, which actually makes sense for a change. The meaning given to each attribute changes from element to element. Note that you can use either single `'` or double `\"` quotes.\nIn this case, the above element would be rendered as below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"A link to the Informatics Department","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"We will use element attributes in pretty much every example from now on. The most important ones are `id`, `class`, and `style`. The `id` attribute gives the attribute a unique identifier, which can then be used to access the element via Javascript (we will see how later). Think of it as making the element accessible via a global variable. This is as convenient as a global variable, and potentially just as confusing: needing lots of different element ids might be a sign that you could organize your code better. The `class` and `style` attributes will be explained in the CSS section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"### Metadata and Basics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"```html\n\n\n\n \n HTML Demo\n\n\n

This is a paragraph!

\n\n

We can break a line in a paragraph with a self-closing
br or with a non-closing
tag - either is fine.

\n\n $\"KCL$ \n

Include an image. The src attribute defines a link to the image, the alt attribute is used to provide a short description to the image.\nMake sure to use the alt attribute as it helps makes your website accessible for screenreaders.

\n\n

Headers are defined with h1-h6 tags:

HTML Tags

A second level header

h1 is the most important heading, h2 is less important, etc.

\n\n\n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"HTML documents contain metadata, which is specified using tags that don’t have visual equivalents on the website:\n\n- `` creates the entire HTML container.\n- `` creates the header (generally where the title and links to style sheets/scripts are found).\n- `` is used to provide meta-information, such as character encoding or other instructions to a browser.\n- `