Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 3 – HTML Tags & 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 know which tools we’ll be using to work with HTML in WordPress and Thesis, let’s move on to HTML Tags and document structure.

Two Types of HTML Tags

HTML tags have essentially two different types as we are classifying them. Now, there are lots of different ways to classify HTML tags. This is one of those methods of classifying HTML tags with them as either Container or Self Closing.

Container and Self Closing

The first type is Container which means that they have an opening and a closing tag and those tags are surrounding some kind of content. So you have an opening tag, content and closing tag. The second type is Self Closing tags which is essentially a single tag. It’s only one piece and it doesn’t have any content that it wraps around.

Let’s come back over here to The Barking Chihuahua Cafe demonstration site and view our page source. Here’s an example of an opening tag where you’ve got the h1 tag as an opening tag and then there is a closing tag. This link has an opening tag and then its content and then a closing tag. You see this kind of thing over and over again as your typical container type of tag.

Anatomy of a Simple HTML Tag

Now, it actually has a fairly simple anatomy. It has the opening tag which is the less than (<) symbol, the element designator and the greater than (>) symbol. That whole thing comprises the opening tag, the content which is what the opening tag and closing tag are wrapping and then it has the closing tag which is exactly the same thing as the opening tag except it has this backslash (/) in front of it.

So it’s got the less than (<) sign, the slash (/), the h2 and the greater than (>) sign. That is the closing tag here and this is the opening tag.

You’ve probably already heard me talk about in other videos adding the opening and closing h tags to this thing or add an opening tag and now close that tag. Well, that’s what we’re talking about here. We have our opening tag and a closing tag and the most typical HTML elements look just like this with an opening and closing tag surrounding some kind of content.

Attributes

Now, they often also include attributes and the attributes happen inside of the opening tag. So the opening tag still is the less than (<) sign, the h2 and then the list of attributes. The attributes have an attribute name and then an attribute value and the name always looks like in this case, class= and then either single quotes or double quotes. You have the attribute value. So this example has h2 class=”fishsticks”.

The class=”fishsticks” is the attribute, the class is the attribute name and “fishsticks” is the attribute value. And if we look over here at our source, you can see we’ve got our

So that’s the way this works, you have the opening tag, its attributes, the content and the closing tag.

Anatomy of a Self Closing HTML Tag

The most common self closing HTML tag is the image tag. Self closing HTML tags only have the one tag and it ends with the slash like this and it always has the attributes. If you don’t have an attribute at all, it’s malformed, it’s broken. Well actually there is one instance where it’s not and that’s the
tag which is a line break. That doesn’t have any attributes necessarily but everything else besides the
tag has some kind of an attribute which is again the attribute name and the attribute value.

Let’s look at an image. Its attribute name, in this case, is the source which is the source file for the image and the attribute value is the address of that image and that entire thing is the attribute. It has the opening bracket and then the element name then the attribute then the slash and then the closing bracket, so that’s a self closing HTML tag as opposed to the typical HTML tag.

6 Types of Attributes

Now, there are lots of different types of attributes although you are going to most often deal with these 6 and they are as follows.

  • ID
  • Class
  • Href
  • Src
  • Title
  • Alt

The class and the id are both used to allow you to style the HTML element. There is the href which is only used in one context and that is, it’s the address that the link is going to link to. There’s the src which is the source file which is the url of in any case, the image.

There’s title and title is generally used by browsers as the tooltip. So if you hover over a link, its title shows up or if you hover over an image, its title shows up. Then there is the alt text and the alt text is an attribute that is applied to images and what it does is it replaces the image itself if the web browser can’t find the image.

So for example, if the image is missing, it displays the alt text and or it’s used by readers for the visually impaired. In that case the screen reader will read the content of the text on the screen and when it comes to an image it’ll read the alt text so that the visually impaired can tell if there’s an image. So if that image has a certain meaning to it the alt text is supposed to express that.

Now, and as I said already, attributes consist of the attribute name and the attribute value so those are attributes.

It’s important also to understand some broader concepts. You don’t actually have to interact with these broader concepts very much but they’re useful for you to know. So we’re going to talk about them here for a bit.

Structure of an HTML Document

We’re going to look at the source chart of this page, so view source chart and the HTML document starts off with a DOCTYPE declaration. This happens automatically by WordPress and there’s nothing you do to make this happen.

So it starts off with that DOCTYPE declaration then it has an HTML opening and closing tag as we’ve already described here and there are different types of attributes that can be applied to it. In this case, language attribute and the direction of the text attribute are being applied based on the WordPress user settings.

HTML Head

Then inside the HTML element, there are two primary sections. There’s the head section and the head section essentially contains information about the page. So it includes things like meta information for search engines and it includes links to stylesheets. It includes a canonical url, it can include trackback and pingback references and it can have javascript loading and things like that.

In Thesis, all of this is loaded or added or controlled from the HTML Head section which you can find under Thesis Home, then Site. And that’s where all of this comes from, Site Verification, Tracking Scripts, Favicon, Feeds, all of these HTML Head elements are being inserted in every page in that section of the head. When it says HTML Head Editor, it is referring to this first part of your HTML page called Head.

The Body

Now, the whole visual part of the HTML page is inside of a tag called The Body tag and that Body tag has a whole bunch of other things inside of it. So inside of the body is all of the rest of the content of the page and in Thesis Classic, all of the real content of the page is contained inside of a div with the class of “container”. Then you’ve got the menu and inside the menu you’ve got the header and below the header you’ve got columns and inside of columns you’ve got content and sidebar and then below columns, you have the footer.

Differences in Head and Body Areas

I’m saying all that so that you understand the way this is laid out when we talk about the head versus the body and we start talking about body and body classes. The head is the section that contains information about your webpage but does not get displayed in the browser and the body is the section that actually contains the content of the web page that does get displayed.

Parent/Child/Sibling Relationships

So having said that then, the next thing I want to show you about this is that HTML elements have a parent-child relationship and this is one of the main reasons why I want you to install the source chart because the source chart shows you very clearly parent-child and sibling relationships in the HTML page.

Now, fairly simply, parent elements contain their children. The children elements are those elements that are inside of a parent. Children elements that are on the same level as other children elements are called siblings and parents pass on their characteristics to their children.

Characteristics are Inherited

And this is one of the fundamental concepts that you want to wrap your mind around and that you’ll have to continue to refer back to and that is that the characteristics of the body get passed to all of the elements inside of the body and the characteristics of container get passed on to the menu control, to the menu, to the header, to the tagline, to the site title because it’s all contained inside of that.

Let’s take a look at the children of the body here. Really, the only child of the body that we care about is the container. There are other things that show up like Thesis launcher, that’s the little box down there in the very bottom which isn’t really part of the web page, it just helps me figure out where to go. Then you’ve got a bunch of script and other things like that that get added to the bottom of the page.

So for all intents and purposes, the only child we care about inside the body is the main container called the “container” but the container has a bunch of immediate children. It has the menu control as an immediate child, the menu as a child, the header as a child, columns and footer.

Relationships are What Control Inherited Characteristics

So the menu control, menu, header, columns and footer, these are all siblings and the menu is the parent for menu item 267 and menu item 150 and menu item 154 and menu item 149, this is the parent of these menu items. Each one of these menu items is a sibling and each menu item is a child of this parent. So this menu is going to pass characteristics from that menu on to these menu items but it’s not going to pass any characteristics on to the header because siblings do not pass their characteristic on to each other.

Let me repeat that. Parents pass characteristics on to children but siblings don’t pass characteristics to each other.

Inside of this header, we have one child which is the site title and another child which is the site tagline and both of these things are siblings. Inside the columns is a parent to both content and sidebar and content and sidebar are siblings of each other. Sidebars are the parent of the text box and of the widget.

We’ll be looking at how this parent-child relationship works as we work our way through the rest of this class but it is a fundamental element of HTML and of CSS that those things that are contained are influenced by their container.

So the parent containers influence the child containers but they aren’t influenced necessarily by those containers that they are beside. So the content will not pass any of its characteristics on to the sidebar but the content will pass this characteristics on to post because the post is its child.

Judith asks, “Is that why children and siblings are indented?”. Well the reason why they are indented is so that you can clearly identify the relationship between them. It’s an industry practice to indent HTML elements so that you can tell where the siblings and where the children are, so you can tell what is a child of what. If they’re not indented at all, it’s very difficult to read and see where the parent-child relationships are.

There are a couple of questions about how to view the source chart. You can view the source chart once source chart’s installed. So you have to install that first but once it’s installed, if you right click on the page, you’ll see the thing here that says, “View Source Chart”, “View Page Source”, “View Page Info”, “Inspect the Element”, you’re going to choose “View Source Chart”.

HTML Element Types

The final theoretically thing I want to talk about here related to the structure of the HTML document is another way of classifying HTML types.

In this case, there are 3 types of HTML elements. There are block elements, there are inline elements and there are inline block elements. Now, I want you to understand that this is a simplified explanation. In HTML3, in HTML 4, this used to be the right answer to the question, “What types of elements are there in HTML?”.

But in HTML5, they’ve scrapped this for a whole other fairly complicated system of HTML elements. It’s not helpful to say, well actually there are 8 types of elements because as a practical matter, you seldom interact with those elements in that way. However, even with HTML5 elements you are going to almost always interact with them in this way so this is how we’re going to talk about them, we’re going to talk about them as block elements, inline elements and inline block elements.

Block Elements

A block element generally begins a “new line”. Think of the origins of this as being a document because that’s really what HTML was originally designed as. They were documents and people talk about the document object model and all the rest of that kind of stuff, it all emerges from its analogy to a Word Processor document.

So a block element usually begins a new line so that’s like a paragraph break. If you enter a line break or a if you press “Enter” twice on a Word Processor, it creates a break from one paragraph to the next and that’s the analogy that exists here.

Essentially a block element begins a new line so generally two block elements will not sit side by side unless you do something special. They will generally stack on top of each other.

Block elements can be given a height and a width that means you can say, it’s 600 pixels wide and 200 pixels tall.

And they can be arranged by floating them and by using CSS positioning. We’re going to talk a little bit about that here today but in order for something to be arranged like that, it needs to be a block element.

Inline Elements

On the other hand, inline elements do not begin a “new line”. They cannot be given a height and width and they cannot be arranged by using “float” and positioning. So an example of that is when you select some text and you make it bold, that bold designation is an inline type of element and it’s not going to create a new line and you can’t give it a height.

You can’t say “well, I want to make my bold text and make it 600 pixels tall”. Well you can give it a font height but you can’t designate how many pixels tall because it’s an inline element. It gets its dimension from the block level element that it’s inside of and it cannot be arranged by floating and positioning.

So you can’t take bold text, for example, and float it to the left or move it around and position it. It’s an inline element, it gets all of that information from the element it is inline with.

Inline Block Elements

Then you have the third one which is kind of a hybrid, inline block elements. Inline block elements do not begin a “new line” but they can be given a height and width and can be arranged by “float” and positioning.

A very common inline block element is, for example, an image. Images can sit side by side, they can sit inside of a line so you can have a piece of text with an image in the middle of it. You have text and then image and another piece of text immediately afterwards but it can also be given a height and a width and it can also be positioned by floating it left or floating right or using some other kind of positioning system.

So those are the three kinds of elements that we’re going to talk about, block elements, inline elements and inline block elements.

0 Comments… add one
0 comments… add one

Leave a Comment