The fundamentals of HTML

The ability to ship products that will live online begins with understanding how HTML works.

Updated June 01, 2019

In the world of web design and development, you’ll hear people go on and on about JavaScript and CSS, talk endlessly about backend languages and frameworks — but without HTML, the internet might exist but it would be devoid of content.

That’s because regardless of whether you write it by hand or its produced through some other means, everything eventually outputs as HTML.

One of the reasons HTML is often overlooked is likely the same reason it is so widely adopted — HTML is extremely simple to both understand and use.

After this short video, you’ll know enough to write your own HTML and create the structure of basic web pages.

Let’s start with the structure of HTML itself.

HTML is constructed with series of tags

opening tag = <div> closing tag = </div>

Most HTML uses both a opening and closing tag, but there are a few instance where a self closing tag is used.

self-closing tag = <img />

Tags create elements. Some may contain content that will appear on screen and others may contain specific instructions that are not visible to the average user.

<h1>New farmers market opens Saturday</h1> This element carries content with no additional attributes.

<a href=“www.apple.com">content</a> This element carries both content and attributes.

<link rel="stylesheet" href=“../style.css" type="text/css" /> This element only carries attributes.

In addition to these features, many tags carry with them a semantic meaning that is important to things like the browser you are using to the search results that are displayed back to you. We’ll discuss semantic tagging in more detail later.

Elements often nest inside of other elements and this is where the structure of a valid HTML document begins to form.

We’re always striving for valid HTML because it will perform reliably from one browser to another.

There are four things that must be present to have a valid HTML document.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <!DOCTYPE> Informs the browser what type of HTML document you have created.
  • <html> this wraps all content that is associated with the page (aside from the Doctype).
  • <head> carries instructions and resources for the page to use.
  • <body> contains anything intended to be display on screen.

I’m going to create a new file in CodePen so that we can illustrate how we can bring this basic document to life.

The <head> element of your document plays a vital role in that it provides instructions to visiting browsers and search engines to capture needed information and provide the data needed to help search engines guide people back to your site.

A simple <head> element is illustrated below...

We’ve kept this example light so that it isn’t overwhelming with details. The head element does a lot of work for your website, but it is important to understand the basics first. This element is responsible for delivering metadata that will both provide instruction and make requests on behalf of your website.

  • charset is instructing the browser which character encoding to use for display of your site. Utf-8 is standard for western websites.

  • viewport on the other hand is requesting information FROM the browser to aid in the display of information at the right size. viewport is a cornerstone of responsive design.

  • title is providing search engines and the browser with the primary information to display

  • description is providing additional infomation to search engines regarding what this page is about

  • link is pointing the page to utilize an external CSS file for styling

Everything in your head element will have a specific job to do. If there is something in your head element that is no longer accurate, please remove it so that it doesn’t impact your site negatively.

Now that you have covered the basics of the head tag, let’s turn our attention to the body of our document as that content is intended to render for the end user.

While we have added just a little content, there is a ton to unpack here.

First, notice how the type automatically is displaying at different sizes.

Each browser displays this information in a similar manner, but know that browsers websites with slight differences unless you specifically instruct it to do otherwise. We’ll discuss how to reset a browser when we begin discussing CSS.

The tags you have applied here carry a predetermined value as set by the browser. These tags are known as Semantic tags and they work for both robots and humans alike to make the web more accessible.

Many systems rely on your use of tagging to help determine what will be indexed by a search engine or made available to people who require the assistance of accessibility tools like screen readers.

Many of the most important semantic tags are related to the structure of your HTML document. In the past, designers would often structure their work using <div> tags like this:

<body>
  <div class="header">
    <img />
    <div class="nav">
      ...
    </div>
  </div>
  <div class="main">
    <div class="section">
      ...
    </div>
  </div>
</body>

Now, we have semantic tagging available for many of these items and the HTML would be updated like so...

<body>
  <header>
    <img />
    <nav>
      ...
    </nav>
  </header>
  <main>
    <section>
      ...
    </section>
  <main>
</body>

This alteration helps both search engines and screen readers make sense of what is important by elevating information that was once an attribute to the level of a tag.

New Pragmatic’s Intro to Product Design and UX Design courses are now open for enrollment — but don't wait! Space is limited.

Sign Up Now