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
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
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
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
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.