Essential Html Tags

1. Core Concept Overview & Intuition

HTML (HyperText Markup Language) is a markup language in which a document is described by a tree of elements. The fundamental unit of description is the tag: a special word or letter surrounded by angle brackets, $< $ and $>$. Tags are used to create elements, such as paragraphs or links. Most elements consist of an opening tag, some content, and a closing tag; for example, a paragraph element has an opening $<p>$ tag, followed by the paragraph text, followed by a closing $</p>$ tag. Some elements have no closing tag; these are called empty elements. The line-break element is the canonical example, written simply as $<br>$. When a document is authored in XHTML, empty elements are written using self-closing tags, for example $<br />$.

The intuition behind the ten essential tags is that a web page is a nested hierarchy. The root of the hierarchy is the html element; inside it sits a head element carrying information about the page, and a body element carrying the page content itself. Within the body, headings and paragraphs give the text readable structure, links and images embed external resources, and line breaks control the flow of text. The distinction between information about the page (metadata in the head) and the page content (material in the body) is the single most important structural idea in this unit.

A second organising idea is the distinction between block-level and inline behaviour, which governs how elements occupy lines. Block-level elements, such as headings and paragraphs, are designed to hold relatively large or stand-alone blocks of content and always start on a new line. Inline elements, such as links and images, are designed to hold smaller pieces of content — a few words or a sentence — within a larger block, and adding an inline element does not cause a new line to be created. Block-level elements can contain inline elements, but inline elements cannot contain block-level elements. This containment rule is a structural invariant of well-formed documents.

Finally, the unit emphasises semantic correctness over visual imitation. One can create the appearance of paragraphs by inserting blank lines with line-break tags, but the paragraph element is preferred because it is neater and gives browsers, search engines, and other non-human consumers a better idea of how the page is structured. The same principle explains why the title element must describe the page succinctly and accurately, and why every image must carry alternative text.

2. Mathematical Formalization & Core Definitions

> Definition (Tag). An HTML tag is a special word or letter surrounded by angle brackets, $< $ and $>$. Tags are used to create HTML elements.

> Definition (Element). An HTML element is a construct created by tags. A non-empty element consists of an opening tag, its content, and a closing tag; an empty element consists of a single tag with no closing tag.

> Definition (Empty Element). An empty element is an element that has no closing tag. The line-break element is written $<br>$.

> Definition (Self-Closing Tag). In XHTML, an empty element is written using a self-closing tag, in which the opening tag is terminated by a slash before the closing angle bracket, for example $<br />$.

> Definition (Root Element). The html element is the element from which every web page starts. It is called the root element because it sits at the root of the tree of elements that make up a web page. It is created by an opening $<html>$ tag followed by a closing $</html>$ tag, with all other page elements placed between them.

> Definition (Document Head). The head element contains information about the web page, as opposed to the web page content itself. Elements that may be placed inside the head include the title element, the link element (for style sheets and favicons), the meta element (for character sets, page descriptions, and keywords for search engines), and the script element (for JavaScript code).

> Definition (Page Title). The title element contains the title of the page. The title is displayed in the browser's title bar, as well as in bookmarks, search engine results, and many other places. The title should describe the page's content succinctly and accurately, and each page of a site should ideally have its own unique title.

> Definition (Page Body). The body element appears after the head element in the page and contains all the content of the web page: text, images, and so on. All web pages have exactly one body element, with the exception of frameset pages, which contain frame elements instead.

> Definition (Heading Elements). Headings break page content into readable chunks, much like headings and subheadings in a book or report. HTML supports six heading elements, $h1, h2, h3, h4, h5,$ and $h6$. The element $h1$ is for the most important headings, $h2$ for less important subheadings, and so on. Typically no more than $h1, h2,$ and $h3$ are needed unless the page is very long and complex.

> Definition (Paragraph Element). The p element creates paragraphs of text. Most browsers display paragraphs with a vertical gap between each paragraph, breaking up the text. A good rule of thumb is that each paragraph contains a single point, topic, or thought; to discuss two different things, two paragraphs are used.

> Definition (Link Element). The a element creates links to other content, whether on one's own site or on another site. A link is created by wrapping $<a>$ and $</a>$ tags around the content used for the link and supplying the URL to link to in the $href$ attribute of the opening tag.

> Definition (Image Element). The img element inserts images into a web page. The image is first uploaded to a web server, and an img tag then references the uploaded image filename through the $src$ attribute. The $alt$ attribute is required for all img tags; it is used by browsers that do not display images to give alternative text to the visitor.

> Definition (Line Break). The br element inserts a line break. It is an empty element, written $<br>$ in HTML and $<br />$ in XHTML.

The structural relationship among the elements can be stated as a containment relation. Let $E$ denote the set of elements of a document and let $\prec$ denote the relation "is a descendant of". Then $\prec$ is a strict partial order on $E$: it is irreflexive, transitive, and asymmetric. The root element is the unique element $r \in E$ such that no element is a descendant of the root; every other element is a descendant of the root. The document head $h$ and the document body $b$ are the two distinguished children of $r$, with $h \prec r$ and $b \prec r$, and the body appears after the head in document order. The cardinality constraint on the body is expressed as follows: for an ordinary page, the number of body elements satisfies

$$
\lvert{x \in E: x \text{ is a body element}}\rvert = 1,
$$

with frameset pages forming the stated exception. The heading hierarchy is indexed by an integer level $k$ with $1 \le k \le 6$, where smaller $k$ denotes greater importance; the importance ordering is therefore the reverse of the numerical ordering of the index.