HTML basics or how I learned to build a sandwich

February 02, 2020

If you have been following along, you made a file called something like awesome.html. This little file has one line in it with angly brackets. It isn't much but it is the start of building a webpage.

What is HTML

Webpages are written in HTML (Hypertext Markup Language). HTML is made up of "tags" which are encapsulated in angle brackets. These tags build up the structure of the document. They also are semantic, meaning they give extra meaning to the content inside.

Tags

Each tag is a pair. They have an opening tag e.g. <h1> and the closing tag e.g. </h1>. It is important to remember to close your tags!

Yesterday, we used the header 1 tag in our webpage:

<h1>AWESOME!</h1>

This made the text big and bold, but what else did it do?

Headings

Heading tags aren't just for making the font size bigger, they are closer to chapter titles.

There are six heading levels: h1, h2, h3, h4, h5, and h6. The first heading should be an h1. This often is the title of the page.

You can have multiple headings. I use multiple h2 tags in this post, but there should only be one h1 tag.

Headings are not the only tags available.

Lists

Lists come in two flavors: ordered and unordered.

Think of the difference between a shopping list and a recipe. The order matters in a recipe, the order (usually) doesn't matter in a shopping list.

Unordered list

  • bread
  • peanut butter
  • jelly

There are two different tags required for building an unordered list, <ul> and <li>.

<ul>
    <li>bread</li>
    <li>peanut butter</li>
    <li>jelly</li>
</ul>

Ordered list

  1. Open bread container and pull out two pieces of bread.
  2. Place bread on a plate.
  3. Open jar of peanut butter.
  4. Put knife into jar of peanut butter and scoop some out.
  5. Spread peanut butter on one side of a piece of bread.
  6. Repeat steps 3 - 5 for the jelly.
  7. Put jelly side and peanut butter sides of bread together.
  8. Eat.

Ordered lists are also built with two tags, <ol> and <li>.

<ol>
    <li>Open bread container and pull out two pieces of bread.</li>
    <li>Place bread on a plate.</li>
    <!-- Skipped other steps -->
</ol>

The <li> tag is a generic tag that stands for "list item". The outer tags (also known as parent elements) tell the item what kind of list it is. That is why I didn't need to number the recipe steps, the <ol> did that for me!

Comments

You may be wondering about the <!-- --> in the order list example. This is a comment. It will not be rendered on the page. Think of it as a note to your future self. Not everyone can remember why they did what they did.

Paragraph

Headings and lists would not make for an interesting page, so another common tag is the <p> or paragraph tag. This tag is used for paragraphs of text.

<p>I love peanut butter and jelly sandwiches. They are the best kind of sandwich. They were the first sandwich I ever made.</p>

Images

The final tag I will go over today is the <img> tag. This tag is special in that it does not have an end tag and it has "attributes"

<img src="sandwich.jpg" alt="A piece of bread with peanut butter and another with jelly lying face up on a plate.">

The attributes in the above example are "src" and "alt". The "src" attribute tells the browser where to get the image to show on the page. The "alt" attribute is a description of the image. This will be shown instead of the image if the link is broken and it is also read by screen readers. Always fill in the alt text!

With these tags, we can build a recipe page for a peanut butter and jelly sandwich.

Building the page (and sandwich)

Create a new file called "sandwich.html" with the following text.

<h1>Peanut butter and jelly sandwich</h1>
<img src="sandwich.jpg" alt="A piece of bread with peanut butter and another with jelly lying face up on a plate.">
<p>I love peanut butter and jelly sandwiches. They are the best kind of sandwich. They were the first sandwich I ever made.</p>
<h2>Ingredients</h2>
<ul>
        <li>bread</li>
        <li>peanut butter</li>
        <li>jelly</li>
</ul>
<h2>Directions</h2>
<ol>
        <li>Open bread container and pull out two pieces of bread.</li>
        <li>Place bread on a plate.</li>
        <li>Open jar of peanut butter.</li>
        <li>Put knife into jar of peanut butter and scoop some out.</li>
        <li>Spread peanut butter on one side of a piece of bread.</li>
        <li>Repeat steps 3 - 5 for the jelly.</li>
        <li>Put jelly side and peanut butter sides of bread together.</li>
        <li>Eat.</li>
</ol>

Save the file and open it in a browser.

Oh no

The image didn't load.

Browser window with a broken image link and alt text for the image showing.

Feel free to download a copy of my sandwich image. Save the file as "sandwich.jpg"

sandwich image The original photo is by Freddy G on Unsplash.

Put the file (sandwich.jpg) in the same location as your "sandwich.html" and reload the page.

Success

Browser window with Peanut butter and jelly sandwich as the title of the page, photo of a sandwich, and the recipe.

This page looks pretty good but could use a little more pizazz, and that will be next in the next post!