Starting with HTML5

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

We now have everything ready to go and we are ready to start writing HTML code. We will begin by learning some of the rules we have to follow in order to create code that works.

Introducing HTML Syntax

Every language has a set of rules that must be followed, or else it cannot be interpreted consistently. These rules are referred to as the language's syntax, which is analogous to grammar in a spoken language.

When we carefully follow the syntax while writing our HTML, we ensure that the document is well-formed. A well-formed Web page will more likely display as expected, consistently across different Web browsers.

Let's start learning the proper syntax of HTML.

Understanding White Space in HTML

White space refers to the blank areas of the code document formed by creating new lines, spaces, and tabs.

In HTML, consecutive white space is entirely ignored by the browser. In other words, any string of multiple white space characters (spaces, new lines, and tabs) will be treated as a single space.

Take a look at the following example. Each of these elements will be rendered identically in the browser:


<tag>This is demonstration content</tag>

<tag>
This is demonstration content
</tag>

<tag>
This
is
demonstration
content
</tag>

<tag>
This is demonstration content
</tag>

These will all be rendered exactly the same way in the browser, because the browser ignores all of the white space except for a single white space character between words.

NOTE: All white space between these elements is entirely ignored, as well as the white space at the very beginning and end of the content block.

This behavior of collapsing white space may seem at first like a limiting factor for the coder, but it actually is very helpful in giving us the liberty to structure our code document however we like. We can create new lines to make the code easier to read, indent certain elements for clarity, and choose whether to put the tags next to the content or on their own separate lines.

Case Sensitivity

Case sensitivity is a concept in coding that refers to whether or not the language cares about difference in case, i.e., upper case and lower case.

Generally speaking, HTML and CSS are both case insensitive, meaning that it doesn't matter if you use upper case or lower case in your code.

That being said, there are a few pesky exceptions, but we won't be getting to those today. The rule of thumb for HTML and CSS is to always use lower case, just to be safe.

We haven't covered all of the syntax for HTML, but we now know enough to feel confident writing some code. We'll begin by creating some basic elements in the Web page document.

Introducing the Required Elements

There are four elements that every HTML document must possess in order to be well-formed. The required elements are:

HTML
Head
Title
Body

Creating the HTML Element

The first markup we will add will define our document as an HTML document. We do this with the html element.

The html element is designed to encompass the entire HTML document.

Step1. To create the html element, in the code editor window, type:


<html>

</html>

The html element is now in place. All elements of the entire Web page must be nested within this element.

The html element has exactly two children elements: head and body.

Creating the Head Element

The head element is the first of the two required children of the html element. Much of the HTML content that exists in the head element doesn't actually show up anywhere within the browser's viewport, which is the area in the Web browser displaying the actual page content. Much of the content is intended for use by browsers, or other software.

The head element is sometimes used to add interactivity with a programming language called JavaScript, style with CSS, or even a specialized description that can boost search engine optimization (SEO), which is the process of increasing the presence of your Web site on search engines like Google or Bing.

Step1. To create the opening tag for the head, type:


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

We won't be dealing much with search engine optimization or delving too much into the many uses of the head element today. We will be spending most of our time writing HTML code in the body instead.

Understanding Proper Nesting

The opening and closing html tags surround all the other elements in this document. When an element is embedded within another, it is called nesting.

In HTML, the emphasis is on creating a document with good structure. The elements that are created by applying opening and closing tags must fit neatly together without overlapping, either as distinct elements or with one element nested inside another.

This is the essence of a well-formed document and the following shows how this might appear:

Diagram showing properly nested elements.

The child element is nested within the parent element. An element can have any number of children, but each element may have only one parent element. Child elements that sit side by side within a single parent element are referred to as sibling elements. In the example above, the two paragraph elements are siblings, nested within the parent body element.

Nesting the Title Element

The next required element, the title element, must be nested within the head element. The title element, as the name suggests, defines the title of the Web page.

Step1. To create the title element, type:


<html>
    <head>
        <title>Welcome to Equinuture: equine partnered life coaching in Indiana.</title>
    </head>
</html>

You might expect the title to appear on the Web page, since it is common to see a title at the top of other types of documents. However, since the title element belongs to the head element, it does not actually appear anywhere in the browser's viewport. The title can often be seen in the title bar of the browser (or on a tab, if multiple pages are open). This does not mean that you should skimp on creating a meaningful title.

The title is particularly important in search engine optimization, since it not only serves as the text for the link that takes the visitor to your Web page, but it also supplies the keywords with the most weight for a search query in the search engine.

Creating the Body Element

The body element is the head element's only sibling, and it encompasses all of the Web page's structure. All of the content to be displayed in the browser's viewport goes inside the body element. Within the document's element sequence, the body element should appear under the head element, just as on a standing human being.

Step1. To create the body element, type:


<html>
    <head>
        <title>Welcome to Equinuture: equine partnered life coaching in Indiana.</title>
    </head>
    <body>
        
    </body>
</html>

We have entered all of the required elements for a Web page now. Let's preserve our work, by saving the file.

Step2. Save index.html.

Let's see what the Web page looks like in the browser now.

Viewing the Document in a Web Browser

Now is a good time to check what the Web page looks like in the Web browser for the first time.

Step1. Switch to the emmeHorse folder in the file system.

Step2. To view index.html in a browser,

Double-Click index.html

The Web page looks blank, but notice that the title appears on the browser's tab.

We are going to keep our browser open from here on out to continuously check our progress in the Web browser, since this is ultimately where our page is going to be viewed. It is always a good idea to habitually check to see how a Web browser interprets your code. The more often we check how the page looks in the Web browser, the more quickly we can identify a problem with our page.

We will be jumping back and forth between two applications for the rest of this workshop: the code editor, where we work on our document, and the Web browser, where we check our progress.

There is one more thing we should address before diving into the content, and that is declaring which version of HTML we are using.

Understanding the Doctype

Although HTML has remained largely the same in its syntax throughout the years, there have still been many changes to the HTML standard. Many older elements are no longer valid, and new elements have been introduced. You may remember that XML uses a Document Type Declaration (doctype), which specifies information about legal building blocks for a document, and how those should be nested in a well-formed document, to address this issue.

How does a Web browser know which version of HTML we are using? If we aren't explicit, then the browser goes into what is called quirks mode, where it tries its best to display the content, following no specific standard.

When doing Web design work, we definitely don't want the browser to operate in quirks mode, since this often leads to very inconsistent results across different browsers, and even across different parts of the same page in a single browser.

To ensure that the browser is operating under a specific set of rules, we want to explicitly declare the version of HTML in which the Web page was written. In HTML, we also do this with the doctype declaration. It is written at the top of the page, above the opening html tag.

Step1. To add the HTML5 doctype declaration, at the very top of the document, type:


<!doctype html>
<html>
    <head>

Despite the fact that HTML5 does not appear anywhere in this declaration, it does indeed state that we are using HTML5. It is simple and clean compared to the doctype declaration of HTML5's predecessor, XHTML, which is shown below:


<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

As we can see, HTML5's doctype declaration is far less complicated than that of XHTML.

NOTE: XHTML actually has at least three different doctypes, depending on the version of XHTML being used. The one shown above is for the most popular version of XHTML: 1.0 Transitional.

Let's finally get into creating some of the content for the Web page.

UITS IT Training Content Library