2a:null 2b:["$","title",null,{"children":"The Basics of HTML | Steve Oney | Observable"}] 30:T5e0,md` ## HTML: Overview HTML is a programming language, despite [what some people may say](https://ischool.syr.edu/why-html-is-not-a-programming-language/). However, HTML is different from pretty much every other programming langage you are likely to learn. HTML is a [markup language](https://en.wikipedia.org/wiki/Markup_language). A language for defining a document that has formatting (for example, **bold text** or *italic text*), multimedia (for example, images and videos), references to other web pages (this is fundamentally important), and everything else that a web page can contain. HTML is: 1. Domain-specific (as opposed to "general purpose"). That means it can only be applied in a limited domain---there is a lot you cannot do with just HTML. 2. Declarative (as opposed to imperative). That means that instead of writing instructions on how to compute what you want, you just specify what you want. In the case of HTML, you're specifying what elements you want the browser to render. Fortunately, the fact that HTML is limited in its functionality also makes it a much easier to learn. It has a limited set of features that are tailored for the one thing it was designed for (specifying the contents of a web page). This is also why some (self-important/annoying) programmers make fun of people who say they can program but only know HTML. There's a lot that you can't (and also shouldn't) do with just HTML. Before we cover that, let's talk about what HTML can do (and how to do it).`31:T551,md` ### Basic HTML Syntax: Creating Elements with Tags HTML pages are made up of HTML **elements**, which determine the structure of the document. There are [many different kinds of HTML elements we can create](https://developer.mozilla.org/en-US/docs/Web/HTML/Element); each element serves a different role. We create elements with **tags**, which are specified with angle brackets: \`<>\`. We specify the beginning of an element by putting the tag name (the name of the element we want to create) in angle brackets (for example, \`\`). We specify the end of an element by adding a forward slash after the first angle bracket (\`\`): \`\`\` this is the content of the element \`\`\` If the element does not need content (or cannot have it), it can be a little tedious to write both an opening and closing tag right next to each other \`\`. Instead, we can write one **self-closing** tag by putting the forward slash before the second angle bracket: \`\`\` \`\`\` [Tag names are case insensitive](https://w3c.github.io/html-reference/documents.html#case-insensitivity) so \`\` is functionally equivalent to \`\`. For the most part, developers use lowercase tag names (this was a requirement in [an old version](https://www.w3.org/TR/xhtml1/diffs.html#h-4.2) of HTML but is now unofficial convention). `32:T425,md` The tree is (using *#text* to represent any text content): - \`html\` - \`body\` - \`h1\` - *#text:* My Webpage - \`p\` - *#text:* This is a paragraph with some - \`strong\` - *#text:* important text Some terminology: - The **root** is the top-level element - The \`\` element is the root of the tree above - Element \`c\` is a **child** of element \`p\` if it is directly below it in the hierarchy - The \`\` element is a child of the \`\` element - Conversely, element \`p\` is a **parent** element \`c\` if it is directly above it in the hierarchy - **Sibling** elements are elements that have the same parent - The \`h1\` and \`p\` elements are siblings - Element \`d\` is a **descendant** of element \`a\` if it is below it in the hierarchy (at any level) - The \`strong\` element is a descendant of the \`html\` element - Conversley, element \`a\` is an **ancestor** of element \`d\` if it is its parent (at any level) - The \`html\` element is an ancestor of the \`p\` element `33:[] 2e:{"id":"5559ad178b9ebe88","slug":"si-579-the-basics-of-html","title":"The Basics of HTML","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-12-25T22:52:16.842Z","update_time":"$D2023-10-02T17:41:27.188Z","view_time":null,"first_public_time":"$D2020-12-28T18:40:55.607Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"The Basics of HTML","cells":[{"id":0,"value":"md`# The Basics of HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`## Getting Set Up\n\nBefore we start, be sure that you already have VS Code and Firefox Developer Edition installed on your computer.\n\nNow, let's create a very basic web page.\n\nOn your computer, create a file named \\`hello_579.html\\`.\n\nGive it the contents:\n\\`\\`\\`\n\n \n

Hello, 579

\n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`Save the file \\`hello_579.html\\` and open it up with Firefox Developer Edition.\n\n- Note: From now on, when we say \"open it in *your browser*\", we mean \"open it in *Firefox Developer Edition*\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`Congratulations! You have written your first webpage.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"html`\n\n\n \n

Hello, 579

\n \n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md`\n## Overview of the Languages We Will Learn\n\nOver the course of this class, we are going to cover three (arguably four) programming languages:\n\n- HTML\n- CSS\n- JavaScript\n- TypeScript (arguably you could combine JavaScript and TypeScript)\n\nThe *vast* majority of this class will focus on JavaScript/TypeScript. However, we need to first cover HTML and CSS. Today, we're going to cover the basics of both of these languages.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`\n### Basic HTML Element Types\nLet's talk about some basic kinds of HTML elements. Note that when I write element names, I will use the self-closing tag (to make it clear that it is an HTML element) but you typically will want to use the opening and closing tags.\n\n- \\`

\\` specifies a paragraph of text.\n- \\`\\` specifies important text, which is typically displayed as **bold** text.\n- \\`\\` specifies text that should be emphasized, which is typically *italicized*.\n- \\`

\\` specifies a \"first-level\" heading (usually a title)\n- \\`
\\` specifies a \"second-level\" heading\n- ...\\`
\\` -- \\`
\\`\n\nTags are typically nested (meaning that one tag contains other tags). For example (note that some of the tags in the example below are spaced out for the sake of readability):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"html`\n\n
\n This is a paragraph.\n *This part of the text is emphasized. And **this part is emphasized and important.** OK.\n End of Paragraph.\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"md`\nIf you've written HTML before, you might be wondering why I use \\`\\` and \\`\\` instead of \\`\\` and \\`\\`. Both \\`\\` and \\`\\` create bolded text. Similarly, both \\`\\` and \\`\\` create italicized text. Why have multiple kinds of elements that do the same thing?\n\nThe difference is that \\`\\` and \\`\\` are semantically meanigful---they say what the text is* (important) whereas \\`\\` and \\`\\` just say how it should be visually displayed. The difference is important for several reasons:\n\n1. Relying exclusively on visual attributes to convey meaning creates accessibility challenges for users with visual impairments.\n2. Semantically meaningful tags can also make it easier for web crawlers (like those used by search engines) to extract information.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"md`\n### HTML Element Nesting and Trees\n\nMost documents consist of many levels of nesting. In doing so, it specifies an element \"tree\" where every element can contain any number of sub-elements (which in turn can contain other sub-elements, etc.) The top-level element should be an \\`\\` element.\n\n\nNote that every parent element must fully contain its sub-elements. For example, this is [not valid](https://w3c.github.io/html-reference/syntax.html#misnesting) because the \\`\\` element does not fully contain the \\`\\` element:\n\n\\`\\`\\`\n \n\\`\\`\\`\n\nThe \"root\" of the tree is typically an [\\`\\` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html). Then, we normally put the content of the odcument inside of a [\\`\\` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"html`\n\n\n \n
My Webpage
\n
This is a paragraph with some important text
\n \n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"md`\n## Specifying Element Properties with Attributes\n\nWe can customize elemeents by adding attributes to its tag. Attributes are specified in the start tag (or in a self-closing tag) after the element name. An attribute has a name and a value, specified as \\`NAME=\"VALUE\"\\`. Attribute names are case insensitive (like tag names) but by convention, they are typically lowercase.\n\nFor example, a hyperlink (a link to a different page) is specified with [an \\`\\` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) (\"a\" is short for \"anchor\"), which has a \\`href\\` attribute that specifies the URL of the page it links to. For example:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"html`\n\n The University of Michigan Homepage\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"md`\nElements can have any number of attributes. For example, in addition to \\`href\\`, \\`\\` elements have an optional \\`target\\` attribute to specify where the link should open. Some (not all) of the possible values are:\n\n- \\`\"_self\"\\` to open up in the current tab (default)\n- \\`\"_blank\"\\` to open up in a new tab\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"html`\n\n The University of Michigan Homepage (open in a new tab)\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"md`\nWe can create images with [the \\`\\` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), which has a mandatory \\`src\\` attribute to specify the path of the image file and an \\`alt\\` attribute that contains a text-based description of the image. The \\`alt\\` attribute is important for accessibility. For example, we can find a U-M block M logo at the following URL: [https://brand.umich.edu/assets/brand/style-guide/logo-guidelines/U-M_Logo-Hex.png](https://brand.umich.edu/assets/brand/style-guide/logo-guidelines/U-M_Logo-Hex.png). We can show it as an image with the following code:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"html`\n $\"Logo$ \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"md`\n### Omitting Values for Boolean Attributes\n\nSometimes, the specific value of an attribute does not matter---it only matters whether the attribute is present or not. For example, we can enable or disable buttons by setting the \\`disabled=\\` attribute:\n\n\\`\\`\\`\n\n\\`\\`\\`\n\nIn the above example, we assigned \\`disabled\\` to \\`\"true\"\\` but the browser only cares that the \\`disabled\\` attribute is set. If it were set to any value, the browser would disable the button. Whether \\`disabled=\\` is set to \\`\"true\"\\`, \\`\"false\"\\`, \\`\"\"\\`, or anything else, the button would be disabled.\n\nThus, HTML synatx also gives us the option to omit the value and just write:\n\n\\`\\`\\`\n\n\\`\\`\\`\n\nThis effectively disables the button by setting the \\`disabled\\` attribute to \\`\"\"\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"md`\n## Comments\n\nHTML has its own syntax for comments: You can start a comment with \\`\\`:\n\n\\`\\`\\`\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"html`\n
comments are not rendered
\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"md`## Doctype Declaration\n\nTo tell the browser what kind of document to expect, we add a document type declaration to the top of the HTML file. This is essentially to tell the browser rendering your document that you want to render it as a modern web page [(as opposed to rendering it in \"quirks mode\")](https://developer.mozilla.org/en-US/docs/Glossary/Doctype):\n\n\\`\\`\\`\n\n\\`\\`\\`\n\nThis is a declaration (not a tag) so there is no \"closing\" tag.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`\nCredit:\n- [Simmons University COMM 244](http://web.simmons.edu/~grabiner/comm244/index.html)\n- [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Glossary/HTML)\n- [w3schools](https://www.w3schools.com/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"