×
By the end of this chapter, you should be able to:
HTML, which stands for Hyper Text Markup Language, is one of the fundamental building blocks of the web. When you visit a webpage, your browser reads HTML and renders the document on the page. HTML is primarily responsible for holding the content of a page; the styling is defined by CSS, and much of the interactivity is controlled by JavaScript (we'll get to these technologies soon enough).
There are many reference materials on HTML and its history. If you'd like to learn more, check out Wikipedia or the MDN docs. For now, let's learn about HTML by actually writing some HTML!
If you've never seen HTML before, one of the first things you'll notice is probably the number of elements, which are the building blocks of HTML. We specify the name of the element using its name along with opening and closing brackets (<>
). To denote the ending of a tag, we use </>
. Here's a basic HTML document:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My first HTML page!</title> </head> <body> <h1>Here's some important text!</h1> <div>Here's some content.</div> <div>See ya later!</div> </body> </html>
In the above example, we see a number of elements: html
, head
, meta
, title
, and so on. We'll see more elements as we learn more about HTML.
Notice that sometimes elements are nested inside of other elements. meta
and title
are inside of head
, h1
is inside of body
, and everything is inside of html
. These are commonly referred to in the language of parents and children: we say that the h1
element is a child of the body
element, for example, and that the body
element is the parent of the h1
element. Elements with the same parent are called siblings; the meta
and title
tags are siblings in the document above.
In fact, you can think of the entire structure of an HTML document in terms of these relationships. From this perspective, the document looks like a tree, with parent nodes higher up on the tree, and child nodes down below. Here's an example of how you could visualize the structure of the HTML file above:
Another essential building block for our web pages is to specify the doctype
declaration, which tells the browser that the page is written in HTML. We will be using <!DOCTYPE html>
to tell the page that we are using HTML5. This line about the doctype
will be your first line in basically all of the HTML files that you write, and you won't need to modify it. If you'd like to read more about the doctype
, check out this Stack Overflow post.
After the doctype
declaration, you'll see a few essential tags across all of the HTML files you come across:
<html>
- This is where we place all of our elements that comprise the contents of our page.
<head>
- This is the container for the elements that have content that does not need to be displayed on the page (like metadata, the title, or, as we will see, scripts and stylesheets).
<meta>
- This is a tag for providing metadata (data about our data) to the page. We can use meta tags to display what character set we are using or for SEO (Search Engine Optimization) purposes.
<title>
- This tag gives the page a title that can be displayed in the tab of your browser.
<body>
- This defines the main content of the HTML page.
We'll discuss the elements inside of the body
tag in a later chapter.
Our sample HTML page contains a number of elements. Some of those elements contain content: for instance, the content of the h1
tag is the text "Here's some important text!" Some elements also contain attributes, which are used to provide additional information about an element. The attributes are always set inside of the opening tag of the element, and take the form attribute_name="attribute value"
. In our sample HTML, there are two attributes:
html
tag has a lang
attribute set to "en"
. This tells the browser that the HTML document is written in English. This will probably be the default you'll want for all of the web pages you create. For more on the lang
attribute, check out this article.meta
tag has a charset
attribute of "UTF-8"
. This specifies the character encoding for the file. You don't need to worry too much about this for now, but if you'd like to learn more about UTF-8, you can start with this Wikipedia article.We'll see many other attributes as we start writing more HTML. For example, when you create a link using an a
tag, you'll pass in the webpage the link should point to as an attribute. The same thing applies when you create an image using the img
tag and need to point to the URL for the image.
When you're ready, move on to CSS for Style