HTML Basics (v1)


Most of this should be review since you’ve already completed the Web Development 101 HTML/CSS Lesson (Right??) but it’s a good idea to make sure you’ve got it covered so you make sure you’re starting from a strong base. It’s impossible to separate HTML from CSS, so there will be some overlap before we get heavily into the CSS in later sections.

Learning Objectives

  • How is an HTML5 document structured?
  • What are elements/tags?
  • What are element attributes?
  • How do you link to external files?
  • When should you use IDs vs Classes?
  • What attributes are required by image and links for them to be effective and accessible?
  • Where should your CSS live?

An important note about absolute and relative paths

Let’s say that you have the following structure on your development server:


The following image tag is placed in the web page:

<img src="/images/protocol.png" alt="protocol layer image">

The above absolute path will work, and the image will be displayed when the site is being served from a root folder, for example:

The image link will be converted to:

  • Domain + Absolute Path;
    • Domain:
    • Absolute Path: /images/protocol.png


Where things can go wrong

If the website is served from a sub folder (let’s say we move the index.html and the images/ folder in a new folder name client) this absolute path will not work and the image will not be displayed.

For example if the website is served from the sub folder client:


The path /images/protocol.png will once again be loaded this way:

  • Domain + Absolute Path;
    • Domain:
    • Absolute Path: /images/protocol.png

Since there is no images folder in the root web folder, the image will not be loaded, as the file will not be found.

The correct URL to load the image, would be:


In this case, you can use a relative path instead:

<img src="images/protocol.png" alt="protocol layer image">

The image link will be converted to:

  • Domain + Current Path + Relative Path;
    • Domain:
    • Current Path: /client/
    • Relative Path: images/protocol.png


Keep in mind that folder and file names are case sensitive in URLs! Domain names are not.

References and resources

Absolute vs Relative Paths


  1. Read Shay Howe’s Introduction to Terminology & Syntax

  2. Read Shay Howe on the HTML Basics

  3. Read Shay Howe on Best Practices

  4. Read Absolute vs Relative Path – Which Should You Be Using?

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

UPDATED: 16.03.2021