HTML

HTML (HyperText Markup Language) is a web language used to make web pages.

HTML is based on tags. A tag is a structure that represents an element in the web page. Tags can be (and are) nested, meaning that a tag is put inside another.

Most tags represent content on the page. For example, the "h1" tag represents a page heading. The title of this page is defined by a h1 tag.

Some tags do not represent content. The "html" tag contains all other tags, the "head" tag contains metadata, the "body" tag contains the elements that represent visible content, the "script" tag introduces JavaScript into the page, the "table" tag must be used with other row and cell tags, etc.

The tree of nested tags that make up a web page is called the Document Object Model.

An important property of tags is their "display" property. There are several ways a tag could display on the page. Some are:

1. None - Does not display at all.
2. Block-level - The element will try to take up a line on the page on it's own and expand horizontally as much as possible. The white page used on this website is a block-level element with a set width.
3. Inline - The element will be as small as possible and will allow other tags on the same line as itself. The links at the top of this page are inline. They are all on the same line.
4. Flex - Makes the element a block-level flexible box (flexbox) container. A flexbox element will attempt to align and resize it's contents across a set axis according to set parameters and proportions. The links at the top of this page are inside a flexbox container that aligns them horizontally with equal space between them.
5. Display modes such as table, table-cell, table-column, table-row, etc. make the element behave as if it was another element (table, td, col, tr, etc.).

This web site uses the following tags:

Tag(s)	Description	Example
html	Page root. All other elements are contained in the html tag.	N/A
body	Contains normal tags.	N/A
head	Contains metadata tags.	N/A
title	Sets the page title. Metadata tag.	<title>HTML - Web Languages</title>
link	Links resources such as page icons or CSS files to the page. Metadata tag.	<link rel="stylesheet" href="style.css">
meta	Contains misc. metadata.	<meta charset="utf-8">
div	Bundles elements placed inside into a single block-level element. The white page with shadow borders used on this site is a div styled with CSS.	<div>  <p>Text 1</p>  <p>Text 2</p> </div>
a	The text inside links to the address specified by the tag's "href" attribute. Inline.	<a href="home.html">Home Page</a>
h1, h2, h3, h4, h5, h6	The tags h1, h2, ..., h6 define a page heading. h1 is the largest and h6 is just bold text. Block-level.	<h1>Urgent!</h1> <h2>Respond ASAP!</h2> <h3>Very Important!</h3> <h4>Important!</h4> <h5>Pretty important.</h5> <h6>Slightly important.</h6>
p	Defines a block-level paragraph.	<p>Text goes here.</p>
table, tr, th, td	The table tag is the root element of a HTML table. Rows are defined using tr ("table row") and th ("table header"). Cells are defined by the td ("table data") tag. Cells can contain other tags. Tables are block-level, however they do NOT expand to fill the page.	<table>  <th>   <td>Cell 1 Header</td>   <td>Cell 2 Header</td>  </th>  <tr>   <td>Cell 1 Row 1</td>   <td>Cell 2 Row 1</td>  </tr>  <tr>   <td>Cell 1 Row 2</td>   <td>Cell 2 Row 2</td>  </tr> </table>
br	Inserts a page break. (page breaks directly in HTML files do nothing)	Text 1 <br> Text 2
span	Does nothing. Useful for isolating text from paragraphs to style with CSS.	<p> normal text<br> <span class="red">red text</span><br> normal text </p>
button	Makes a button. Does nothing without a script attached. (scripts can be attached to any element however) Inline.	<button onclick="start();"> Start </button>
script	The contents of the tag will be interpreted as JavaScript code. Can also be used to import code into the page.	<script>  console.log("test"); </script> <script src="script.js"></script>
ul, ol, li	Used to define lists. li is a block-level list item. ol and ul correspond to ordered (with numbers) and unordered lists.	<ul>  <li>List item</li>  <li>Another list item</li> </ul> <ol>  <li>List item 1</li>  <li>List item 2</li> </ol>
input, form	Defines ways to input information such as checkboxes, text inputs, submit buttons, etc. The form element can send all data from the input elements inside it to a server when submitted without JavaScript.	<form action="processing_script.php">  <input type="checkbox" name="purchase">  <span>Confirm purchase.</span>  <input type="submit" value="Submit"> </form>

Note: The highlight checkboxes work by adding and removing a "highlighted" CSS class using JavaScript.