CommonLounge Archive

Diving Deeper into HTML

June 22, 2017

In this lesson, you’ll learn:

  • How to write HTML correctly
  • How to add text and links
  • How to structure your web page
  • How to write comments
  • How to solve problems with your code

Using HTML Correctly

When writing HTML, it’s important to pay attention to semantics, or the meaning of each HTML element. This means that it’s important to use HTML elements the way they were intended.

For instance, a link element (<a></a>) should be used for a link, look like a link, and act like a link. If you want to write paragraphs of text, you should use the paragraph element (<p></p>), not a form element, table or divider.

You can check out the whole list of HTML elements (and what they’re intended for) at HTML elements reference at MDN.

Adding Text

The very first web pages were just pages of text intended to convey information. Even in their most complex forms, web pages are still organized like articles with titles, headings, and paragraphs.

It’s important to know the structure of information of your web page before you begin to write HTML. What’s the main title of the page? What are the main headers or sections? Are they divided into sub-sections?

Once you know this information, you can understand how to use HTML headings. They are listed below:

<h1>Main header</h1>
<h2>Second-level</h2>
<h3>Third-level</h3>
<h4>Fourth-level</h4>
<h5>Fifth-level</h5>
<h6>Sixth-level</h6>

The <h1> element is used for the main title of an article or web page. If the article or page is divided into sections, each section has an <h2> (or 2nd-level header) as its title. If an <h2> section is further divided into sub-headings, you use <h3>, and so forth. The smallest header you can make is <h6>.

To add paragraphs of text, use the paragraph element <p>.

<p>This is a paragraph of text. It can be short or long depending on the document.</p>

You can also make text bold or italicized text by surrounding the text with <strong></strong> (for bold or important text), or <em></em> (for italicized or emphasized text). Note that <b> (for bold) and <i> (for italics) tags also serve the same purpose, but their use is not considered semantic and you should avoid them.

<p>You can create <strong>bold text</strong> and <em>italicized text</em> within a paragraph.</p>

which will look like this:

You can create bold text and italicized text within a paragraph.

Adding Structure to a Web Page

A complete web page is made of many parts: a header (usually with a navigation menu), a main body with the content of the page, a sidebar or additional section with more information about the website, and a footer.

Each section of the page has its own HTML element, which are placed inside the HTML document’s <body> tag to create the structure of an entire page.

1. Header

<header></header>

Not to be confused with the <head></head> tag, the header is a place to put your site title and navigation:

2. Nav

<nav></nav>

The nav is the element that contains your site navigation (all of the links that you put in your header, sidebar, or footer to help people get around your site.) Navigations are usually written as HTML lists, which we will cover in a later section called Making Lists.

3. Main

<main></main>

The main is the big container for your main content. You should only use one per HTML document.

4. Article

<article></article>

The article element contains an article, or the main information, of your web page. It may be an article, a blog post, an interactive form, or any other type of content. One <main> element may contain multiple articles.

5. Section

<section></section>

Articles are divided into sections. Each section has a heading <h1...h6> etc., which we defined in the section above called Adding Text.

6. Aside

<aside></aside>

An aside is a place to put extra information that doesn’t go into the main article, but is not header or footer content. This may be a place for an author’s bio, extra links, ads, and more. This is placed outside of the <main> element.

7. Footer

<footer></footer>

The footer is used for a web page’s footer content. It may include copyright information, your site navigation, other related links, and more.

Putting it all together

If we put the whole page together in an HTML document, the code will look something like this. (Notice that when elements are placed inside other elements, they are indented, which makes it easy to read.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
    My Site Title
    <nav>
      <!-- Site navigation goes here -->
    </nav>
  </header>
  <main>
    <article>
      <h1>My Blog Post</h1>
      <section>
        <h2>First Section</h2>
        <p>Some text.</p>
      </section>
      <section>
        <h2>Second Section</h2>
        <p>Some text.</p>
      </section>
    </article>
  </main>
  <aside>
    <p>Some extra information about me.</p>
  </aside>
  <footer>
    <p>Copyright 2017. All Rights Reserved.</p>
  </footer>
</body>
</html>

(Not all HTML web pages follow this exact structure.)

Grouping Elements with divs and spans

Sometimes you want to group elements together, but if it’s not a section of an article, it doesn’t make sense to use the <section> element. In that case, you can use the <div> element, which is a meaningless divider that creates a box around elements to keep them grouped together.

This comes in handy when you’re styling your web page with CSS and want to keep some elements together as you create your page design. In the code below, we are grouping two different links with their descriptions.

<div>
  <a href="http://google.com">Google</a>
  <p>This is a link to Google.</p>
</div>
<div>
  <a href="http://amazon.com">Amazon</a>
  <p>This is a link to Amazon.</p>
</div>

Remember, <div> should not be used where using <section> or <p> is more appropriate.

Additionally, the <span> element allows you to group words of text in order to style them with CSS. For example, if you want to make part of your paragraph red, you could write the following HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    span {  color: red;}
  </style>
</head>
<body>
  <p>This is a paragraph. I only want <span>part of it</span> to be red.</p>
</body>
</html>

Result:

Writing Comments in HTML

HTML allows you to write comments in your own code for your own notes. These will not show up on the actual web page, but will be preserved in the HTML file for your future reference, or for other developers to understand your code later.

<!-- Comments are written like this. Make sure to add a space between the arrows and text, or else it won’t display correctly. -->

You might use it like this:

<header>  My Site Title  <!-- Note: add a link later --></header>

Troubleshooting

Sometimes, your HTML will not display correctly, and you may not know why. When that happens, you can check your HTML page in a validator, which checks for errors in your code.


Simply upload or copy and paste your full HTML document into the W3C Markup Validator at https://validator.w3.org/ and press “Check” to see where the errors might be.

If you don’t understand what the errors mean, a quick Google search should give you the answer.

Conclusion

Now you’ve learned how to create the basic elements of an HTML page, and how to fix any problems that you have with your code. In later lessons, you will learn about more elements like lists, tables, and interactive forms.

In the next lesson, we will dive deeper into the Fundamentals of CSS.

© 2016-2022. All rights reserved.