HTML Structure & Content

This article will be a summary of all the basic tags you need to build your website. We are not covering the tags for standard boilerplate code we already covered in the first HTML article, if you haven´t read it yet, it is here.

Tags for page structure

Tags to structure our website are the most important ones in my opinion. If you don´t know how to structure your web then styling will be much harder and also your page will lose semantic value. Before writing any HTML you have to visualize how you want your site to be structured. Some questions you want to ask yourself:

  • Do I need a topbar for navigation?
  • Do I want a sidebar for extra content or links to other parts of the site?
  • Do I need a footer?
  • How is the user supposed to navigate and consume my content?

Try to answer those questions before starting. You can always revisit them later if you change your mind while creating the site though.

Let´s take a look at some structure tags and their usage:

TagUsage
headerIntroductory content of a section or document. Must relate to its container. A header usually contains heading elements, a logo, authorship information. You can have several header elements in one HTML document.
navIt´s a container for navigation links. It is supposed to be used for major block of navigation, the user’s main way to access your content.
mainSpecifies the main content of the document. It should not contain content that is repeated across documents such as sidebars, nav links, copyright, etc. Is specific for this document.
asideContainer for content that is not directly related to the main topic of the tag it is in. Aside is usually used for sidebars in a document.
sectionBasically its name. It is used to structure standalone sections of your site. They typically have a heading and its content should make sense together.
articleIndependent, self-contained content. Should have a heading and make sense on its own without the context of the rest of the page. A good candidate for forum or blog posts, news stories, everything that you can catalog as an article.
divIs the more general and used container tag. It gives structure without extra connotations. If you need to group together elements but your container isn´t any of the above mentions you most probably need a div.
footerIt should be the footer of your page, at the very bottom of it. Usually contains contact info, authorship, copyright, sitemap, back to top links, etc.

HTML structure example

Now let´s take a look at an example of the structure we can create with the tags you just learned. We will be using this for latter exercises so feel free to copy it to your codepen or your HTML file in VS Code and play with it a little. If you don´t know how to use those tools we have covered them in these articles: Codepen & VS Code.

<header> </header>
<nav> </nav>
<div>
  <main>
    <section>
      <h2>Some heading</h2>
      <p>Text for this section that is clearly very important.</p>
    </section>
      
    <section>
      <h2>Another section that gives sense to the rest of the page</h2>
      <p>Content content content.</p>
    </section>
  
    <article>
      <h3> This other story could interest you</h3>
      <p> Standalone story that makes sense without the context of the page.</p>
    </article>
  </main>
  <aside>
    <div>
      all your sidebar content here
    </div>
  </aside>
</div>

<footer> </footer>

Keep in mind it won´t look very good since we haven´t tackled CSS just yet, but it should have a structure and start to make sense. Here is a picture to more clearly visualize the structure we just learned:

Infographic for HTML structure tags. Header on top, navigation after. Sidebar to the side. Main content in the middle with articles inside of it and footer at the very bottom.

Tags for text hierarchy

Now that we covered the most important tags in the structure category we need some content to fill those containers. We will go through the most commonly used tags for content starting from text.

Is important to use text tags correctly to establish a hierarchy in your content. For that we use the headings tags: <h1> to <h6>. H1 defines the most important heading of the page and there can be only one. Then from there downwards the rest of the tags are for less important headings (and you can have multiple of them) but they still give a sense of sections and are more important than plain text. Think of these as titles to your content and structure.

Then we have the <p> tag for paragraphs. This is your go-to tag for text content.

Writing rules illustration.

Now go back to the example we did above for the structure of a page and play with some headings and paragraphs. Try adding 2 divs to the footer, one for contact info and other for copyright with an h5 tag and some paragraphs tags. (hint: you already have examples of both headings and paragraphs in the code)


Tags for links and media

To add links we will use the <a> tag but with the attribute href (it´s mandatory). We haven´t talked much about attributes just yet, basically, they define additional characteristics or properties of the element we are using. They usually define a pair of name and value, but some are only a name. a link to CodeJourney main page would look like this:

<a href="https://www.codejourneyclub.com/" target="_blank" >Code Journey</a>

The idea is to put the attribute href in the start of the tag, then between ” ” the link we want to refer to and between the tags goes the text that will have the link. Note that I also added another attribute (target) that says _blank, which means the link will open in another tab instead of redirecting you in your current tab.

To add an image we will be using the <img> tag. Similar to the tag before we will need to specify a couple of attributes. The src will be for the source of the image, alt is the Alternative text that will be displayed if the image cannot be loaded or if the user is using a screen reader. We also have to specify the size of our image. Here is an example of an image tag.

<img src="https://picsum.photos/seed/picsum/200/300" alt="Nice mountain" width="300" height="200">

With this new knowledge, your next task is to add to the HTML we had been working on a link to google in one of the articles and an image that you like to the other one. Remember practice makes masters, the fact that you are reading this and learning is great, but you need to try things out and code yourself to make the knowledge your own!

Homework

If you didn´t follow along while reading the article you can find the HTML code with a comment specifying the exercise for you to practice in this CodePen! I also highly recommend writing the whole structure from scratch to fully understand each tag.

There are A LOT more HTML tags you can learn and also some extra specifics for the ones you learned today here. If you want to dive deep into them I recommend these two sites with great documentation and examples:


In the next article, we will cover navbars and forms. After that, we will start working on those CSS skills to make everything look nice!

Click on the image above so you don’t miss out on future content.