HTML Basics

Objectives and Overview

This lesson introduces HTML, common HTML terms, and elements. By the end of the lesson, you’ll have created your first HTML page!

Lesson Objectives

  • Be able to explain what HTML is and the role it plays in web development.
  • Explain common HTML terminology.
  • Understand and explain how HTML relates to web page structure.
  • Demonstrate the ability to create a basic page layout with HTML.

What is HTML?

HTML stands for Hyper Text Markup Language. HTML provides the structure for web content. In addition to structure, HTML provides the meaning of the page content. When working on websites, you’ll come across the phrase “semantic HTML.”

Semantic HTML is the use of HTML markup to convey and reinforce the meaning of a page. You’ll understand this concept further as you dive into learning HTML. For now, just understand that HTML tags are used for page structure and conveying meaning about the content.

Throughout this course, you’ll keep your HTML (structure) and your CSS (style) separated. HTML will always represent the structure and the content and CSS will always represent the appearance of that content.

Common HTML Terms

When you start learning HTML there may be lots of terms and definitions that are unfamiliar and possibly intimidating. As you progress in learning and using HTML, the terminology and syntax will become more familiar. The three most common HTML terms you should start familiarizing yourself with are: ElementsTags and Attributes.

Tags and Attributes will be covered in a later lesson. For now, let’s examine HTML Elements.

Elements

Throughout this course, you’ll see the term element used regularly. An element is an individual component that can be combined to form the HTML document/webpage once the browser parses it into the Document Object Model (DOM). You’re going to be working extensively with the DOM later in this course, but for now just know that the pages you look at are composed of individual HTML elements.

Let’s explore some commonly used elements.

Text Elements

  • Headings: <h1> through <h6>
  • Paragraphs: <p>
  • Unordered Lists: <ul>
  • Ordered lists: <ol>
  • List items: <li>
  • Bold: <strong>
  • Emphasis: <em>

Linking Elements

  • Anchors (Links): <a>
  • Images: <img>

Organizational Elements

  • Main: <main>
  • Aside: <aside>
  • Navigation: <nav>
  • Header: <header>
  • Footer: <footer>
  • Divider: <div>
  • Span: <span>

Page Structure

There is lots to learn in regard to proper use of HTML semantics- the practice of giving the HTML you write proper meaning and structure. Additionally, there is a wealth of information about how to properly set up the underlying skeleton of your webpage.

All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html><html><head> and <body>.

The entire code goes inside the <html> element. Everything contained within the HTML will fit within this section. Next is the <head> element which identifies the top of the document, including any metadata (accompanying information about the page).

The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title (which is displayed on the title bar in the browser window), links to any external files or any other beneficial metadata.

All of the visible content within the web page will fall within the <body> element. Take a look at this code example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body> </html>
Code language: HTML, XML (xml)

This is the structure that you should practice using in all of your HTML files that you create. In this example, the body only contains a single header and paragraph. As you build out your page, you would include more elements in both the head and the body, as you’ll see in later projects.

Basic HTML Guidelines

Here are some basic guidelines to follow as you work on your page:

  • Remember to close all tags that you open!
  • Write all HTML tags lowercase.
  • Practice properly nesting your tags.
    • For example, if you write: <tag1> <tag2> you’d want to close them in the reverse order by closing </tag2> and then </tag1>.
    • Open first, open second, close second, close first.
    • Here is an example: <strong><em>some text that would be bold and emphasized</em></strong>

Using Heading Tags

The way that you use heading tags on your page is important and there is lots of conflicting information on the topic. Generally, you’ll want to follow these best practices:

  • Include only one <h1> tag for the page. This should be your main heading.
  • Every content heading should use <h2> tags
  • Sub-sections that support the main content headings would be <h3> tags, and so on

Avoid using the heading tags for styling purposes. Instead, use these to convey order and meaning. Get in the habit of thinking of the headings as creating the skeleton of your page. These act as the document outline.

Other Considerations

It’s a good idea to make sure that you don’t include too much information in each heading block. If your paragraphs are looking really big, see if you can split it up into sub-sections. Alternatively, if you’re using sub-headings you’ll want to make sure that each one has at least 2 or more sentences. Both of these considerations will improve the readability of your site.

While these are best practice suggestions, the content (and layout) of the site should always be the main focus. The layout of an “About” page will be structured differently than a blog post. Being mindful of these things from the start will help you make content-driven decisions when building your own site or working with a client.

Activity: Building With HTML

Now that you have a basic understanding of HTML, let’s practice by creating a page.

You’ll start creating an introduction page. For now, you’ll be adding HTML and content only. As you add each of these elements, make sure that you’re adding things that fit the goal of the project. For example, instead of just listening out random items you should make a list of hobbies or interests.

Steps

  1. Create a new Glitch project (or open your existing one)
  2. Find the index.html file
  3. Add the HTML for the basic page structure shown in this lesson
  4. Save the file (Glitch autosaves, but you can still save with CMD + S on a Mac or Ctrl + S on Windows)
  5. Change the <title> in the <head>

At this point, your HTML should look something like this:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>All About Me</title> </head> <body></body> </html>
Code language: HTML, XML (xml)
  1. Run the file in Glitch by clicking the Show button in the top left.
  2. Next, let’s add some elements to the <body> Remember, the content you add should be between the opening <body> and closing </body> tag. Include the following HTML elements:
    • An <h1> heading
    • Sub-headings, such as <h2> and if necessary, <h3>
    • Some paragraph text inside a <p> element.
    • Use the <strong> and <em> tags to format some text
  3. Once you finish, consider adding ordered and unordered lists inside the body. Here’s how:
<p> My first unordered list! <ul> <li>Unordered list item!</li> </ul> My first ordered list! <ol> <li>Ordered list item 1</li> </ol> </p>
Code language: HTML, XML (xml)

It’s alright if you don’t finish this all at once! Keep working toward it.

HTML Comments

Understanding how to comment your code is important in web development. Any content wrapped within a comment will not be displayed on the web page. Comments help keep our files organized, allow us to set reminders, and provide a way for us to manage our code. Comments become especially useful when there are multiple people working on the same files.

Additionally, comments allow you to effectively “turn off” a line, or lines, of code. You’ll see this used throughout this course. HTML comments start with <!-- and end with -->. Any code contained within those characters won’t be interpreted/displayed by the page. Note that there are two ”-” characters on each side even though it looks like there is only one.

Here is an example of commented HTML:

<! – I'm a multi-line HTML comment! Build good habits and practice commenting/uncommenting from the start! To comment in HTML you use <! – [comment goes here] and end it with – >
Code language: HTML, XML (xml)

Before moving on, add some comments to your code!