Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 3 – HTML Tags and the Structure of an HTML Document

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that you’ve got an understanding of what HTML is and the tools we’ll be using to help you learn HTML, the next thing we’re going to talk about are the actual HTML tags and the structure of an HTML document.

Fundamental Structural Parts of the HTML Page

Now, there’s a bunch of this HTML information that we’re going to talk about right now that you don’t really have to interact with very much but we’re just going to look at that right now.

We’ll view this page source and you start off with this DOCTYPE tag. Then there’s an opening html tag and then the opening head tag and all this code inside the head. Then the opening body tag and then you drop all the way down to the bottom with the closing body tag and the closing html tag.

Child Theme Settings That Show Up

Those parts are the sort of fundamental structural parts of the HTML page and those are things that you don’t really interact with. The exception to that is that when you’re working in your child theme. Let’s come over to theme settings. This custom feed information, that goes into the head section of the HTML page.

Let’s scroll down here and look at header and footer scripts. This header script code and this footer script code. The header script code goes up inside of that head section. Looks like I closed that so we’ll view the page source again and go to the head section. Anything you put in this head section code goes in that head of the document.

Anything you put in the footer section actually gets added to the bottom of the document and in fact, you can see stuff that has already been automatically added right here. These script references, this CDATA reference, this script reference. This has all been added by WordPress to what they’re calling WP footer which is essentially the very end of your HTML document at the very bottom of it before the HTML document is closed.

So when you hear people talk about how this code needs to go in the footer or this code needs to go in the head, that’s the part of the page that they’re talking about.

Body Area

The head of the web page is a place that contains a bunch of information about the page that is never visible. That information is there for browsers to use but is not information that is intended for the end user to see or read. Whereas everything that’s inside the body, all of that is really intended for the end user to see or read and so everything that we’re really working on is actually inside the body of the HTML document.

Types of HTML Tags

There are essentially two types of HTML tags and there are a bunch of different ways to classify HTML tags. You’ll see at least two of those ways here today but one of the ways is to talk about them as either containers or self-closing tags.

Container Tags

Now, a container has an opening and a closing tag and the opening and closing tags surround content. So an example of that for example, okay so here’s our title, “Anyone can learn to build a website like this”, well actually that’s not really our title, is it?

Anatomy of a Simple HTML Tag

This is really our title, it’s the h1 and the opening tag starts here and goes to there. That’s the opening tag and then it has its content, “Learn to Build a Website Like This” and then it has its closing h1 tag and this is the heading of that page. This is a container type of HTML tag, where it has an opening tag, a closing tag and between the opening and closing tag are content.

Now, the opening tag consists of this less than sign (<), the element which could be h1, h2, div, or whatever. So the element and then the greater than sign (>), that’s the opening tag. Then the closing tag is identical to that except that it has the slash (/) between the greater than sign and the h2. The slash is how browsers know that this is the end of the h2. If you didn’t have it there browsers would have some difficulty determining where this begins and ends.

Attributes

So you’ve got your opening tag, your content and your closing tag. This is an example of a very simple HTML tag. A more typical HTML tag has attributes in the opening tag. So in this case, you have again your h2 and then you have an attribute or it can be a variety of attributes but you have your attribute then the attribute is made up of the attribute name and the attribute value.

This doesn’t change the content and it doesn’t change the closing tag. This attribute information shows up in the opening tag only. Let’s take a look at that here. Here’s our opening tag and the h1 that’s the element. So there’s our less than sign (<), h1 and then here’s an attribute which is class=”entry-title”. Class is the attribute name, “entry-title” is the attribute value. Then itemprop is an attribute name and “headline” is the attribute value so this is the opening tag, element, attribute, attribute, content, closing tag, that’s the typical HTML tag.

Self Closing Tags

Now, self closing tags are very similar except that they only have a single tag. They do not have a closing tag and they don’t surround content.

Anatomy of a Self Closing Tag

So in this case then, your element. You have your less than symbol (<) and then your element and then attributes and then the slash (/) and then the greater than symbol (>). Attributes work exactly the same way that is, you have the attribute name and the attribute value.

Now, a couple of examples of self closing HTML Tags are images and line breaks or br tags. There are a handful of others as well but most tags are containers, most tags are not self closing like this.

Typical HTML Tag Attributes

Now, there are lots of different types of HTML tag attributes but the ones you’re going to interact with the most are class and id. Classes and ids are ways for CSS to be applied to that tag so when you write a CSS rule, they will be applied to a class or to an id.

There’s href which is essentially the URL of a page that you want to link to. This is used in link tags where when you click on the link text and it takes you to a specific page. That’s the href, h reference or hyperlink reference.

Src stands for source and that’s used most often with the URL for an image location. Title is usually used in tags as the tooltip. So if you hover over something with your mouse and some words pop up, that’s generally the title of that tag.

Alt is primarily used, perhaps only used with images, and the alt attribute is what machine readers read for the visually impaired. The machine readers read the web pages out loud to them and since they can’t see the image, the alt attribute describes the image so that they can tell what’s going on there. Also, if for some reason the image does not resolve then that alt text also shows up as well.

So that’s what those attributes are. Now, there are lots of other attributes and as you work your way through this process, you’ll learn other attributes but these attributes in particular are the ones that you’re going to see the most often. Just to reiterate, the attribute is a combination of the attribute name and the attribute value.

Parent/Child/Sibling Relationships

Something that’s very important to understand when thinking and talking about HTML are the parent, child and sibling relationships between HTML tags.

Parent tags contain children. Children tags that are on the same level as each other are called siblings and parents pass on their characteristics to their children but siblings do not pass their characteristics on to each other. Understanding this is going to become especially important when we start talking about styles and about CSS and how CSS applies to HTML.

Example of Relationships

Let’s come back over here and look at our page and view the source chart. Close the head for a moment. All of the content that is visible on the page is a child of the body and so the body has this child “site-container” and inside “site-container”, there are 5 children, 1, 2, 3, 4, 5. Each of these are siblings of each other. “Site-container” is a child of the body, all of these are children of “site-container”. Header is a sibling of nav which is a sibling of this div class=”site-inner” which is a sibling of this div class=”footer-widgets”.

Characteristics of div class=”site-inner” are not passed on to div class=”footer-widgets”. However, characteristics of div class=”site-inner” are passed on to “content-sidebar-wrap” and are passed on “entry-content” and “aside” and so on.

So characteristics of this div are passed on to its children but are not passed on to its siblings, however, characteristics of body are passed on to everything inside of it because every other element is a child in one way or another of body.

Almost every element is a child of “site-container” but only a certain set of elements are children of header. So any characteristics of header only will be pass on to “wrap”and “title-area” and “site-title”.

Understanding parent-child relationships inside of HTML is critical to understanding how something gets its style characteristic. So that’s the parent-child relationship.

HTML Element Types

There’s one other thing that you need to manage in understanding how styles work in HTML and that is there are 3 types of elements. There are block elements, there are inline elements and there are inline block elements.

Notice that I say that this is a simplified explanation. And the simplified explanation is going to work for you almost all the time especially as your beginning because the characteristics of these 3 types of elements are the characteristics that really matter to you when you’re styling a page.

Additional HTML5 Element Types

However, with the advent of HTML5, they actually have restructured this so that there are really 8 types of elements but it’s not useful for a beginner to think of it that way. It just makes it more confusing. It works just fine for people who are professional coders but even if you’re a professional coder, coding an HTML5 you still find yourself having to say well, that’s not a block element, that’s an inline element.

So you still end up resorting to the old language because the old language represents a kind of behavior that is critical to understand. We’re going to pretend that there are 3 types of HTML elements and we just know that in the back of our minds that these 3 types of elements are really an HTML4 concept, not an HTML5 concept. But it still applies equally to HTML5 and for beginners that’s really the only useful way to think about it.

Block Elements

A block element generally begins a new line. So for example, paragraphs. If you are starting a new paragraph you generally want to have some space in between your paragraphs and so that’s considered to be a new line. Therefore, a paragraph is a block level element because every time you enter it, a new line happens.

This concept really comes from Word processing so the question that you have to think about is, “Is this HTML element part of a continuing line or should be on its own line?. So things like titles and lists and list items and paragraphs, those are all block level elements. They generally begin a new line, they can be given height and width, that is you can say that a paragraph is going to be 800 pixels wide and 700 pixels tall.

You can give it an explicit height and a width and they can be arranged on a page by floating them and by positioning them. We’ll take a look at what that means and actually you’ve seen this already so when we show you an example, you’ll say, “Ahah, that’s what’s going on there”.

In any case, what you have is this concept of a block level element that when you insert it, it generally begins a new line, it can be given a height and a width and it can be arranged.

Inline Elements

Inline elements do not begin a new line. They cannot be given a height and width and they cannot be arranged by float and positioning. So examples of inline elements are links, a link inside of a sentence. If you’ve got a paragraph of text and you want to have a text link where some of the words link off to another page, you wouldn’t want that to automatically just create a new line. You don’t want it to create a new line, you want it to stay inside of the paragraph and so links are an example of an inline element.

Inline elements are as big as they are. So a link is only as tall as the line height of the paragraph that it’s in and it as long as you created it. It’s not going to be 200 pixels long, it’s going to be however long the words are that you used to create the link and the link is going to stay where it is in the paragraph.

You can’t say well, let’s float this link to the left and move it out of line with the text that it’s in because obviously, you don’t want that to happen. You want the link to stay inside of its paragraph.

There are a bunch of examples of inline elements besides link like bold or italic or emphasis tags. All of those kinds of tags are also inline elements and we’ll look at some examples, in particular a span tag which is also an inline element, we’ll look at that.

Inline Block Elements

Then you have inline block elements. Now, an inline block element does not begin a new line but it can be given a height and width and it can be arranged using float and positioning. So there probably are cases where you want something maybe sitting on its own line but you only wanted it to be as big as it is and you don’t want to fill up the entire width of the space that it’s in. In that case you may decide to call it an inline block element.

It may be the case that there are links that you want to have a specific height and width. So in that case, you may need to make them into inline blocks.

An example of an inline block element are images. By default, images are inline blocks and so you can have words in a sentence and insert an image in the middle of that sentence and the image will sit there in between the words and it won’t just jump down to a new line and then make the word that follows after it jump down to a new line.

This information is going to become important to you when we start talking about styling things. So keep in mind whether or not something is a block element, an inline element or an inline block element.

0 Comments… add one
0 comments… add one

Leave a Comment