Create a Blog Layout in HTML

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:

Learn How to Make a Website: Set up Your Coding Environment

Stephanie Eckles ・ Jan 20 '20

#tutorial #beginners #codenewbie

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

Review the source code >

To begin this lesson, open the starter project you began in episode 1, or review the source files 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:

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:

<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:

<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)"

<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.

<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.

<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.

<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.

<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".

<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.

<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".

<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.

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.

</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.

<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".

<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.

<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