HTML Elements and Tags

Elements and Tags

Hello and welcome back.

In this lesson, I would like to talk about HTML elements and text, and let’s start with the elements well elements are the building blocks of HTML.

All these components that you see on a document that is HTML all had body etc are HTML elements that

give meaning to the page content and describe the page structure.

Interestingly these elements are not visible on a web page.

What’s visible instead is only the information that we provide inside these elements like here on the web page.

We don’t get to see the title and the H1 elements stem cells but only the content inside so a question

you might want to ask is Why do we add these elements and they’ll not be visible on the web page.

The reason is that the browsers leave these elements to understand and load the page content structure properly.

And let me tell you how this happens while a web page is loading the browser creates a model of our

the document which is known as the document object model tree.

The tree looks like this the browser creates this model according to our document structure as you can

see that we have everything inside the HTML element and that’s why we have this main H2 mill here.

Then inside are the head and the body elements.

So we have them here in the model to than inside the head element.

We have a title element and we can find it here as well.

And likewise inside the body element we have had a header and then further inside we have H1.

So the document is what we design and the dormitory is what the browser designs for its reference.

And with the help of these elements we provide the browser represents the content in the appropriate

way.

Elements and Tags

And let me show you with an example I go inside the body element

I add to each one element for heading and then I type inside.

Let’s say welcome to the website I now save the document and open in the browser

it displays the content big and bold just like a heading should appear.

Now let me add another element let’s say P for paragraph

and type something inside

I see it again

and refresh the content this time does not appear big and bold or just in regular font size.

This is because each element means something to the browser and each one means a heading the browser

therefore displays a content inside it like a heading while on the other hand B means paragraph and

the browser shows it as a paragraph in addition to that.

Notice that it follows the same structure in our document.

First comes the heading and then comes the paragraph and in the browser also First comes the heading

and then comes the paragraph.

If that is the order and bring paragraph first and heading second

displays that paragraph first and heading second, therefore, our document structure decides that our model

created by the browser.

Now one thing that you’ll be doing most of the time while writing each diamond code is adding one or

more multiple elements inside an element, for example, we have all the elements inside the HTML element

and we have some elements inside the head element.

And similarly this body element and inside this element, we have added the heating element and the paragraph

element.

All these are examples of nested elements now within a paragraph element.

Also I can add another element as well.

For instance before and after this for the website, I can add the anchor element represented by the alphabet

eight.

And we use it for hyperlinks to another page or website.

I’ll be explaining this element more in detail in the coming lessons.

But for now I’m just using it as an example.

I now type inside the linking web page using each traffic attribute and within codes.

Any website let’s say Google dot com

I now see the document and then reload the web page you can see that the word is underlined.

And when I click on it I land on Google.com Web site.

So adding this anchor element inside the paragraph element is another example of nested elements which

means elements inside elements.

Moving on let’s now talk about the tax bill you must have noticed that every time we add an element

in our HTML document rapid inside the angle brackets and then we also added one more time with an additional

forward slash.

These are known as tax and we call this starting one opening tag and this ending one that comes with

a forward slash.

We call it a closing tag.

So using the tax we indicate the starting and the ending of an element, for instance, the body tax starts

here and ends here and all the elements within are inside the body element.

Likewise, we have opening and closing head tax and HTML tax in the same way the paragraph starts here

and ends here.

And this anchor element starts here and ends here.

Now we’re learning about elements and tax it’s also important to know about the empty elements.

Well the empty elements are the elements that don’t require any closing tax.

And since they don’t require any closing tag they don’t have any content inside.

One such example of an empty element is to be at an element where B stands for a break.

And we use it for a line break and we type it as we are within the angle brackets.

And since it’s an empty element we don’t add an enclosing tag for it.

Let me try using it in the document I go inside the paragraph somewhere let’s say hereafter this word

have that I simply add a B attack without any closing tag.

I can see that after the word have these aligned breaks now and the remaining content has shifted to

the next line another example we have of an empty element is the H R tag where H R stands for horizontal

line and clearly we use it for adding a horizontal line and to show you if I replaced a b an element

by H R element again without any closing tag and save the document

and then refresh the browser.

I can see a horizontal line after the word has.

So in both cases, we didn’t have to add an enclosing tag or any content apart from the opening tag and

that’s what makes them empty elements well these empty elements are very few in number and that’s why

it’s easy to remember them in the coming lessons.

I’m gonna talk about more elements and other empty elements as well.

So keep learning and see you in the next lesson.

Also, Read

Leave a Reply

Your email address will not be published. Required fields are marked *