Lesson Monday

All of the tags we learned about in the previous lessons are block elements, meaning that each element is displayed on a new line. In this lesson, we are going to look at elements that do not appear on their own line but share a line with other elements. These are called inline elements.

We're going to modify our first webpage to include an inline element:

my-first-webpage.html
<p>This is my <strong>first web page</strong>!</p>

The <strong> tag indicates that something is important. By default, it will make the text inside it bold (although we'll learn how to customize this soon). If we want to emphasize something, we'll use the <em> tag, which will italicize it:

my-first-webpage.html
<h2>Written with the guidance of <em>Epicodus</em></h2>

Now, let's learn about perhaps the most important HTML tag of them all:

my-first-webpage.html
<p>Check out <a href="http://www.epicodus.com/">Epicodus</a>. It's a great school for learning web programming!</p>

The anchor tag, <a>, creates a link, and the href (for hypertext reference) attribute provides the web address the link will go to.

Our my-first-webpage project contains two HTML documents. Here's how we can link from one to another:

my-first-webpage.html
<p>Here is a link to my <a href="favorite-things.html">favorite things</a>.</p>

Instead of supplying a full path, we've provided a relative path. If a link doesn't start with http:// (or https://, or a few other specific protocols you may come across), your web browser will look in the same folder for the file you're linking to.

This brings up a pitfall you should be careful to avoid: if you write a link like <a href="www.epicodus.com">link</a>, it will look for a file called www.epicodus.com in the current directory. So if you're linking to another website, don't forget to put http:// in front!

Finally, let's make our webpage a bit prettier and include an image. Save an image in the same folder as your HTML files and then include it like this:

my-first-webpage.html
<img src="kitten.jpeg" alt="A photo of a cute kitten.">

The <img> tag is different from the other tags we've used in that it is self-closing: you don't need a closing tag. Also notice the alt attribute, which the browser displays if it can't render the image. This attribute is optional, but it's a really good idea to include it, so that blind people using software that reads web pages to them can know what the image is.

Typically, webpages will store their images in a separate folder from their HTML. Let's create a folder called img and put the image file in there. Now, we need to update our code to tell the browser where to find the image:

my-first-webpage.html
<img src="img/kitten.jpeg" alt="A photo of a cute kitten.">

img/kitten.jpeg tells the browser to look in the img folder in the current directory and then look for the kitten.jpeg file.

Let's update the page of favorite things to include some of the concepts we just learned about:

favorite-things.html
<!DOCTYPE html>
<html>
  <head>
    <title>Michael's favorite things</title>
  </head>
  <body>
    <h1>My favorite things</h1>
    <h2>These are a few of my favorite things.</h2>

    <h3>People</h3>
    <p>Here are some of my favorite <em>people</em>!</p>
    <ul>
      <li>
        <a href="http://www.example.com/christopher.html">
          My brother <strong>Christopher</strong>
          <img src="img/christopher.jpeg" alt="A photo of Christopher.">
        </a>
      </li>
      <li>
        My mom and dad:
        <ul>
          <li>
            <a href="http://www.example.com/steve.html">
              <strong>Steve</strong>
              <img src="img/steve.jpeg" alt="A photo of Steve.">
            </a>
          </li>
          <li>
            <a href="http://www.example.com/carol.html">
              <strong>Carol</strong>
              <img src="img/carol.jpeg" alt="A photo of Carol.">
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="http://www.example.com/jessica.html">
          My friend <strong>Jessica</strong>
          <img src="img/jessica.jpeg" alt="A photo of Jessica.">
        </a>
      </li>
      <li>
        <a href="http://www.example.com/candy.html">
          My friend <strong>Candy</strong>
          <img src="img/candy.jpeg" alt="A photo of Candy.">
        </a>
      </li>
    </ul>

    <p>Thanks for reading about me!</p>
  </body>
</html>

Make sure to commit and push to your remote GitHub repository after updating. Check that your GitHub repository shows the changes.

Terminology


  • Inline element: HTML elements that do not appear on their own line, but instead share a line with other elements.

  • Attribute: Additional information provided to an HTML tag. For instance, the href attribute in an <a> tag provides the URL a link should travel to.

  • Relative path: A path to a file within the project itself. Usually referring to the location provided in as the href attribute in an <a> tag.

  • Self-closing: An HTML element that does not require a closing tag, such as <img>.

Inline Elements


Some inline elements:

  • <strong>: Makes text appear bolder. Example: <strong>This content is important.</strong>

  • <em>: Emphasizes text. Similar to italics. Example: <em>This content is emphasized.</em>

  • <a>: Anchor tag. Creates a link. The URL following href denotes where the link should travel to. Example: <a href="http://www.epicodus.com">Epicodus</a> - link to another web page

  • <img>: Image tag. <img src="img/kitten.jpeg" alt="A photo of a cute kitten."> - link to an image located in img subdirectory, with alt text