HTML

Basic HTML (Part 1)

Almost every day, I interact with people that are using the Web to have their voices heard. Software like WordPress facilitates this process, but it is also beneficial to understand the basic technologies that underlie content creation.

For the Web, I would characterize these technologies as HTML, CSS, and JavaScript. Learning these languages, in this order, was how I became familiar with the Web, and I think each dovetails nicely with the others.

You start with the basics, and then move on to increasing levels of complexity as you demand more advanced functionality. I think this is an instructive path, and I want to share what I have learned to help those willing to take a step beyond WYSIWYG editors.

Let us talk about HTML.

The Hypertext Markup Language

The Hypertext Markup Language (HTML) is the language of the World Wide Web. The term is kind of a mouthful, so let us break it down:

  • Hypertext: This refers to the ability to create links to other pages or resources. Essentially, the Web is a collection of linked pages. Hypertext and hyperlinks are what make this possible.
  • Markup: The term markup refers to HTML's ability to create pages of formatted text, along with images and other embedded resources.

There are several previous versions of HTML, but the current version is HTML5. HTML5 is a group of related technologies, of which HTML itself is just one part. These technologies include Document Object Model (DOM) interfaces, which are usually accessed with JavaScript.

These technologies include:

  • geolocation
  • drag and drop
  • offline storage

After 15 years, the HTML5 specification was finalized in October of 2014. For this series, we are going to exclusively focus on HTML5's markup.

HTML Document Structure

No matter how complicated an HTML document may become, it always has the same basic structure. The first line in an HTML document is the DOCTYPE declaration. This statement tells the browser which version of HTML it should be expecting.

<!DOCTYPE html>

For previous versions of HTML, this statement was more complicated. For HTML5, this is all we need. This should be the very first thing in an HTML document, even before any white space.

To create a comment in HTML, you use the following syntax:

<!-- Some deep, insightful comment -->

Do not use the -- character inside of a comment.

HTML content is comprised of elements. For example, these elements can be used for paragraphs, blockquotes, and bolded text, respectively:

<p></p>

<blockquote></blockquote>

<strong></strong>

The most basic HTML document requires several of these elements. Here is a basic template that is recommended for most content creators:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML Template</title>
  </head>
  <body>
    <p>Insert content here.</p>
  </body>
</html>

As previously stated, the DOCTYPE declaration comes first. Then, comes the html element, which represents the root of the HTML document itself. Inside of the html element, you have the head and body elements.

Tags are the working basis of HTML and make up HTML elements. Beginning tags may contain attributes. For example, the beginning tag in the meta element from the example above has a charset attribute that is set to UTF-8. Ending tags (e.g., </html>) never have attributes.

Note: Keep in mind, the DOCTYPE is not a tag. It is just an HTML element, with its own rules and syntax.

The head section contains the title of the page and additional information about the page, e.g., head matter. This information applies to the entire document and how it is processed.

The body section contains the actual content of the page. This is where the majority of your work is going to be focused.

DOM

Think of an HTML document as a tree, which begins with the html element at its root. This is a metaphor we will come back to later as we talk about the DOM.

Elements, Tags, and Containers

As previously stated, each HTML element is made up of tags. Many elements are container elements, i.e., they have a beginning tag, an ending tag, and content in between.

Elements and Tags

Other elements are stand-alone elements, with only a single tag, like the meta element in our previous example.

<meta charset="UTF-8" />

Content Models in HTML5

In HTML5, content models define what types of content are expected in certain contexts. A given element may only have content that matches the requirements of its content model, and the element's content model may include 0 or more categories of content. Also, an element may belong to 0 or more categories.

Content Models

HTML5 has 7 content models:

  1. Metadata content
  2. Flow content
  3. Sectioning content
  4. Heading content
  5. Phrasing content
  6. Embedded content
  7. Interactive content

Most of the elements that are used in the body of an HTML document belong to the Flow content model. For a better idea of which elements these content models include, check out the following lists:

Metadata:

  • content that sets up the presentation or behavior of the rest of the content, or that establishes the relationship of the document with other documents; conveys out-of-band information

Flow:

  • text
  • paragraphs
  • headings
  • lists
  • hyperlinks
  • images
  • embedded media

Sectioning:

  • article
  • aside
  • nav
  • section

Heading:

  • heading elements h1-h6
  • h group element

Phrasing:

  • text
  • images
  • hyperlinks
  • forms

Embedded:

  • content that imports another resource that is inserted into a document (e.g., video, audio, flash and other plugins, as well as images, canvas, and math objects)

Interactive:

  • content that is specifically used for user interaction (e.g., hyperlinks, form elements, menus, and media, if it has the controls attribute)

Next

Not too bad, right? Before we go on, we are going to solidify our understanding of the fundamentals of HTML, starting with whitespace and comments.

Stay tuned!

Paul Ciano

Enjoyed this post?

Let me know you appreciate it by signing up for my newsletter.