HTML Tags and Elements: Web Development Tutorial Series Part 2

html tags and elements

HTML Tags and Elements

What is a tag?

An html tag is basically the unseen keywords within a web page that gives instruction to the web browser of how to format and display the content inside. Most html tags have both an opening and a closing tag. The content in between these two tags is what gets formatted. For example, <p>Some sample text to be displayed.</p>. There are two tags in this html element (We’ll get to elements in a minute). The <p> is the opening tag, and the </p> is the closing tag. The only difference between the opening and closing tags is the addition of the forward slash ( / ). The tags in this example are p tags or paragraph tags. This set of tags defines the content inside as paragraph text. It’s also important to know that <p> will do the same job as <P>. The capitalization doesn’t matter. Html tags are “case insensitive“. Although, some web developers use all CAPS. in their html tags; it is good practice to use lowercase. It simply comes down to what you prefer to do; for the most part. If you are writing XHTML, then you have to use lowercase because it’s required. Xhtml is just another version of html, and we won’t discuss it in much detail in this lesson, but bringing up that it requires lowercase tags is important now because it might be better to get used to writing in the same manner for all versions of html. Throughout these lessons, we’ll be using lowercase as it’s easier to read and is considered good coding practice. See the list below for a few examples of html tags with opening tags, some content, and closing tags.

Examples of HTML tags

  • <h1>Heading 1 Tags</h1>
  • <div>Divider Tags. Other tags get embedded inside of these tags. Used to divide sections of a web page.</div>
  • <em>Emphasis Tags. Used to emphasise or make the text inside italicized.</em>
  • <a>Anchor Tags. Defines the content inside as a hyperlink.</a>
  • <body>Body Tags. Contain all of the visible content on a web page. i.e. headings, paragraphs, images.</body>

What is an element?

An html element is everthing from the opening tag to the closing tag. All of the examples in the list above are known as html elements. For example, <h1>Welcome To Clear Coded Programming</h1> is an html element. When you hear someone talk about a p element, they are talking about the opening p tag, the content, and the closing p tag.

For the most part, html elements will have an opening and closing tag. But, say you add a few p elements to your html document and do not include the closing p tag </p>. They would actually show up correctly in the browser. This is the case with a few elements where the closing tag is considered optional. But you shouldn’t rely on this because you might get mixed results from one browser to the next. I recommend that you always add the closing tag to elements like this. This also brings up another point. The same document might not display the same from one browser to the next. So, when you are creating a web page, you should always run that page in a few browsers to make sure everything looks the same in each. There will be quite a few times where you need to make some alterations to your code, or even add what is known as a prefix to make your code run the way you want it to in a certain web browser. This issue comes up often in older versions of a web browser. As the code evolves, the browsers must adapt, and so older versions might not support newer code.

Empty Elements

There is another type of element, and that is the empty element. An empty element is one that doesn’t have any content. For example, the line break tag looks like this: <br> or this: <br />. There is no content and only ONE tag. You should also note that both of these tags will do the exact same thing, but one of them is “closed” in the opening tag itself. This is because of the additional space and / after the br. Since the release of HTML5, it isn’t required to close an empty element, but just like with the lowercase issue, I recommend closing empty elements as well. The better you write your code, the less likely you are to end up with issues in the future. Let’s do a small exercise using the things we’ve learned about in this lesson. See the images below.

Example html document named index.html

html tags

Displayed Example Page (Ran in a browser)

html elements

Whether you are using NOTEPAD++ or not, in order for you to run you html document in a web browser you need to save it as a .html file. We are creating an html document, so we need to save it as .html. This way the text editor knows what type of “syntax highlighting” to use and will be applied live as we write code. Syntax highlighting is parts of code that are colored differently depending on what the browser recognizes it as. In our example, all of our html tags are highlighted in blue because the text editor recognizes them as html tags. Also in notepad++, if you double click on an opening tag; the closing tag that is connected to it will also highlight. You can see how useful these features can be for a web developer. I have named the document index.html because the first thing that a web server looks for is a file named index. The index.html file essentially is the “Home Page” of the website. After you have the file saved, you need to run it in a browser. In notepad++, we do this by clicking Run in the menu at the top, and then choosing what browser to run the page in. NOTE: You must have the specific browser downloaded in order to run the page in it. Most text editors are pretty similar, so you shouldn’t have any trouble finding out how to run your page in whatever editor you’re using.

Let’s go over our example exercise now. Using the same “basic html document framework” from the INTRODUCTION TO HTML lesson, we have added a few types of elements. All of these elements go inside of the body element, because that is where we put our visible content (the content that viewers can see on a web page). First, we have an h1 element that has an opening tag, content, and a closing tag. The next element we have is a p element that does not have a closing tag. It still displayed when we ran our page, but like we talked about earlier, it’s better to include the closing tag. Next, we have a normal h2 element, And finally, a p element that does have the closing p tag. Inside of our last p element, we have three line break tags. These are empty elements and do not contain any content. Looking at our Example Displayed Page, we can see that this created three blank lines right in the middle of our paragraph text.

As you can see, there are many variations of html code that will work most of the time. By writing your code in a more strict way, i.e. adding the optional closing tag, using lowercase, and closing empty elements, you will avoid many issues down the road. You can also validate your html code with a markup validator to check for errors, etc.. Here’s one at W3C: W3C MARKUP VALIDATION SERVICE. It gives you the ability to check your code in a few ways. You can validate by entering a URL, a file upload, or direct input. That’s it for this lesson on tags and elements. Thanks for reading. I’ll see you in the next lesson where we’ll work with “nested elements” and proper indenting.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>Tags and Elements</title>
</head>
<body>
<h1>This is a heading 1 element.</h1>
<p>Although this p element will display, it is <em>better</em> to close the element.
<h2>Heading 2 Element</h2>
<p>This p element has an opening<br /><br /><br />and a closing tag.</p>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: