Introduction to HTML

HTML exists to solve the problem of how a rich document can be expressed in plain text. That is to say what are the parts of the document, what role does each part serve (e.g. heading, image, list, emphasised text, link etc.), and how do they relate to one another.

HTML expresses the structure and semantics of a document in plain text.

HTML Boilerplate

When a client's browser gets an HTML file from the server, it begins building a document that will be displayed to the user.

The following HTML boilerplate tells the browser how to construct the page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is the title</title>
  </head>
  <body>

  </body>
</html>

The first line <!DOCTYPE html> declares that the document is an HTML document and specifically, this doctype declaration tells the browser that the page should be interpreted using the HTML5 specification.

Every web page is enclosed in html tag defining the start and end of the document. The closing html tag should always be the last line of the page.

The html element has two children, head and body. Both head and body are required and they are the only two valid children of html.

Head

The head element holds metadata about the document; metadata meaning extra information about the document beyond the content of the document.

One required piece of metadata is the title element. Every page is required to have a title; without one the HTML document is invalid. The title element defines what shows up in the browser window, what the page is called when added to favorites/bookmarks, and what the page is titled in search-engine results.

The meta element declares that the charset or set of characters used in this document is utf-8 which includes most characters from all known human languages. This is not required but can avoid some problems you might run into if you use special characters. The charset declaration should fit completely within the first 1024 bytes at the start of the file, so it's best to put it immediately after the opening head tag.

Two other meta tags that may autofill into HTML5 boilerplate:

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • This sets the width of the area in which the content renders (the viewport) to the width of the device and sets the scale to 1. You can read more about this here.

Other examples of metadata include links to external stylesheets (more later) and scripts to run on the page.

There are MANY options for the meta tag. So many that there's probably not an exhaustive list anywhere.

Body

The body element contains the information actually presented to the user; it represents the content of the document.

More Elements

There are tons of different HTML elements and memorising them is impractical. Instead, it is better to start using the 20 percent of the building blocks that get you 80 percent of the way there. Among these are headings, paragraphs, lists, and images.

Headings

The h1 - h6 tags are for headings and subheadings. It's rare to use past 3 or 4.

<h1>I'm most important! There should really only be one of me on a page.</h1>
<h2>I'm still quite important! I'm fine being on the page a few times though</h2>
<h3>I'm pretty common!</h3>
<h4>I'm quite detailed</h4>
<h5>I'm probably deep in a menu</h5>
<h6>Wow, that's very detailed</h6>

Lists

People love lists. There are two types of HTML lists, ordered and unordered.

<!-- ordered list -->
<ol>
  <li>I'm first</li>
  <li>I'm second</li>
  <li>I'm third</li>
</ol>
<!-- unordered list -->
<ul>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
</ul>

Images

If there's anything people like more than lists, it's images.

Images are empty elements meaning that they cannot logically have children. They are represented in HTML with a single, self-closing element.

Some people put a slash at the end of empty elements but it is unnecessary.

<img src="" alt="" />
<!-- is the same as -->
<img src="" alt="">

Images require a src with a URL for an image. You should also include an alt tag for screen readers, and when something breaks and the image doesn't show up.

The url can be any address but generally we want to manage our own assets.

Right click the picture and click "Save image as...", give the file a shorter name, and make sure you save it to Downloads. I've gone with html5logo.png.

Move the file from your Downloads folder to the html-and-css directory.

mv ~/Downloads/html5logo.png ~/sei/sandbox/html-and-css/

We tell the browser to request an image and load it into the page by giving an image tag's source attribute a path to the image.

<img src="html5logo.png" alt="html5 logo" >

Semantic HTML

Besides the basic elements, there are some semantic HTML elements that are important to learn to use as professional developers. These semantic elements will improve the structure of our pages and make it easier for the more than 285 million people around the world who cannot experience our pages visually to navigate through our content.

These include elements like:

<section>
<header>
<footer>
<nav>
<main>

References

PreviousLabNextDay 3: CSS and JS

Last updated

Was this helpful?