---
tags:
- notes
- web
author: TrudeEH
draft: false
showToc: true
title: HTML
---
*HTML* is a markup language: The foundation of every website, as it structures content and provides information such as text, images and other media to the browser.
## Hello World
*HTML* is not a programming language, only formatting to write a document as. The following 'code' is valid *HTML.*
```HTML
Hello, world.
```
A more complete solution, however, would be to define a structure for the document.
```HTML
Document
Hello, world.
```
*HTML* uses tags to define a hierarchy. The `` tag defines metadata for the site, such as the page's title, encoding types, and any external resources. The `` tag is the content itself: any paragraphs (``), images, forms and scripts, to name a few.
> When reading *HTML*, the browser applies a set of default styles to make it more readable. *HTML* is **not** the place to style content, however. For example, a common mistake is to use headings based on their size or font weight, instead of their meaning. Everything can all be styled using *CSS* later, so try to ignore the design when writing *HTML*, and focus on the content instead.
> Not all tags hold content, but for those that do, the end of that content is defined with a closing tag: ``.
## Basic Tags
|Tag|Description|
|---|---|
|``|Document type.|
|``|Defines an HTML document.|
|`
`|Contains metadata/information for the page.|
|``|Title for the page.|
|`<body>`|Defines the document's body.|
|`<h1> to <h6>`|Defines HTML headings (titles). `<h1>` is the page's title, `<h2>` is the subtitle, and so on.|
|`<p>`|Paragraph.|
|`<br>`|Inserts a single line break.|
|`<hr>`|Defines a thematic change in the content.|
|`<!--...-->`|Comment.|
## Formatting
|Tag|Description|
|---|---|
|`<abbr>`|Abbreviation or acronym.|
|`<address>`|Contact information for the author/owner of a document/article.|
|`<b>`|Bold text.|
|`<bdi>`|Isolates a part of text that might be formatted in a different direction from other text outside it.|
|`<bdo>`|Overrides the current text direction.|
|`<blockquote>`|Defines a section that is quoted from another source.|
|`<cite>`|Defines the title of a work.|
|`<code>`|Block of code.|
|`<del>`|Defines text that has been deleted from a document.|
|`<dfn>`|Specifies a term that is going to be defined within the content.|
|`<em>`|Emphasized text.|
|`<i>`|Defines a part of text in an alternate voice or mood.|
|`<ins>`|Defines a text that has been inserted into a document.|
|`<kbd>`|Keyboard input.|
|`<mark>`|Marked/highlighted text.|
|`<meter>`|Defines a scalar measurement within a known range (a gauge).|
|`<pre>`|Preformatted text.|
|`<progress>`|Represents the progress of a task.|
|`<q>`|Short quotation.|
|`<rp>`|Defines what to show in browsers that do not support ruby annotations.|
|`<rt>`|Defines an explanation/pronunciation of characters (for East Asian typography).|
|`<ruby>`|Defines a ruby annotation (for East Asian typography).|
|`<s>`|Defines text that is no longer correct.|
|`<samp>`|Defines sample output from a computer program.|
|`<small>`|Smaller text.|
|`<strong>`|Important text.|
|`<sub>`|Subscripted text: `2₂`.|
|`<sup>`|Superscripted text: `2²`.|
|`<template>`|Defines a container for content that should be hidden when the page loads.|
|`<time>`|Defines a specific time (or datetime).|
|`<u>`|Defines some text that is unarticulated and styled differently from normal text.|
|`<var>`|Variable.|
|`<wbr>`|Defines a possible line-break.|
## Forms and Input
|Tag|Description|
|---|---|
|`<form>`|Defines an HTML form for user input.|
|`<input>`|Defines an input control.|
|`<textarea>`|Defines a multiline input control (text area).|
|`<button>`|Clickable button.|
|`<select>`|Drop-down list.|
|`<optgroup>`|Defines a group of related options in a drop-down list.|
|`<option>`|Defines an option in a drop-down list.|
|`<label>`|Defines a label for an `<input>` element.|
|`<fieldset>`|Groups related elements in a form.|
|`<legend>`|Defines a caption for a `<fieldset>` element.|
|`<datalist>`|List of pre-defined options for input controls.|
|`<output>`|Defines the result of a calculation.|
## Media
|Tag|Description|
|---|---|
|`<img>`|Image.|
|`<map>`|Defines a client-side image map.|
|`<area>`|Defines an area inside an image map.|
|`<canvas>`|Used to draw graphics in real time, via scripting (usually JavaScript).|
|`<figcaption>`|Defines a caption for a `<figure>` element.|
|`<figure>`|Specifies self-contained content.|
|`<picture>`|Defines a container for multiple image resources.|
|`<svg>`|Defines a container for SVG graphics.|
|`<audio>`|Sound content.|
|`<source>`|Defines multiple media resources for media elements (`<video>`, `<audio>` and `<picture>`).|
|`<track>`|Defines text tracks for media elements (`<video>` and `<audio>`).|
|`<video>`|Video or movie.|
## Links
|Tag|Description|
|---|---|
|`<iframe>`|Defines an inline frame.|
|`<a>`|Defines a hyperlink.|
|`<link>`|Defines the relationship between a document and an external resource (most used to link to style sheets).|
|`<nav>`|Navigation links.|
## Lists
|Tag|Description|
|---|---|
|`<menu>`|Alternative unordered list.|
|`<ul>`|Unordered list.|
|`<ol>`|Ordered list.|
|`<li>`|Defines a list item.|
|`<dl>`|Description list|
|`<dt>`|Defines a term/name in a description list.|
|`<dd>`|Defines a description of a term/name in a description list.|
## Tables
|Tag|Description|
|---|---|
|`<table>`|Table.|
|`<caption>`|Defines a table caption.|
|`<th>`|Defines a header cell in a table.|
|`<tr>`|Defines a row in a table.|
|`<td>`|Defines a cell in a table.|
|`<thead>`|Groups the header content in a table.|
|`<tbody>`|Groups the body content in a table.|
|`<tfoot>`|Groups the footer content in a table.|
|`<col>`|Specifies column properties for each column within a `<colgroup>` element.|
|`<colgroup>`|Specifies a group of one or more columns in a table for formatting.|
## Styles and Semantics
|Tag|Description|
|---|---|
|`<style>`|Defines style information for a document.|
|`<div>`|Defines a section in a document.|
|`<span>`|Defines a section in a document.|
|`<header>`|Defines a header for a document or section.|
|`<hgroup>`|Defines a header and related content.|
|`<footer>`|Defines a footer for a document or section.|
|`<main>`|Specifies the main content of a document.|
|`<section>`|Defines a section in a document.|
|`<search>`|Search section.|
|`<article>`|Article.|
|`<aside>`|Defines content aside from the page content.|
|`<details>`|Defines additional details that the user can view or hide.|
|`<dialog>`|Dialog box or window.|
|`<summary>`|Defines a visible heading for the `<details>` element.|
|`<data>`|Adds a machine-readable translation of a given content.|
## Meta
|Tag|Description|
|---|---|
|`<head>`|Contains information for the browser.|
|`<meta>`|Contains metadata for the webpage.|
|`<base>`|Specifies the base URL/target for all relative URLs in a document.|
## Programming
|Tag|Description|
|---|---|
|`<script>`|Client-side script.|
|`<noscript>`|Defines an alternate content for users that do not support client-side scripts.|
|`<object>`|Container for an external resource.|
|`<param>`|Defines a parameter for an object.|