HTML Basics

A rundown of the most commonly used HTML elements and where and how to use them.

Scroll down...

Content

Resources

Comments

This lesson will be all about the basics. We'll get you started with core HTML concepts and get you oriented with the most commonly used HTML elements. We'll give you a short tour of the tags you'll be using over and over again in your career as a web developer. We'll also provide a bit of background on each of the core HTML elements. Then you'll read through a walkthrough that will take you more in-depth on the fundamentals of HTML.

The Basics of HTML

HTML is a markup language. What does that mean? Basically, it means it is a presentation language. It is meant to display information. It is not meant to manipulate information. Instead, it is used to present data and create a user interface. If you'd like a brief description of the difference between a markup language and programming language have a look at this post from StackExchange.

The most basic building block of HTML is an element. HTML elements are also called tags. An element can have an opening and closing tag or it can be self-closing. We'll be focusing on elements with both opening and closing tags mostly.

HTML elements that are not self-closing have two parts, the opening, and closing tags. The opening tag for an HTML element follows the pattern of <elementname> while the closing tag uses </elementname>. This tells the HTML parser that the tag has both started and ended so it can render it correctly in the page. This is what allows a paragraph tag to start, stop and separate itself from subsequent tags.

Heres an example:

<p>I'm a paragraph tag.</p>

This renders to:

I'm a paragraph tag.

A paragraph tag is probably the most basic HTML element you can have besides a div tag. But don't worry, we'll be covering many HTML tags in-depth over the next few lessons.

Everyday HTML Elements

Everyday HTML elements would be the elements that are your bread and butter. Mmm... butter... Ahem, you can't get very far in building an HTML page without these elements. A p tag would be a great example of one of these. Everyday HTML elements are:

  1. Paragraphs
  2. Headings
  3. Links
  4. Divs

There are other commonly used HTML elements, but the above 4 are tags you really can't escape using on just about every HTML page you'll create ever. We've already looked at paragraphs, let's look at the others. We'll start with headings.

Headings

Headings are tags that are commonly used to place titles at the top of sections of your webpage. The text above this paragraph is actually a heading! Headings come in 6 different sizes. The bigger the number of the heading, the smaller the size. Here are a few examples:

<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

These render to:

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Generally, h1 tags are reserved for page titles. As content sections nest inside other content sections you begin to use the next step down for your heading. So the first nested heading would be an h2 and so on...

Links

Links are tags that allow you to make connections between webpages. They are the glue by which the internet is held together. Click a link and it will shoot you to whatever page is in it's href attribute.

HTML links shoot you to other webpages

Yes, something like that.

Links are also commonly referred to as anchor tags or a tags. They have content text just like a p tag but also have an href attribute that points to the URL of the page to which the link goes. Here is an example:

<a href="#">Click me!</a>

This renders to:

Click me!

For the purposes of simplicity, the href was set to # to not remove you from this site. However, if the href is set like this anchor tag leading to MDN documentation you'll see it takes you to the Mozilla docs for anchor tags.

Links are by far one of the coolest out-of-the-box features of HTML.

Divs

The div tag is another common HTML tag that you'll see everywhere. It is so common perhaps because it is also a bit misunderstood and overused. Let's talk a bit about what a div tag is.

A div tag is just a generic divider. It is meant to contain basically any content, even other div tags. It also is used for the purpose of dividing content from other content. Hence, the name div. Here is an example:

<div>I'm just a lonely div.</div>

Which renders to:

I'm just a lonely div.

Neat huh? Eh... you might have heard of the term divitis. This comes from the tendency to overuse div tags...

<div>
  Main section
  <div>
    Other section
    <div>
      Sub-section section
    </div>
  </div>
  <div>
    Even more sections
    <div>
      Sub-section section
    </div>
  </div>
  <div>
    Again with the sections
    <div>
      Sub-section section
    </div>
  </div>
</div>

By examining the above markup you can see how overusing div tags can start to get confusing. Luckily, HTML5 gives us some great semantic tags we can use instead of div tags to solve this problem! We'll be learning about those in the next few lessons.

Shay Howe: Getting to Know HTML

Now you have an idea of how HTML works and have been introduced to the most commonly used tags. Next, your task is to read through Shay Howe's tutorial on HTML basics. He'll take you through the differences between inline and block tags as well as explain and walk through using other types of tags. There are some great interactive code examples too!

Code Review

The important bits of code from this lesson

< !-- Paragraphs -->
<p>I'm a paragraph tag.</p>

< !-- Headings -->
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

< !-- Links -->
<a href="#">Click me!</a>

< !-- Divs -->
<div>I'm just a lonely div.</div>

Wrapping Up

The basics of HTML are the building blocks that you'll be using "day in and day out" throughout your existence as a web developer. They might be a bit easy, but that is why we call them the basics! This lesson was most likely review for you but rest assured that a more detailed look at semantic HTML tags and their usage is merely a click away.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: HTML5 Semantic Tags