Previous | Table of Contents | Next

{ HTML for Content. }

Objectives

By the end of this chapter, you should be able to:

  • Explain what HTML is
  • Define elements and attributes
  • Use common HTML tags to create markup

Getting started with HTML

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!

The Structure of 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:

alt="html tree structure"

Doctype and essential tags

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.

Attributes and Content

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:

  1. The 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.
  2. The 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

Continue

Creative Commons License