HTML

This page provides a quick overview of Hypertext Markup Language. HTML is the computer language used to write webpages like the page you are reading now.

the bare bones

Below is an example of a "bare bones" blank HTML page. It shows the minimum amount of code to properly recognize HTML content.

The first line is the doctype (document type) declaration which identifies the rest of the file as containing HTML content. The doctype declaration is not an HTML element which is why it looks very different (capitalized with an exclamation mark) than the rest of the HTML.

HTML elements come in two types: elements that have both opening and closing tags such as "<html></html>" and self-closing elements such as "<meta />". In the example below, there are three elements used: HTML, HEAD, and META. Of these, only META is self-closing. Remember that the doctype declaration is not an HTML element. The "element" is everything between the opening and closing tags or within a self-closing tag. "Tags" are what open and close an element. All elements have two tags (one to open and one to close) except for self-closing elements which have only one tag. A closing tag consists of the element name prefixed with a forward slash placed after the opening chevron (</). A self-closing tag ends with a space followed by a forward slash before the closing chevron ( />). All tags are enclosed by opening (<) and closing (>) chevrons. "Opening chevron" and "closing chevron" are the terms in HTML syntax for the "lesser than" and "greater than" symbols.

After the doctype declaration, a hypertext page begins with the opening HTML tag (<html>) and ends with the closing HTML tag (</html>). The HTML element should have only two valid child elements: HEAD and BODY. A "child" is any element that is nested inside another element such as "<html><head></head></html>". Review the next section for what to put in a BODY element. Self-closing elements cannot have children.

Most important after the doctype declaration is the charset (character set) declaration. This should be Eight-Bit Unicode Transformation Format (utf-8). Remember to make sure that the encoding of the HTML file matches the charset declaration. On Notepad Plus Plus, you can quickly check the file charset by looking in the lower right corner. It should say "UTF-8" and not "UTF-8-BOM".


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
</html>

You can save this as "blank.htm" but it is a blank contentless page so nothing will display in the web browser.

your first webpage

From the previous "bare bones" example, four new elements have been added here: TITLE, BODY, H1, and P. The TITLE element contains the page title that is displayed in search results and on the web browser tab. The HEAD element is for the webpage metadata whereas the BODY element contains the content that will actually be displayed within the webpage. H1 is the first or main title heading for the page and typically will contain a duplicate of the text for the TITLE element. "<title>Hello!</title>" displays as the browser tab title whereas "<h1>Hello!</h1>" displays in the webpage itself as browser content. The P element indicates a paragraph.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello!</title>
</head>
<body>

<h1>Hello!</h1>

<p>Hi.</p>

</body>
</html>

You can save this as "hello.htm" and then open the file in your web browser to view.