25:["$","title",null,{"children":"HTML | jpt | Observable"}] 4b:T6ea,# HTML **This notebook has been superceded by ** Whenever you are on a website, you are viewing the result of HTML & CSS being rendered by your browser. In that sense, a web browser is an interpreter for these two languages. (JavaScript as well.) The three web languages: HTML, CSS, and JavaScript, are all very different from one another but designed to interoperate. To make an interactive web application you will need to use all three to some extent. For our purposes we will also need to look at SVG, which is related to HTML, but designed for graphics as opposed to text. To start, let's look at the role of each of the languages: - **HTML** provides "semantic markup", enabling you to describe what different content "means" (this is a sidebar, this is a menu, this is a paragraph of text). - **CSS** helps you decide how different elements of the page should appear. "Links are blue", "Images have borders", etc. - **JavaScript** is a more traditional programming language, and allows you to provide interactivity. "When this button is pressed, more data is loaded." or "Hovering over this element shows a tooltip." ## HTML HTML (HyperText Markup Language) is the most important building block of the web. It is possible to make a site that only uses HTML, the same can't be said of the others. HTML is, as the name implies, a markup language. Its original purpose was entirely to annotate text for display on the web, most notably with "hyperlinks" (now just called links) that allow inline references to other documents. HTML documents consist of **tags**, which in turn can have **attributes** and **inner text**. Let's look at a simple example:4c:T41f,

The <p> tag makes a paragraph, which ends when we see the </p> tag.

Each p tag will, by default, start a new paragraph, visually distinct from the rest.

There are some tags that allow markup within text, such as strong or emphasis, which (by default) will make the text within bold or italic. These tags are intended to have semantic meaning, text that is emphasized might be italicized on my screen

4d:T5c0,## Display Elements We'll revisit `` elements a bit later. For now let's focus on the elements within ``, which are used for display. There are two subcategories of display elements: - **block elements** create distinct blocks on the page, pushing other content further down the page (by default) - **inline elements** annotate text within an existing element Common block elements: ```html text layout:

,

, ...,

page layout:

the list elements:

, , , embeds: