HTML, Head and Body Elements. Foundations Part 3

When we're working in HTML, we need to use a series of elements and tags to add our content. You can think of these like containers where we put not only our content, but other elements and tags as well. While there are lots of different elements and tags available for use, I want to focus on a couple specific ones that create the base for everything else. In this article we will cover the HTML, Head, Title and Body Elements.

It doesn't matter what an element is for, it will always have an opening tag, a closing tag, and some content. The only exceptions are for Void elements (More commonly referred to as Tags) which don't actually have content. Let's look at the example below. This is the em element and is used to add emphasis to it's content (Displaying to users as Italicized on the front end).

<em>This text is emphasized</em>

As you can see, there are three distinct parts. The opening <em> and closing tag </em> and the content that is nested inside. Closing tags require the forward slash in order to close properly. Nesting simply means that we are putting content, or other elements inside one another, but it must be done properly. While we won't be talking about the em really here, it's a very simple tag to show proper formatting of tags. Below is an example of the hr Void element.

This is a line of text
<hr>

This element, known as the Horizontal Rule, simple draws a line across the page where you insert it. It doesn't require a closing tag, and has no contents. For example, this would never happen:

<hr>This is a line of text</hr>

There are a few other tags like this that we will talk about in a later article. I just wanted to show some quick and easy examples before jumping into the HTML, Head, Title and Body Tags.

We already know from The Doctype. Foundations Part 2 that the first thing in your document will be the Doctype. The second thing, and the last thing, should be the HTML element. Everything else will get nested inside of this.

Below is an incomplete example of how this would look in your document.

<!DOCTYPE html>
<html>
    Everything else here
</html>

This defines the area that contains everything for the browser to render your page properly. Nested inside the HTML tag we will put both our Head and Body tags. That would look like this:

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
    </head>
    <body>
        Everything users see goes here.
    </body>
</html>

With this example we can see that the Head and Body are both nested inside the HTML element, and I've also nested the Title element inside the Head (This is required).

Head and Body Differences

There are some key differences between the Head and the Body. The Head element not only contains the Title (Which is the only things contained here that Users would see) but this is where you would add Meta tags, embed JavaScript and place other instructions for the browser. The Title tag will be displayed at the top of the browser or in a browsers tab.

The Body is where you will put all the content and images that you want your visitors to see (Though in some instances, you can also put JavaScript or other code inside here as well).

These elements make up the base of every HTML document and will your starting point for most sites. As we move forward, we will look at additional elements and tags that you will use to build the look of your site, located in the Body, and we will also introduce Attributes to enhance elements in a variety of ways.

 

Tags: html, elements, basics, tags

Show comment form