What is an HTML attribute, tag, & element?

As I prepare to write the next post in the “My First Website” series, it dawned on me (after my sixth cup of coffee) that I need to explain some website design jargon — specifically: what is an HTML attribute, element, and tag. I need to explain these terms because I’ll be using them quite often as we work through the series.

Of course, if you are not following along in the series you’ll still need to know what an HTML attribute, an HTML element, and an HTML tag are. Without this knowledge, trying to understand the other lessons and tutorials here on NWD will just make your head spin in a very unpleasant and slightly nauseating way.

Let’s begin:

What is an HTML Tag?

HTML tags are used to tell a browser how to display text, images, forms, and other things that you see on a website. All HTML tags have an opening and a closing tag. These two tell the browser when to begin and end the desired effect. For example: links (which is what you see in the image below), bold, italics, header text, paragraph text, and so on.

What is an HTML Attribute?

HTML attribute gives a little extra information to the tag. In the image below, the HTML attribute supplies the anchor tag (the tag used to make a link on a website) with the URL where you want the link to go to. Some tags don’t get any attributes. The <strong> tag (makes text bold) and the <em> tag (makes text italic) are two examples.

What is an HTML Element?

An HTML element is simply the whole block of text from the opening tag to the closing tag.

Your homework

Go to any website and right click anywhere on the page (but not on an image.) In the context menu that appears choose “View Page Source”. This will allow you to see the source code for that web page. Then, scan through the code and try to spot the different opening tags and closing tags, any attributes, and look for the larger blocks that make up the full HTML element.

(You can read more about HTML here.)