Welcome to your first class on understanding the HyperText Markup Language (HTML). HTML is the language used to build websites. When a web page is delivered from a server to you, your browser doesn’t see what you see. Instead, it sees a series HTML tags, interprets them according to specific standards, and then displays a graphical representation of that code on your screen. In this HTML tutorial, I’m going to focus on answering one simple question which should provide you with a foundational understanding of HTML: What are HTML tags?

Before you feel overwhelmed like this is going to be over your head, hold on. We’re going to start with the most basic understanding of how HTML works and in later articles we’ll then expand on this foundation. Don’t worry about trying to understand everything all at once. Read it over. Think about it. Then read it again, if necessary.

Today your only assignment is to walk away from this article able to answer this one question: What are HTML tags? If you can do that, then you’ll have no problem moving on to HTML Tutorial #2: HTML Tag List & Descriptions (coming soon). And, of course, don’t forget that you can always ask questions below and I’ll be happy to walk you through this learning process.

Although many of you are using a content management system like WordPress with a purchased theme, a good understanding of HTML will allow you a great deal of flexibility as you work to customize the way your site looks and feels.

What are HTML Tags?

The first and most foundational concept to understanding the nature of HTML is to understand the structure of html tags. Below you’ll find a few notes that will help you get started.

  • HTML tags are specific elements in a web document that define the layout and structure of the site.
  • HTML tags contain two parts: the opening portion <div>, and the closing portion </div>. Notice the forward slash at the beginning of the closing portion. This tells your browser that we’ve reached the end of that element. There are a few tags that only contain one portion, but they must still be closed out using a forward slash to identify their end. For example, the <br /> tag does not require a second portion. It is ‘self-closing’ but still requires the forward slash at the end.
  • HTML tags can contain information within them. For example, this is a header element with some text inside of it: <h3>What are HTML Tags</h3>. When printed to your computer screen you will simply see a header like the one immediately above this list of notes that says, “What are HTML Tags.” In later lessons, we’ll talk about styling your elements to get them to look unique like the headers here at Site Sketch 101.
  • HTML tags can contain attributes that define information about how they should be displayed or how they should function. For example, an anchor tag, or link tag, will not function properly unless you define its location using the href attribute:
    <a href=”http://www.w3schools.com”>W3 Schools</a>
    In this example, we’ve created a link to Google’s homepage that will simply appear to a user like this: W3 Schools.

Practical Exercise

To see the structure of html tags in action, simply right click in the middle of a web page and select, “View Page Source” (or something similar depending on your browser). When you click this link, you will see a text document filled with line after line of HTML. Scan through it and look for the structure that we’re talking about here.

As you look through the code in front of you, try to answer the following questions:

  1. Can you identify the opening portion of any of the tags?
  2. Can you identify the closing portion of any tags?
  3. What self-closing tags, if any, did you find?
  4. Do you see any attributes listed on any tags? What attribute did you see?

Share you answers in the comments and don’t be afraid to ask any questions that you might encounter.

Nicholas Cardot

About Nicholas Cardot

It's my personal quest to enable every person that I can to unlock that dormant potential concerning their online influence. Also, I'm a geek.

7 Comments

  • Diane says:

    This was an excellent article on HTML. It was written in a way that helped me to understand how it works a little bit better.
    I had fun doing the exercise that was included. My answers follow:
    1. I saw an opening title tag.
    2. I also saw the closing title tag.
    3. didn’t see any self-closing tags.
    4. a href=”http://www.bhg.com/advice” rel=”nofollow”> I saw the href attribute and the rel attribute.

  • I must admit that on seeing this article a feeling of dread came over me. I am severely technologically impaired. I often try to tinker with these things on my sites without really knowing what I am doing.

    To my relief, this was the first tutorial of its kind that I was actually able to follow and understand. I know its only the first, most basic part but if you continue in this vein I might actually learn a few things.

  • saha says:

    Excellent article. Perfect blog post for the person who wants to learn HTML. It’s really feels good to read and understand such informative post. This info is very useful for newbies. Thanks for this article.

  • Sergio Vasco says:

    I think this is a wonderful way to introduce HTML to beginners. Since it is going to be a trend in the future, its high time people get to know about HTML and CSS. I mean everyone, not just bloggers and webmasters.

  • This is a very nicely written article. I am starting a web design site where I will be doing html, css, php, and javascript tutorials and videos. This gave me some good ideas on how to structure the articles, I will write. Thanks!

  • mary says:

    This is the 1st time since I taught myself a little HTML that I heard what’s between the greater than and less than symbols as ‘Tags”. I love learning!

  • steven says:

    this is the right way to introduced to the newbies on how to code in html. great post. thanks

Leave a Reply