HTML Fundamentals

At RED, we ask you to learn HTML very fast. It is impossible to get all of the ideas, patterns, and syntax right away. This resource is here to help.

Why HTML?

HTML (HyperText Markup Language) is what we use to display content on web pages. It is (relatively) succinct, quick to learn, and implemented in a (more or less) standard way across every web browser, including browsers on mobile devices.

This means that once you learn how to write well-formed HTML, it can be run on any device, anywhere. Don’t underestimate how powerful that can be.

HTML is not a programming language, as it doesn’t do anything. It simply defines defines layouts using Elements and their Attributes. HTML has more elements than you’ll ever actually need. The purpose of this resource is to teach you some of the most common elements and how to use them.

Using this Resource

Major topics are immediately visible in the navigation bar on the left. Sub-topics are exposed when you click a navigation item and when you scroll down the page. Code examples associated with the descriptions in the center column can be found in the right column.

The Document

<!DOCTYPE html>
<html>
  <head><head>
  <body></body>
</html>

When your browser loads an HTML file - anything with the .html extension - it renders a document. Like word processing documents, HTML documents specify the shape and style of their content.

HTML Documents have a DOCTYPE and two sections: the head and the body.

DOCTYPE

<!DOCTYPE html>

The DOCTYPE tells the browser what version of HTML to expect. We use HTML5, which is defined using <!DOCTYPE html>.

Head

<!DOCTYPE html>
<html>
  <head>
    <title>My Document</title>

    <!-- Document Icon -->
    <link rel="shortcut icon" href="http://example.com/favicon.ico" />

    <!-- CSS Dependency -->
    <link rel="stylesheet" href="style.css">

    <!-- JS Dependency -->
    <script src="main.js"></script>

    <!-- Meta Tags - These provide non-essential information about the document -->
    <!-- This one tells the browser what text encoding we're using -->
    <meta charset="UTF-8">

    <!-- These two are used for Search Engine Optimization -->
    <meta name="keywords" content="wood, furniture, garden, garden-table, etc.">
    <meta name="description" content="Official dealer of wooden garden furniture.">
  <head>

  <body></body>
</html>

The document head contains information about the document, including the document title, any meta tags, any CSS and JavaScript dependencies, and the document icon (displayed in the browser tab).

Body

<!DOCTYPE html>
<html>
  <head>
    <title>My Document</title>

    <link rel="shortcut icon" href="http://example.com/favicon.ico" />
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>

    <meta charset="UTF-8">
    <meta name="keywords" content="wood, furniture, garden, garden-table, etc.">
    <meta name="description" content="Official dealer of wooden garden furniture.">
  <head>

  <!-- The Body: -->
  <body>
    <header>
      <h1>This is my header text</h1>
    </header>

    <div class="content">
      <h2>This is the content header</h2>
      <p>This is the content</p>
    </div>

    <footer>
      <p>This is my footer text</p>
    </footer>
  </body>
</html>

The body simply contains the content of the page, built using HTML Elements.

Understanding HTML Structure

HTML documents have a strict hierarchy.

To understand with this means, let’s explore two ways of modelling the document we defined in the previous example: trees and nesting boxes.

Trees

                    HTML Document Tree

                           html
                            |
             -----------------------------------
             |                                  |
           head                                body
             |                                  |
  ---------------------------           ---------------------
  |       |         |       |           |        |           |
title  link(x2)  script  meta(x3)     header    div       footer
                                        |        |           |
                                       h1    ---------       p
                                             |        |
                                             h2       p

One of the most common ways to model hierarchy is by using a tree (similar to family trees). In fact, this is how CSS and JavaScript understand HTML!

The tree on the right is just another way of modeling the document defined in the previous example.

Some helpful tree terminology:

An element directly above another is its parent
An element directly below another is its child
Any elements higher in the tree than an element are its ancestors
Any elements lower in the tree than an element are its descendants
Any elements at the same level of the tree and with the same parent are siblings

Nesting Boxes

|-------- html -----------------------------------------|
|                                                       |
|  |---- head ---------------------------------|        |
|  | _______  _________   _______   _________  |        |
|  | |title|  |link x 2|  |script|  |meta x 3| |        |
|  | ⎻⎻⎻⎻⎻⎻⎻  ⎻⎻⎻⎻⎻⎻⎻⎻⎻   ⎻⎻⎻⎻⎻⎻⎻   ⎻⎻⎻⎻⎻⎻⎻⎻⎻  |        |
|  |-------------------------------------------|        |
|                                                       |
|  |---- body ---------------------------------------|  |
|  |                                                 |  |
|  |  |- header -|  |---- div -----|  |-- header -|  |  |
|  |  |  _____   |  |  _____  ___  |  |   ______  |  |  |
|  |  | | h1 |   |  | | h2 | | p | |  |   | h1 |  |  |  |
|  |  |  ⎻⎻⎻⎻⎻   |  |  ⎻⎻⎻⎻⎻  ⎻⎻⎻  |  |   ⎻⎻⎻⎻⎻⎻  |  |  |
|  |  |----------|  |--------------|  |-----------|  |  |
|  |-------------------------------------------------|  |
|                                                       |
|-------------------------------------------------------|

Heirarchy can also be modelled as nesting boxes, which is a nice way of understanding which elements are the owners of other elements.

Elements own or contain all of their descendants.

When the browser renders HTML, the result looks very simlar to the Nesting Boxes model. Rendering is the act of transforming code into what is shown on the monitor.

Elements

<!-- Format: -->
<element>
  ...content
</element>

<!-- Examples: -->
<h1>This is a large header</h1>

<p>
  This is a paragraph. It can contain as many words as you need.
</p>

<div>
  This is a div, a generic element that contains other elements.
  <h4>Like this smaller header,</h4>
  <p>And this paragraph</p>
</div>

HTML Elements (AKA HTML Tags) are the objects we place within an HTML document.

They are specific words wrapped in angle brackets (< and >). We say that they are opened when you write a tag, (ie. <header>), and closed when you write the tag again, this time with a forward slash (ie. </header>.

Block Elements

<h1>The header of my documents</h1>
<h4>The subheader; a bit of context</h4>

<p>
  This is where I describe what my page is about.
  Paragraphs are generally much longer than headers.
</p>

By default, Block Elements take up the entire width of the document.

In the example to the right, each element will be on its own horizontal section.

View in Codepen

Inline Elements

<!--
  The strong and em tags will be in a line
  with the plain text inside this paragraph tag
-->
<p>
  <strong>This strong text</strong>
  is beside this normal text
  <em>and beside this emphasized text</em>
</p>

<div>
  <!-- These images will be beside each other -->
  <img src="http://placehold.it/150x150" alt="First image">
  <img src="http://placehold.it/150x150" alt="Second image">
  <img src="http://placehold.it/150x150" alt="Third image">  
</div>

Unlike Block Elements, Inline Elements are displayed in a line.

View in Codepen

Void Elements

<!-- Void Element Usage -->
<img src="http://placehold.it/150x150" alt="First image">
<br>
<input type="text" name="myInput">

Void (AKA Empty) elements are not designed to have any content. Because of this, they don’t require a closing tag.

View in Codepen

Attributes

<!-- This tag has a 'class' attribute, its value is 'header' -->
<h1 class="header">Header Text</h1>

<!-- This tag has two attributes, 'src' and 'alt' -->
<!-- Their values are 'http://placehold.it/150x150' and 'First image' -->
<img src="http://placehold.it/150x150" alt="First image">

All HTML elements can have attributes, which essentially provide additional information about the element.

The term attribute is synonymous with the term property.

Usage

<!-- Bad -->
<img CLASS='my-image' src = 'http://placehold.it/150x150'>

<!-- Good -->
<img class="my-image" src="http://placehold.it/150x150">

<!-- Bad -->
<img id="img-12345" class="my-image" width="500" height="300" src="http://placehold.it/150x150" alt="This is a placeholder image">

<!-- Good -->
<img
  id="img-12345"
  class="my-image"
  width="500"
  height="300"
  src="http://placehold.it/150x150"
  alt="This is a placeholder image">

When defining attributes, the convention is to write attribute names in lowercase and to wrap their values in double quotes. Don’t leave spaces on either side of the =.

If you have more than three attributes, put them on separate lines.

Key/Value Pairs

<!-- Example 1 -->
<p id="home-description" class="descripion">
  This is the description of my home page.
</p>

<!-- Example 2 -->
<img class="placeholder" src="http://placehold.it/150x150" alt="First image">

Attributes are defined in the opening tag (as opposed to the closing tag), and are an example of what we call key/value pairs.

In Example 1 to the right, the p element has two attributes, each paired with a value.

Key (Attribute Name)	Value
`id`	home-description
`class`	description

In Example 2 to the right, the img element has three attributes, each paired with a value.

Key (Attribute Name)	Value
`class`	placeholder
`src`	http://placehold.it/150x150
`alt`	First image

IDs and Classes

<!-- Bad -->
<p id="my-description">Description one</p>
<p id="my-description">Description two</p>
<p id="my-description">Description three</p>

<!-- Good -->
<p class="my-description">Description one</p>
<p class="my-description">Description two</p>
<p class="my-description">Description three</p>

<!-- Better -->
<div class="my-descriptions">
  <p>Description one</p>
  <p>Description two</p>
  <p>Description three</p>
</div>

The id and class attributes are very important in HTML, because they’re what CSS uses to apply rules to specific elements.

Each document should only have one instance of any given id, but it can have as many instances of a given class as you’d like.

A helpful tool for understanding IDs and Classes is to consider the analogy of a student. A student can be taking multiple classes at a time, but they only have one ID.

In software, generality is good, so prefer using class over id whenever possible.

NOTE: When naming classes and IDs, use kebab-case (lowercase with hyphens)

Element Reference

Typography

<h1>Main Heading</h1>
<h2>Secondary Heading</h2>
<h3>Smaller than h2</h3>
<h4>Smaller than h3</h4>
<h5>Smaller than h4</h5>
<h6>Smaller than h5</h6>
<p>This is where we place regular text</p>
<p>We can have text that contains a <a href="https://google.ca">link</a></p>
<p>One word will be <strong>bold</strong></p>
<p>One word can be <span>styled</span></p>
<p>This will be on <br> 2 lines</p>

Element	Example	Type	Void
Heading 1	`<h1>Main Heading</h1>`	Block	False
Heading 2	`<h2>Secondary Heading</h2>`	Block	False
Heading 3	`<h3>Smaller than h2</h3>`	Block	False
Heading 4	`<h4>Smaller than h3</h4>`	Block	False
Heading 5	`<h5>Smaller than h4</h5>`	Block	False
Heading 6	`<h6>Smaller than h5</h6>`	Block	False
Paragraph	`<p>This is where we place regular text</p>`	Block	False
Anchor (Link)	`<a href="https://google.ca">Go to Google</a>`	Inline	False
Strong	`<p>One word will be <strong>bold</strong></p>`	Inline	False
Emphasis	`<p>One word will be <em>emphasized</em></p>`	Inline	False
Span	`<p>One word can be <span>styled</span></p>`	Inline	False
Line Break	`<p>This will be on <br> 2 lines</p>`	Inline	True

View in Codepen

Grouping

<div>
  DIV elements are used for arbitrarily grouping elements. You can add plain text...
  <p>
    But it is usually better to add text within
    <em>typography elements</em>
    like paragraphs.
  </p>
</div>

<header>
  <p>
    HTML5 gave us more semantic elements like <strong>header</strong>.
    It acts the same as div, but its name gives us an idea of what it <em>does</em>.
  </p>

  <p>
    For example, <strong>headers</strong> often contain site navigation, which we can define using the <strong>nav</strong> element:
  </p>

  <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
  </nav>
</header>

<article>
  <section>
    <h2>When do we use section?</h2>
    <p>It's really up to you. The name section implies that it is a <em>section</em> of something, so you shouldn't use a single section on a page.</p>
  </section>

  <section>
    <h2>Do sections have to be part of an article?</h2>
    <p>Nope! Though they <em>can</em> be. <strong>Articles</strong> can also be part of sections - it depends on how you structure your page.</p>
  </section>
</article>

<aside>
  <h4>Many sites also have content that is related to the main content.</h4>
  <p>That's where we can use the aside element.</p>
</aside>

<footer>
  <p>Most sites also contain a footer. Footers sometimes contain their own navigation, and maybe some contact info:</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

Element	Example	Type	Void
Header	`<header></header>`	Block	False
Footer	`<footer></footer>`	Block	False
Division	`<div></div>`	Block	False
Section	`<section></section>`	Block	False
Article	`<article></article>`	Block	False
Navigation	`<nav></nav>`	Block	False
Aside	`<aside></aside>`	Block	False

View in Codepen

Lists

<ol>
  <li>This will be an ordered (numbered) list</li>
  <li>You can have as many items as you need</li>
</ol>

<ul>
  <li>This will be an unordered (bullet) list</li>
  <li>You can have as many items as you need</li>
</ul>

Element	Example	Type	Void
Ordered List	`<ol></ol>`	Block	False
Unordered List	`<ul></ul>`	Block	False
List Item	`<li></li>`	Block	False

View in Codepen

Forms

<form>
  <label for="username">Username</label>
  <input type="text" id="username"> <br>

  <label for="password">Password</label>
  <input type="password" id="password"> <br>

  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select> <br>

  <label for="description">Description</label> <br>
  <textarea id="description"></textarea>
</form>

Element	Example	Type	Void
Form	`<form></form>`	Block	False
Input	`<input>`	Inline	True
Dropdown Menu (Select)	`<select></select>`	Inline	False
Dropdown Menu Option	`<option></option>`	Inline	False
Large Text Box	`<textarea></textarea>`	Inline	False
Input Label	`<label></label>`	Inline	False
Button	`<button></button>`	Inline	False

View in Codepen

Media

<img src="http://placehold.it/150x150" alt="Second image">

<audio controls>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<video width="320" height="240" controls>
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Element	Example	Type	Void
Image	`<img>`	Inline	True
Audio	`<audio></audio>`	Block	False
Video	`<video></video>`	Block	False

Here are some of the more common elements and their usage. There are many more, but this should get you started!

View Examples in Codepen

Setting Up a Project

project-folder
  - index.html

An HTML project starts very simply. All you need is a directory (AKA folder) that contains a file called index.html.

To view it in your browser, simply open index.html. HTML files will open in your default browser.

Some Best Practices:

Use lowercase names for directories and files
Don’t use spaces in your file names, instead use hyphens or underscores to separate words
Don’t use special characters in your file names
Choose logical and descriptive names for files and folders

Adding CSS files

project-folder
  - css
    - main.css
    - reset.css
  - index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- This is required on all sites! -->
    <meta charset="utf-8">

    <!-- The title appears in the browser tab -->
    <title>Aloha Apparel</title>

    <!-- Linking CSS -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
  <head>
  <body></body>
</html>

We generally group css files in their own directory. Let’s call it css.

Adding JavaScript files

Like CSS files, we group JavaScript files in their own directory. Let’s call it js.

project-folder
  - css
    - main.css
    - reset.css
  - js
    - app.js
    - slideshow.js
  - index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aloha Apparel</title>

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <!-- Linking Javascript -->
    <script src="js/slideshow.js"></script>
    <script src="js/app.js"></script>
  <head>
  <body></body>
</html>

Adding Assets (Images, etc)

It’s good practice to store assets in their own folder as well. Let’s call it assets.

Within assets, we’ll make a folder called images.

project-folder
  - css
    - main.css
    - reset.css
  - js
    - app.js
    - slideshow.js
  - assets
    - images
      - car.jpg
      - truck.png
  - index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aloha Apparel</title>

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="js/slideshow.js"></script>
    <script src="js/app.js"></script>
  <head>

  <body>
    <!-- Using Assets -->
    <img src="assets/images/car.jpg" alt="This is a car">
    <img src="assets/images/truck.png" alt="This is a truck">
  </body>
</html>

Contributing

This is a living document. It is up to all of us to make sure the information it contains is relevant and useful!

We encourage you to contribute, whether you’re fixing a typo or adding a new section.

Fork the repository

Forking is essentially making a copy of a repository. You can then make changes to it for your own purposes.

The source code for this website can be found on Github.

When you visit a repository page on Github, the fork button can be found in the top-right corner. Click it and choose your account as the place to “fork to”.

Clone your fork of the repo

cd an/appropriate/directory
git clone git@github.com:YOUR_USERNAME/html-fundamentals.git
cd js-fundamentals

Cloning is the term we use for copying code from Github to our local filesystem.

The clone command automatically creates a new folder with the repository name; in this case, js-fundamentals.

Install dependencies and serve

# Install:
gem install bundler
bundle install

# Serve
bundle exec middleman server

Gem is a ruby package manager.
Bundle allows us to install packages based on a list found in a file called Gemfile
Middleman is a lightweight server that runs locally.

Once your server is running, you can visit a local version of the site at localhost:4567!

Contribute!

This site is written entirely in Markdown. Each section has its own file in /source/includes. You can update any existing files.

If you’d like to add a new section:

Create a new file in /source/includes
Make sure the filename starts with an underscore, ie _section
Tell the site to render the new section by adding it to the includes list in index.html.md.

Make a pull request

git add --all
git commit -m "Made a contribution!"
git push origin master

Once you’ve finished your work, commit your changes and push them to your local repository.

Visit your fork on Github - https://github.com/YOUR_USERNAME/js-fundamentals
Click the Pull Requests tab
Click the New Pull Request button
It should automatically compare your fork with the master repository
Submit your pull request!

Merge conflicts

You may end up with merge conflicts with the base fork. To resolve, you’ll first have to add the base fork to your local git.

git remote add upstream https://github.com/redacademy/js-fundamentals.git

Then you can get the most recent code from the base for and merge it into your local code.

git fetch upstream
git merge upstream/master

Then you can resolve your conflicts and push back to your fork. Pull requests update automatically when new commits are pushed.