Imagine picking up a magazine written in a language you’ve never seen. The words would be meaningless to you, but you would still be able to recognize some familiar symbols in the articles. You would see quotation marks and know that someone is saying something. You would see text in parentheses and know that something is being explained. You would see a question mark and know that a question is being asked. Even though the words don’t necessarily mean anything to you, if I asked you to pick a random sentence from the first paragraph you could do it. If I asked you to pick a random quote from the article you could do that too. The key is in understanding the punctuation marks.
Fortunately, HTML is a lot easier to understand than a foreign language. And just like punctuation marks used in written language, the rules of HTML follow some basic rules. If you can follow punctuation marks, you should be able to follow HTML syntax.
For starters, let’s look at the basic building block of all HTML code — the tag.
HTML Tags
The building blocks of HTML are called tags. As you’ll see in this article, some tags come in pairs while some stand on their own. You know you’re looking at a tag when you see text enclosed in a less-than sign (“<”) at the beginning and a greater-than sign (“>”) at the end. Those two signs mark the beginning and end of the tag.
The stuff in the middle defines what the tag does, in two parts: the tag identifier and the attributes. We’ll cover attributes later in the article. Here are some of the most common HTML tags and their meanings:
- <H1> – Level 1 heading tag (used for the main page heading)
- <p> – Paragraph tag – identifies the start of a new paragraph
- <div> – Division tag – identifies a distinct section on the page
Now let’s look at tags that work in pairs.
Tag Pairs
Most HTML tags have an open tag and a close tag. In the grammar world, think about how you use parentheses or quotation marks — there’s one mark to start enclosing a section of text, and a complementary mark to end the section. You have a left parenthesis to begin an enclosed section and a right parenthesis to end the section. HTML pairs work the same way. But how do you tell the difference between a start tag and an end tag?
The difference between a start tag and an end tag is the forward slash (“/”). A start tag contains the less-than sign, tag information and a greater-than sign. The end tag adds the slash immediately after the less-than sign.
Let’s look at a common tag to see how this works.
The heading text on a page should be enclosed in H1 tags. So let’s build our heading:
We start with the open tag: <H1>
Now we add the text that will show up on the web browser: This is my page heading
And now we put in a close tag – note the forward slash: </H1>
So here’s our entire line with start and end tags:
<H1>This is my page heading</H1>
Just like with paired punctuation marks, pairs of tags can contains other tags inside of them. In the HTML world this is known as nesting.
Nested HTML Tags
If you remember your grammar rules, you know that if you nest punctuation, you have to complete an inner pair of punctuation marks before you can complete the outer pair. So for example, if you have a quote inside of a quote you would write:
John said, “Hey Mary, what do you think of the phrase ‘get real?‘“.
Here you see we had to close the single quotes around ‘get real’ before we could close the double quotes around what John said. HTML nesting works the same way. You have to close the inner pairs of tags first.
So if you had a section of HTML code that starts like this…
<font color="red">Some red words and now this word is <strong>bold
…you first need to put in a closing “</strong>” tag before you can put in the closing “</font>” tag.
So this would be wrong:
<font color="red">Some red words and now this word is <strong>bold</font></strong>
And this would be correct:
<font color="red">Some red words and now this word is <strong>bold</strong></font>
For the most part, you can nest any tag inside any other pair of tags. Some tags don’t come in pairs, but are self-contained.
Self-Contained HTML Tags
Like punctuation marks at the end of a sentence, self-contained tags don’t come in pairs — they are self-contained, like a question mark at the end of a sentence. A self-contained tag starts just like any other tag, with a less-than sign and the tag identifier. But the end of the tag, instead of just having a greater-than sign, also has a slash before the end. For example, an image tag looks like this. Note the “/>” to close the tag:
<img src="images/myImage.jpg" />
Regardless of whether you’re working with a paired tag or a self-contained tag, you will frequently find information beyond just the tag identifier. This additional information gives the web browser more specifics on how to display parts of a web page.
HTML Tag Attributes
While every basic tag will begin with a less-than sign and contain a tag identifer, some tags also have additional attributes. The easiest way to spot an attribute is to look for an equal sign (“=”) inside the tag. Where there’s an equal sign, there’s an attribute. Let’s take a second look at the self-contained image tag:
<img src="images/myImage.jpg"/>
As you can see, this tag contains an attribute called src, and the value of the attribute is “images/myImage.jpg”
Let’s look at another example, this time with a tag pair. Here is a font tag, defining how some text should display:
<font color="blue" size="12px">Text in blue, 12-pixel font</font>
So this is a font tag with two attributes: color and size. Note that all the attributes are in the opening tag. The closing tag doesn’t have any attributes. If you think about it this is perfectly logical, since the web browser needs to get all the attribute information BEFORE it renders the next part of the web page.
Now that we’ve looked at all the pieces, let’s review how they all work together.
Put It All Together
So let’s review the basics of reading and writing HTML code:
- Every tag begins with a less-than sign (“<”)
- Every tag ends with a greater-than sign (“>”)
- Every tag has an identifier immediately after the opening less-than sign
- Tags may have attributes, easily identified by the equal sign (“=”)
- If you have a tag pair, the format is: <tag>…</tag>
- For self-enclosed tags, the format is <tag/>
- When nesting tags, always close the innermost tag pairs first
Keep these basic rules handy and you will soon find that reading HTML is almost as easy as reading a magazine in your native language — you just have to understand the syntax rules.
