What is HTML?

The HyperText Markup Language, or HTML, is the standard markup language for documents meant to be displayed by a web browser.
It consists of tags(example: <p>) that surround the text and tell the browser to display it in different ways.
It works with CSS to modify the style of text and JavaScript to make the text interactive.

Elements

What are elements?

Elements are mostly declared with an opening and closing tag, for example: <p>text</p>
Elements can contain text and/or other elements, for example: <span>text <p>more text</p> </span>
Elements can have attributes, which are declared inside the opening tag. For example: <p attribute="value">text</p>
Some elements do not need a closing tag.

Types of elements

Paragraph element

The simplest element is the <p> element, which represents a paragraph.
Most text on a webpage is contained in a <p> element.
It does not affect the text, other than adding a margin space between subsequent paragraphs, like this:
line 1(not in a paragraph)
line 2(not in a paragraph)

paragraph 1, line 1
paragraph 1, line 2

paragraph 2, line 1
paragraph 2, line 2

Headers: <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

The header elements represent headings or subheadings. They come in 6 levels, and the font size decreases on each level.
<h1> is typically used for the title, <h2> is typically used for section headings, etc.
These elements also have a large margin space.

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Lists

HTML supports ordered(<ol>) and unordered(<ul>) lists. They are declared like any other element.
To add an item to the list a lt;li> element is created within the list element, like this:
<ul>
<li>Item 1<\li>
<li>Item 2<\li>
<\ul>
An example of both types of lists follows:

This is an unordered list
Bullet points go before each list item
There is some extra space between each list item
The list items are also indented

This is an ordered list
Numbers go before each list item
There is some extra space between each list item
The list items are also indented

Formatting elements

Several elements exist for formatting:
The <center> element causes elements that it contains to be centered horizontally, like this:

Centered Text
The <strong> element causes its contents to be bold, like this:
Bold Text
The <em> element causes its contents to be italic, like this:
Italic Text
There are also two elements that have special uses: <div> and <span>.
These elements do not change the text in any way, they are used as container elements.
For example: if you wanted to have one word in a line be red, you would use a <span> element and use CSS to make the span red.

Miscellaneous elements

Some elements that are useful to know are:

<br>

<img>

<a>

Types of attributes

Elements can have many different attributes.

href, or "Hypertext REFerence", is used to set the destination of a hyperlink
src, or "source", is used to set the source of many elements, including images and scripts.
title is used to set the tooltip for an element. Try mousing over this text.
id is a special identifier for that element. This is useful if you want to target that element to do something with it, either with CSS or JS.
class is a special identifier for multiple elements. This is useful if you want to target these elements to do something with them, either with CSS or JS.

Basic structure of a webpage

The basic structure of a webpage is as follows: mouse over the tags to see what they do.

For mobile users, click here to show the tooltips.

The bare minimum:

<!DOCTYPE html>

<html>

<head>

<title>Webpage Title</title>

</head>

<body>

text

</body>

</html>