HTML – The Iron Web

What is HTML?

HTML (Hypertext Markup Language) is a semantic language designed to tag content in a logical and comprehensive way. For instance, a news article might have a title, date published, article body, author and perhaps a couple photos with captions. HTML is a formal way of “Marking up” that content in such a way that the browser knows what each small piece of content means.

HTML document structure

HTML documents are composed of several sections. These sections give the document structure by providing clearly defined areas of the document for metadata, page content, and links to external scripts and stylesheets. These areas also provide the base for a well defined hierarchy of tags.

<!DOCTYPE HTML>
<html>
    <head>
    </head>

    <body>
    </body>
</html>

The DOCTYPE tells the browser which version of HTML to use. The HTML tag wraps all of the html on the page. The HEAD tag holds metadata and other page information for the browser. The body tag defines the area of the page that will be rendered by the browser.

These few tags define the skeleton of an HTML page and will be the basis for essentially everything that you will build for the web.

HTML Syntax

HTML syntax is straightforward and simple to remember if you know the patterns. I like to think of HTML as being composed of two things: HTML tags, and HTML attributes. Attributes are a little more complex, but we’ll get to that in a moment.

Tag Pairs

Tags are content wrappers that designate what the content is intended to be. Tags come in pairs, with an opening tag that is placed before the content and a closing tag that is placed after the content. NOTE: some tags have a slightly different structure, but the vast majority of HTML tags use both an opening and closing tag.

For example:

<p>This is a paragraph. It can have as many sentences as is necessary. Go nuts!</p>

The proceeding code snippet is an example of a paragraph tag. The opening tag looks like this:

<p>

The closing tag is very similar but includes a forward slash:

</p>

Almost all HTML tags come in pairs and are used to specify the type of content on the page. What follows is a few more examples of HTML tag pairs:

<!--Headlines in diminishing importance in HTML-->
<h1>Page Title</h1>
<h2>Slightly less important headline</h2>
<h3>Third level headline</h3>
<h4>Fourth level headline</h4>
<h5>Fifth level headline</h5>
<h6>Sixth level headline</h6>

<!--This is an unordered list as marked up in HTML-->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

<!--This is an ordered list as marked up in HTML-->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ol>

The tag pairs listed above is by no means a comprehensive list of tags. HTML has dozens of tags for different types of content. See http://www.w3schools.com/html/default.asp for a (more or less) comprehensive list of HTML tags.

Nesting

HTML also offers another powerful feature that enables content to organized into a structured hierarchy. This feature is called nesting and it is designed such that each item of HTML tagged content has a parent/child relationship with other tags.

This relationship of tags means that one tag encloses another: for example:

<!--This is an unordered list as marked up in HTML-->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

In the above example, the “ul” (unordered list) tag encloses the entire list of items, while the four “li” tags enclose each individual list item. In this instance, the “ul” tag is the parent and the “li” tag is the child. Notice that the opening “ul” is above all of the “li” tags and the closing “ul” is below all of the “li” tags. That means that the “ul” tag encloses each “li”.

Nesting can be very deep with multiple layers of parents for each child. If is enclosed by many other tags then the tags that are higher in the hierarchy that its parent are called “ancestors”. For example:

<!--An ordered list wrapped by a "div" as marked up in HTML-->
<div>
    <ol>
        <li>First item</li>
        <li>Second item</li>
    </ol>
</div>

In the proceeding example, the “ol” (ordered list) is the parent of each “li”. But notice that the “ol” also has a parent, the “div”. So, we have two layers of nesting. The “li” is in the “ol” and the “ol” is in the “div”.

So what is the relationship between the “li” and the “div”?The “div” is the “li”s ancestor.

Semantics

Semantics is a very important concept in HTML and is something that we have already been discussing, though informally. It means that we use the correct tags for each piece of content, because the the tags designate the meaning of the content.

As an example, lets looks at a block of content. This content is an article for a blog:

<article>
    <header>
       <h1>Article Title</h1>
       <time pubdate datetime="2015-08-28" title="August 28th, 2015">8/28/15</time>
    </header>

    <h3>Article Subtitle</h3>

    <p>This is a long block of article content...</p>
    <p>This is vet another long block of article content...</p>

    <footer>
        <address class="author">Author: <a rel="author" href="/author/john-doe">John Doe</a></address>
        <p class="tags">Tags: <a href="../path/to/tag">tag</a>, <a href="../path/to/secondtag">secondtag</a>, <a href="../path/to/thirdtag">thirdtag</a></p>
    </footer>
</article>

Though you may not know what each tag and property mean in the proceeding example, notice that each tag accurately corresponds to the content that it is wrapping. The article title is wrapped with an “h1” tag. The paragraphs are wrapped with “p” tags. The author’s name is wrapped with an address tag and a link, each of with have properties attached to them that provide semantic information about the content so that the browser will know that the words “John Doe” is a name and it’s the name of the author.

Validation

Sometimes HTML can get very complex and knowing if you’ve made any typos can be difficult. As such, we will use two tools to check our HTML.

One is the Chrome Developer Tools which can be enabled in Chrome’s main options. Chrome’s Developer Tools allow you to inspect the page and gives you a detailed view of all the code and events that are active on the page.

The second is the Chrome Web Developer Extension. This plugin allows you to run your code through an automated validator that will let you know if you’ve made any errors while writing your HTML.

Attributes

Attributes are key value pairs that can be added to certain HTML tags to provide even more semantic or critical information.

For example:

<a href="../path/to/file.html" >File.html</a>

The proceeding example shows a link to a file called “File.html” the “a” tag lets the browser know that the word “File.html” is a clickable link, but the “href” attribute tells the browser where to find the file by designating the path to the file i.e. “../path/to/file.html”.

HTML has many attributes and each can only be applied to specific tags. I won’t list them all here.

For a complete listing of HTML tags and their attributes visit http://www.w3schools.com/tags/default.asp. Choose a tag that you want to learn about and click on it. You will go to a page dedicated to explaining the semantic value of that tag. Near the bottom of the page will be a list of attribute values that can be assigned to that tag and what they are intended to inform.

Tags (Important tags to remember)

I am not going to list a comprehensive list of tags here because you can go to http://www.w3schools.com/html/default.asp and read about tags until you heart’s content.