Create a Blog Layout in HTML
Tags: tutorial, beginners, html, webdev
Published: 2020-02-06 01:21:11

In this post, we will create a full-page blog layout.

This is the fifth post and video in a series on learning web development. You may need to check out the first post to learn how to get set up to begin coding:

{% link https://dev.to/5t3ph/learn-how-to-make-a-website-set-up-your-coding-environment-2oeo %}

You may watch the following video or follow along with the expanded transcript that follows.

{% youtube NWCO-XHpVP0 %}

[*Review the source code* >](https://github.com/5t3ph/howtowebdev/tree/master/ep5-blog-html)

To begin this lesson, open the [starter project](https://github.com/5t3ph/howtowebdev-starter) you began in episode 1, or [review the source files](https://github.com/5t3ph/howtowebdev/tree/master/ep4-semantic-html) from episode 4.

To begin this lesson, open our project in VSCode.

In the Terminal, type the start command `npm run start` to run the project, and then open the index.html file.

Let's copy our `semantic-layout.html` file and rename the copy: `blog-layout.html`.

Go to the browser and after `localhost:3000` add `/blog-layout.html`. It will look the same since we haven't changed any content.

Let's look a preview of where we're headed today:

![preview of final result](https://dev-to-uploads.s3.amazonaws.com/i/j3rgpg1uy6qhogzqnfdr.png)

You'll see we're going to treat the whole page as a single post out of our blog. So,  back in VSCode, let's update the `<title>` to indicate this is a new page. A common convention is "Page Title (pipe character) Website Name" so we'll update this to:

```html
<title>An Amazing Blog Post | My Website</title>
```

Next, we'll move our blog title out of the `h2` in the `article` into the `h1` inside of the `header`:

```html
<header>
  <h1>An Amazing Blog Post</h1>
</header>
```

For blog posts, some important info visitors want to know is who wrote the article and when. Within the header and following the `h1`, we'll add a paragraph tag with the text "By (and you can use your name) (pipe character) Posted on: (and you can pick a date, I'm going with 02/02/2020)"

```html
<header>
  <h1>An Amazing Blog Post</h1>
  <p>By Stephanie Eckles | Posted on: 02/02/2020</p>
</header>
```

There's a couple of text formatting tags we can use to distinguish this information using native browser styles. First, we can add italics around words by using the `<em>` tag, so let's add `em` tags around your name and the date. 

```html
<p>By <em>Stephanie Eckles</em> | Posted on: <em>02/02/2020</em></p>
```

Then save, and take a look at the result.

While this information is important, it's ok to de-emphasize it, so let's also wrap all the content inside of the paragraph tag with the `<small>` tag. 

```html
<p><small>By <em>Stephanie Eckles</em> | Posted on: <em>02/02/2020</em></small></p>
```

Save, and you'll notice the size has in fact decreased. 

An interesting thing about the `small` tag is it will decrease relative to the content tag it's in, so if you place it within the `h1` it will be larger than what we see in our paragraph, but smaller than the default `h1` size.

Ok, let's move to the `<article>` content. Let's update the first `<h2>` to say "Topic Introduction". Reminder that we start with an `h2` because we already have used our single `h1` to identify the page title in the `header`.

```html
<h2>Topic Introduction</h2>
```

Just to add more content, let's copy both the `h2` and the `p` tags and their content and paste below. Then change the pasted `h2` to say "The Main Topic". Let's copy paste again, but on the new set update the `h2` to be an `h3` and change the `h3` text to "A subtopic to the main one". This is to help you remember that heading tags are hierarchical and should be used sequentially.

```html
<article>
  <h2>Topic Introduction</h2>
  <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps
    jelly-o.
  </p>
  <h2>The Main Topic</h2>
  <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps
    jelly-o.
  </p>
  <h3>A subtopic to the main one</h3>
  <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps
    jelly-o.
  </p>
</article>
```

Following the last `p` you have, let's add a new tag: `<blockquote>`. This tag can be used to call out a quote, like from a person, book, or other sources, or to emphasize some text from the article. These techniques are mimicking tactics used by newspaper layout designers.

Inside the `<blockquote>` we'll add a `<p>` and then our quote - feel free to use your real favorite quote, I'm going to just say "Here's a fabulous thing someone said".

```html
<blockquote>
  <p>"Here's a fabulous thing someone said."</p>
</blockquote>
```

To semantically attribute this quote, we'll follow the `p` tag with a `footer` tag - whoa, wait! Don't we already have a footer on the page? We do! But the `footer` tag can be included multiple places as it's intent is to be a footer for any sectioning content, and the `blockquote`  is it's own contained section.

```html
<blockquote>
  <p>"Here's a fabulous thing someone said."</p>
  <footer>

  </footer>
</blockquote>
```

Within the `<footer>` we'll use the common convention of a `-` and then add one more tag for semantics which is `<cite>`. Finally, within `cite` we'll put the quote author's name - I'm going to say "Someone Awesome".

```html
<blockquote>
  <p>"Here's a fabulous thing someone said."</p>
  <footer>
    - <cite>Someone Awesome</cite>
  </footer>
</blockquote>
```

Ok, let's save! You'll see the browser indented the `blockquote` and also italicized the author's name that is within `cite`. So not only are you marking this up semantically, you can see how the markup informed the browser to treat it differently stylistically.

![in-browser blockquote style](https://dev-to-uploads.s3.amazonaws.com/i/h4f9a80n9unglue6bmc5.png)

Now, I feel the `article` content is running into the `footer` so a quick fix we can do is add a border. A way to do that is with a horizontal rule, indicated by an `<hr>` self-enclosing tag. Self-enclosing means it has no end tag.

Let's add the `<hr>` between the closing `</main>` tag and the starting `<footer>` tag, then save, and you can see the border line has been added.

```html
</main>
<hr>
<footer>
```

The last thing we'll do to wrap up this lesson is add our first image. We're going to add it as the first element within the `article`.

Images are included via the `<img>` tag. This tag is also self-enclosing, and uses attributes - like we discussed with links - to identify the source file for the image.

The attribute to add the link to an image is `src`. Let's source an image from my favorite free service called PlaceCorgi. Add the following value to the `src` attribute: `http://placecorgi.com/200x150`. The numbers on the end are a method that service provides to indicate the size of image you want to use, where `200` is the width and `150` is the height.

```html
<article>
  <img src="http://placecorgi.com/200x150">
  <h2>Topic Introduction</h2>
  // ... rest of article content
```

Save, and check out which cute corgi has been added!

We need to add two more attributes to our `img` tag. The first is the `alt` attribute which should be a short description of the image. This text will not be visible, but is used by search engines as well as assistive technology used by impaired visitors. I'm going to use the text "Good corgi doggo".

```html
<img src="http://placecorgi.com/200x150" alt="Good corgi doggo">
```

The last attribute is optional, but let's add the `align` attribute with the value of `left`. 

```html
<img src="http://placecorgi.com/200x150" alt="Good corgi doggo" align="left">
```

Save, and you'll see that the `img` is now positioned to the left of the text content, and the content that is longer than the image is tall has wrapped and continues below and flush with the left of the image. We will refine this appearance when we learn CSS for styling.

**Next up in Episode 6:** Card HTML Layout