Lesson 2

In this lesson we are going to:

Discuss what we mean by the term structure
look at the structure of an empty HTML page
Deconstruct an HTML tag

What do you mean “structure”?

To answer this I am going to use things you already know, and interact with on a daily basis. These everyday things will allow us to piggy back on knowledge you already posses, and skip past the super technical explanation. In every day life, we use a file explorer’s navigation pane to traverse to various locations on your computer. This shows you a list of folders with the option to expand and collapse them. When you expand a folder, all of the files and folders inside of that expanded node are shown. This tool shows us how each item is related to every other item, by indenting child items inside or under the parent item. This is the most common way of visualizing hierarchy. It serves as a great visual aid when teaching what is meant by HTML structure. A file that is a child of a folder lives inside the folder node, and when that node is expanded it will be shown indented and below the parent. This indentation indicates a parent/child relationship between these two items.

An empty HTML page

Every html page has a root element, the html element. Inside lives at least 2 more elements the head and the body, in that order. The body element contains all of the content that will be viewable within the browser. The head contains meta data that is not displayed in the main area of the browser. This meta data may define the browser tab’s title or is read by search engines and other sites like social media sites.

<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

HTML Tags

There are 2 types of HTML tags: open/closing tags, and self closing tags. Both of these start exactly the same way, with an open tag. The difference is how they close. Open/closing HTML tags can contain other HTML elements, while self closing HTML tags cannot contain other HTML elements. Lets take a look at the two types of HTML tags:

<openClose></openClose>
<selfClosing />

Notice how in both cases the tag starts with the less then sign “<" and is then followed by the Tag Name. In the example above the first tag has a tag name of “openClose”, after the tag name is a greater than sign “>” followed by the closing tag. The closing tag begins with “</” followed by the tag name then a “>”. If you were place an element before the closing tag, you are placing that element inside this one. In that case this element would have a parent/child relationship with that element, where this element is the parent. Self closing tags end with “/>” instead of a closing tag, and can not express parent /child relationships.