Class 2. HTML

What is HTML?

HTML stands for “Hypertext Markup Language.” It’s used to structure a webpage and its content—all webpages are made up of HTML. The “hypertext” is the part of HTML that makes it unique from other text or writing tools, since hyperlinks connect content together. And for the record, HTML is not a programming language, but a markup language.

Elements

You know you’re looking at HTML when you see elements, such as head, body, h1, h2, h3, p, a, div, span, and so on. You use elements to enclose, or wrap, different parts of the content to make it appear or act a certain way. For example, you can create a paragraph by wrapping some text in the p (or “paragraph”) element:

Most elements are made up of two parts:

  1. Opening tag
  • This begins the HTML element. It’s composed of the element in angle brackets.

  1. Closing tag
  • This closes the HTML element. It’s exactly like the opening tag but it has a slash before the element.

However, not all elements have both an opening and a closing tag. These are called “empty” or “void” elements. Some examples include: img, br, hr, meta, input.

Elements can also have attributes. Attributes contain extra information about the element which don’t appear in the actual content. In the below case, the class attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things…

Nesting elements

It’s natural to nest elements, or put them inside of each other. For example, here we’re bolding the word very:

<p>My cat is <strong>very</strong> grumpy.</p>

However, it’s important to properly nest elements. The elements have to open and close correctly so that they are clearly inside or outside one another.

Therefore, this below is incorrect:

<p>My cat is <strong>very grumpy.</p></strong>

The basic HTML skeleton

Here’s an HTML page at its most essential:

<!DOCTYPE html>
<html>
  <head>
    <title>Testing 123</title>
  </head>
  <body>
    Hello world, what's up?
  </body>
</html>

Speaking of nesting, in the above HTML skeleton, you’ll see the <head> and <body> are inside the <html>.

All of the “invisible” or metadata stuff goes in the <head>.

All of the visible stuff, or anything that actually appears on your page, goes in the <body>. Visible elements like h1 and p for instance can go inside the body.

The <title> is what shows up at the top of your browser tab, when you bookmark the site, or when the site appears in Google search results.