By the end of this chapter, you should be able to:
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:
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.
title are inside of
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
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.
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:
htmltag has a
langattribute 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
langattribute, check out this article.
metatag has a
"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 Emmet