HTML Tutorial #1: What are HTML Tags?
Looking for an amazing yet affordable theme for your site? Join Elegant Themes for the all-inclusive price of $39, and you're only paying 50 cents per theme!
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.
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:
- Can you identify the opening portion of any of the tags?
- Can you identify the closing portion of any tags?
- What self-closing tags, if any, did you find?
- 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.