What is HTML?
Get an overview of HTML's purpose in creating web pages.
Context
Think of a document that you would create in a word processor like Microsoft Word or Google Docs. They usually consist of more than one style. They use different font sizes to indicate different sections of the text, like headers, main content, footers, table of contents, captions, etc.
While a human can simply look at a document and understand the difference between a heading and a paragraph, computers have no such intuition. For a browser to correctly render a web page, it must be explicitly told what each piece of content is.
Defining structure using HTML elements
So how exactly do we tell the browser what’s what? This is where Hyper Text Markup Language (or HTML for short) comes in handy. HTML is a markup language that provides a description of the structure/layout of your web page. We define this structure by wrapping content in HTML elements.
An HTML element is formed using a tag, which serves as a descriptor for each piece of content on your page. As an example, the <p> tag is used to describe a paragraph HTML element.
Some other examples of HTML elements include:
<h1>: Highest-level heading<h6>: Lowest-level heading<img>: An image<a>: An anchor which creates a hyperlink to things like other HTML pages, files, email addresses, and more
Most HTML elements contain both opening and closing tags to indicate where an element starts and ends, like so:
<p>This is a paragraph element.</p>
There are a few exceptions, such as the <img> tag.
A basic HTML file
Let’s examine a basic HTML file to get a better understanding of how to use markup to define the structure of a web page:
<!DOCTYPE html><html><head><title>A Basic Web Page</title></head><body><h1>My First HTML File</h1><p>Congratulations! You're well on your way to creating your own web pages.</p></body></html>
Line 1: <!DOCTYPE html> is referred as a doctype declaration. This is used to indicate to a browser what HTML version the file is written in. For this file, specifying html indicates that the file is written in HTML5.
Line 2: Take particular note of how the closing tag for the <html> is on the last line of the file. One of the properties of HTML elements is their ability to be nested. In other words, HTML elements can exist within other HTML elements. This gives rise to an interesting structure, referred to most commonly as a tree.
In an HTML file, we indicate the root element with the tag <html>. Within this root element, there are multiple elements, that can be considered branches of the root node:
To properly define an HTML file, we must place <head> and <body> elements within the root <html> element.
The <head> element contains supporting information about the file, commonly referred to as metadata. There must be a <title> (providing the web page a title) directly underneath the <head> element in order be complete. The <head> element may also contain links to JavaScript files and CSS stylesheets.
The <body> element contains the main content of an HTML file. This is the element that holds the information that is rendered by your web browser. There can be only one <body> element within an HTML file, and most of the HTML you write will exist within this element.
Within the <body> element of this file, we have a high-level heading (<h1>) and a paragraph (<p>).
Rendering the HTML file in the browser
Now, let’s take a look at how this web page is rendered by the browser:
Test your understanding
(True or False) HTML elements must always have an opening and closing tag to be interpreted correctly.
True
False
Note: For all challenges, wait for a few seconds after writing the solution and then press the “Test” button.
Exercise
Add a top-level heading with a paragraph underneath your HTML file. The heading and paragraph can contain any content you would like.
Before we dive into the contents of the next lesson, take a moment to answer the question below.