Creating Content and Structure with HTML

Just the Basic Facts

HTML, CSS, and Javascript are all plain text, and can be written using any text editor.
The latest version of HTML is HTML5.
HTML is comprised of tags. Tags are enclosed in angle brackets (<>).
Tags are comprised of elements and attributes. An element is an object on a page (such as a heading, paragraph, or image), and attributes are qualities that describe that element (such as width and height).
Many, but not all, tags are container tags. They come in pairs - an opening tag (such as <body>) and a closing tag (</body>). Everything contained between these two tags is part of that element.
Some elements are not containers (e.g., <img> and <br>). Therefore, they have no closing tags.
HTML elements should be in lower case, but contents can be in any case. (Technically, this is optional in HTML, but it's a standard practice and is a good habit to get into.)
If multiple consecutive spaces appear in an HTML document, only one space is processed by the browser - all extra spaces are ignored.
Comments are ignored by browsers. These are used by programmers to add notes to their code for future reference. In HTML, comments begin with . For example:

A special tag: DOCTYPE

This tag must appear at the top of every page. It tells browsers what version of HTML you're using (in this case, HTML5):

<!DOCTYPE html>

Some Common HTML Elements

Element	Purpose
<html> </html>	Marks the start and end of your document.
<head> </head>	Identifies the header section of your document, which is used to provide information about the document for use primarily by search engines and browsers.
<title> </title>	The title of your document. Other than DOCTYPE, this is the only required element in HTML5.
<body> </body>	All actual web page content is part of the body element.
<h1> </h1> <h2> </h2>	Identifies headings and subheadings within your document.
<p> </p>	Identifies a paragraph.

Adding a Link

Links are inserted into a document using the <a> element, which stands for "anchor". However, this element by itself does nothing. At a minimum, it requires the "href" attribute, which defines the destination of the link. Example:

<a href="http://www.somepage.com">This is the text you would click on</a>

Adding an Image

Images are inserted into a document using the <img> element. At a minimum, this requires the "src" attribute, and an "alt" attribute that's used to describe the image content to people who are unable to see it. Example:

Adding a List

The most common HTML lists are either ordered lists (ol) or unordered lists (ul). Ordered lists are typically displayed with numbers, while unordered lists are typically displayed with bullets. The <ol> </ol> and <ul> </ul> elements define the list, but the actual list items are identified with <li> </li>. Example of an unordered list:

<ul>
<li>first item in my list</li>
<li>second item in my list</li>
<li>third item in my list</li>
</ul>

Semantic Elements

HTML5 introduced a new set of elements called "semantic elements" that identify common regions of web pages. These are especially helpful to people with vision-related disabilities who use screen readers (synthesized speech or Braille) to access web pages. It helps them to jump directly to a particular region of the page. The table below shows a few HTML5 semantic elements that should be used for organizing content on most web pages.

Element	Purpose
<header> </header>	Contains the header or banner at the top of a web page. Can also be used elsewhere on the page (for example, the top of an article.
<nav> </nav>	Contains the navigation region; for example, a website menu.
<main> </main>	Contains the main content of the page.
<aside> </aside>	Contains a sidebar (i.e., content that's only peripherally related to the main content of the page.
<footer> </footer>	Contains the page footer, which often contains a copyright statement and links to other information about the site, such as privacy and accessibility statements.

How to Learn More

Most web browsers provide an option to view the source code of any web page. In your web browser, right click on any element and select "Inspect element" to see the code that was used to create that element (this will show you both the HTML and CSS). See also the Tools & Resources page.