Anatomy of an HTML Tag
This article is intended for anyone who needs or wants a simple primer on HTML. If you know HTML at all this will be too remedial for you but if you don’t this will help you understand the basics and provide you with a foundation for more research.
The only assumptions I make in this article are that you understand that you write HTML in an editor of some sort (notepad, dreamweaver, the WordPress HTML editor) and that HTML is rendered or interpreted and displayed by a web browser.
HTML stands for “Hyper-Text Markup Language” which simply put means that it is a way of marking up text allowing you to format it’s appearance in a web browser and enabling text to link it to other content. In order to markup the text to tell it how we want it to look we use HTML “tags” around the text we want to alter. In almost every case, it is good practice to have a start tag and and end tag, otherwise your page can get messy because the web-browser (FireFox, Safari, Internet Explorer) won’t know where to end the formatting. As I implied, there are a few exceptions to this that we’ll ignore for now!
HTML tags are made up of a few basic components:
- Angle Brackets (the greater than & less than symbols “<” & “>”) The “<>” tells the web browser that “this is an html tag.”
- Names: The name of the tag that is usually an abbreviation of a word or phrase that says what it does.
- Attributes: attributes are specific to tags and add additional information telling the browser what to do in the context of that tag.
- Attribute Values: Very specific information for a tag attribute (don’t worry we’ll show you examples)
- Default Values: What the tag will do if no attributes with values are specified.
Let start with a really basic example. One of the most common things you’ll want to do with text is make it bold. This is easily accomplished with an HTML tag. Actually there are two tags you can use for this..
<b></b>tags wrap around the text I want to bold so to make the world bold in this sentence bold, in every case I would do this: <b>bold</b>. Technically, the <b></b> tags are deprecated, which is a fancy way of saying you can still use them but there is a preferred way to do this and the <b></b> tags may not be supported at some point in the future. The second and preferred way to bold text is to use the <strong></strong> tag around your text. Strong really has more meaning in that it tells the browser that we want to emphasize the text. This is also called semantic HTML.
Pretty simple eh?! I just put an opening angle bracket, the name of the tag (in this case “b” means “bold”), a closing angle bracket, my text and a closing bold tag. This is also a good example of why it is important to use open and close tags, if we didn’t use the </b> to end the bold area then all of the text in our document would be bold until the browser encountered a </b> tag… Probably not what you want.
Now let’s look at using attributes and another tag. We’ll start with the paragraph tag. Paragraph tags identify paragraphs in your content and by default create a break or vertical space after the end paragraph tag so that your document looks pretty when the next paragraph starts rather than mashing all of the text together. The paragraph tag is about as simple as the bold tag and looks like this:
<p> </p>.
Now, let’s say for some reason we really want to make a particular paragraph stand out by making it the color red. Now we need to ad an attribute to our paragraph tag!
The “color” attribute is applicable to many tags and is exactly what we want to use in this example but before we see an example there is one more thing you need to know, the attribute value should be enclosed in double quotes or single quotes (sometimes coders call these “ticks”). For the most part (until we get into javascript or php or other programming languages) it doesn’t matter which one you choose, just be consistent. If you choose double quotes, always use double quotes. For the record, most browsers will still interpret your code just fine if you don’t use quotes but it’s not a good practice). Now, back to HTML…
Our red paragraph is going to be enclosed in tags that will look like this <p color=”#ff0000″>paragarph text here</p>.
Whoah! What is with the #ff0000???? Ok, relax… I could have just used “red” but that isn’t the best practice for identifying a color. The #ff0000 is called a hex value (short for hexadecimal) and hex values like that are used to represent colors. You can use some basic colors like “red”, “blue”, “green”… but when you get into really specific colors (and there are millions of shades) you use hex values because they are more precise. But that is another conversation.
One last tag and this lesson will be done. One of the most commont things you’ll want to do is link your text to another page or site. To do that we use the anchor tag which looks like this: <a> </a>… however we need to tell it where we want it to link to, which means using an attribute. In this case the attribute is the “href” attribute which means “hypertext reference.” So to create a link to vsellis.com you would create an anchor tag with this website URL as the address like this: <a href=”https://vsellis.com”>vsellis.com</a>. That’s it! Notice a couple of important things:
- As mentioned we have a start anchor tag and a closing anchor tag
- We used double quote around the attribute value
Advanced Tip: The text that you are making a link should have contextual meaning. Don’t use things like “click here” rather link the name or an accurate description of what the site goes to. For example, if you have the following sentence:
“Click here to download the report now!” with “Click Here” as the link
Change it to say “Download the ACME Corporation Quarterly Report” with “ACME Corporation Quarterly Report” as the link. This is more logical for people when reading it, more ADA (Americans with Disabilities) compliant and better for Search Engine Optimization (SEO, more on that later).
There are lot’s of things you can do with HTML, to learn and experiment with specific tags, visit w3schools.com HTML Tutorial.
If you’re just starting out with html this is a good start. For a complete HTML reference visit here.
Matt, thanks for the heads up, that was actually an auto-replace mechanism for certain keywords that got it wrong. Fixed…
The link above, “WordPress”, which is supposed to go to where we can learn more about, or maybe download, the WordPress HTML Editor actually goes to your article on the definition of “canonical” plugins. I just thought you should know. Sincerely, Matt Galbraith (mattcalled).