Anatomy of an HTML tag
Let's define the Anatomy of an HTML tag and break it down into its component parts so that we can actually understand how they're structured and how we can use them. So we've written HTML elements like so.
So here we have the words hello world and they're in closed by an opening tag and a closing tag. And in between those tags is the content that we want to apply that structure too. So if you think bank to the days of marking down the manuscript, it's exactly the same as putting down a squiggly line underneath certain words or phrases and asking the publisher to make it bolded to affect the structure of certain parts of the text. Now, in this case, the publisher just happens to be our browser. So these tags make requests to the browser asking it to structure and display our plaintext in the way that the web designer wanted it to be shown.
Self Closing Tags
Now the other type of tag that we just saw are tags that don't have a closing tag. They're expressed simply like so.
And these are called self-closing tags and we've seen that with the break tag and there are a few more others that work like this also.
Now how do we find out if something requires a closing tag or is self-closing? Well, this is where we head to googling again. So if we have a look at the documentation for the heading elements, you can see that it says that both the starting and ending tags are mandatory so that you can specify which portion of your text you want to apply this structure to. Now, if we have a look at the <br> tag or the line break element, it says that it must have a start tag and must not have an end tag.
So this is how we find out how we write our tags.
<hr> Tag
Another element called the horizontal rule or the hr tag. And this will allow us to create these horizontal lines above and below our portion of text. You can see that our webpage now has two horizontal lines above and below the main portion of the text.
Output:
For this tag, it must not have an end tag. So this is also a self-closing tag.
Tags Attributes
You can make that horizontal rule is a little bit thicker. So how can we make ours look more like a thick element? On any webpage that you open in Chrome, you can simply right-click on the element that you're interested in and click inspect in order to look at the HTML and CSS code that's being rendered in the background by the browser. So you can inspect, horizontal rule, but in addition to normal <hr> attributes they've got also all of this going on afterward.
What exactly is that?
Now we know that the first part of the tag is the HTML element and its hr or whatever it is that you want to use. Now the second part inside the angle bracket or inside our tag is new and this is called an HTML attribute and it basically gives more information to the browser to specify modifications to that HTML element. So in this case, we're saying that we want a horizontal rule, but we want it in size three. Now, what does size three mean and how do we know that we have these HTML attributes available to us? We're going back to the documentation and get familiar with the structure of it and find out how to implement or do certain things.
In this case, the horizontal rule element has actually quite a few attributes, including aligning so you can specify whether if you want your horizontal line to align to the left or align to the right or be centered, you can specify the color of the horizontal rule, you can set whether if you want the horizontal rule to have shading or not, and you can also set the height in pixels of that horizontal rule, which is what we saw earlier on over here. So in this case, the reason why their horizontal rule looks different is that by default, only one pixel high or one pixel in size whereas theirs, if you inspect in the HTML, is three pixels in height and they've also specified no shade i.e. no shading to the horizontal rule.
So if you want to make your website a seamless copy of what we see here, then we also have to specify those attributes. So if you remember, the horizontal rule is a self-closing tag. And so inside the tag, we're going to make a space, and then we're going to specify the name of the attribute which we know from the documentation to be called the size attribute, and we're going to set it to equal three pixels. And then we're going to specify that it is no shade i.e. no shading. And we know all of this from the documentation. So now once our code updates, you can see that this brand new horizontal rule looks completely different from what it was before.
So now we've seen HTML elements that require an opening tag as well as a closing tag. We've also seen HTML elements that have a self-closing tag. And finally, we've seen that HTML elements can also have an attribute where you can specify modifications to the default element. Now, let's talk about
<center> Tag
A tag called the <center> tag to our HTML file allows your content to get align by center like given below,
Comments
This is a point where you can use a comment instead of in your HTML file.
Comments are portions of text which are marked out to be ignored by the browser. And they're usually places where you write notes to yourself or notes to fellow programmers who might be looking at your code. So in HTML, we create a comment by using the angle bracket, an exclamation Mark, two dashes, and then to close off the comment, we use another two dashes and a closing angle bracket. And everything in between here is a comment.
<!-- apply a size 3 to horizontal rule -->
You can see that usually it gets highlighted in a different color and none of it gets interpreted into the webpage. So this is where you can put sections for your notes. For example, self-closing tags. You can make it into several paragraphs just by putting the closing tag at the bottom. like
<!--
apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule apply a size 3 to the horizontal rule
-->
And you can write notes on the elements as we come across them and keep this for your own reference. By the time when you're ready to create your own websites, it will be a goldmine of a resource to jog your memory on all of the lessons that you've learned.
So in the next blog, we're going to be building our very first website and it's going to be really, really awesome because we're going to be using a real text editor and we're going to be putting that website live on the internet.
So there's all of that and more yet to come. So we'll see you on the next blog.
Comments
Post a Comment