What are HTML Elements?

Hello Friends,

You are welcome to our HTML series,

I hope you went through whatever I have explained to you regarding the attributes in our last session and practiced how to write the tags and attributes combined.

While practicing, if everything runs successfully, it is well & good but, in case you faced difficulty or got stuck at any point, you can let us know at forum.learnvern.com.

We will try to solve your problem and revert to you as soon as possible.

Our last topic was tags and attributes.

Today we will learn HTML elements.

As we have already learned the Html tags we will move further based on the same tags.

Today we will go through the HTML elements.

So let us start today's session.

As written here, what elements are?

The definition of elements can be,

The elements are responsible for creating web pages and defining content on that web page.

I repeat elements are responsible for creating web pages and defining content in the web pages.

If we are designing or writing the web page, then to show all the things which are coming in that webpage & to show these all things, the portion of the HTML we use are called elements.

For example, as we saw in the last session, whenever we need to show something in large font, then for that font we use the H1 tag & here H1 tag is the element.

Next,

An element is a collection of a start tag, attribute, end tag, and the content between them.

If I start the H1 tag, write, "hello how are you" inside it and close it.

I Started H1, wrote "Hello how are you" and closed it.

This complete line becomes the element.

I am opening the sublime text.

And usually under our code body text and under the H1 tag;

If I write "hello, how are you" inside the body tag & under the H1 tag & save it.

Starting the complete line from h1 to /h1 becomes the element.

Not only this line, if I define something else inside H1, l

Let's say style=color: blue.

So, if I give the "style" attribute and color to the H1 tag, I want the font to look blue. Then this complete line we wrote in HTML code becomes the element, because the complete line starting from h1 to /h1, is responsible for showing this content in the browser.

The procedure, method, or line which is used to show our content in the browser as per our requirements is called the element of an HTML program.

So, if I take any p tag in the same program and write "I am fine" in the p tag.

So, this also became one of my elements (H1 tag) and the p tag is my other element, so both the h1 and p tags will be the elements & I have a total of two elements.

Third thing

If I take two elements in the body tag, it will also become an element collectively.

In this way, by collecting different-different elements the program is made, that is our HTML elements.

In other words, elements collectively form a program.

So currently, in this scenario, when HTML elements are collected, a web page is formed.

Let us go back to the slide.

That was the definition of the elements.

Now, there are different types of elements.

The first element is the Void Element.

The elements in which we do not pass the content.

I repeat, any such element in which we do not pass the content is called the Void element.

For example,

The br tag & the hr tag.

As we learned in our tags session,

There are a few tags that are called unclosed tags.

By unclosed tags, we mean, these tags don't need to be closed.

We saw two examples for these tags, the br and hr tags.

Except for the br and hr tag, the link & the meta tag, these 2-4 tags need not to be closed, & and there are no closing tags for these.

The link and meta tags used in header tags can be used only once & we can use the br and hr tags multiple times based on our page design.

So, br and hr are the tags we will not close & no content is included in this event. So based on that, these elements are known as void elements.

Let us move to our program.

Here I have taken h1 and p & write "I am fine (space) thank you" in the p tag and save it.

Now, I will go to the path where this program is present and double click to run this program in chrome.

So here is, "hello how are you" shown in blue because I have passed, the color blue as the attribute.

And this is the p, "I am fine. thank you".

Currently, we need to focus on "I am fine. thank you", so I will remove this h1 tag from here and keep only p, "I am fine. thank you".

What we have to learn here now in today's session are the elements.

First is the void element and its examples are the br and the hr.

So, if I use the br tag here in between, these two will break into two lines.

So, save and run.

As you saw, I didn't write slash br after the br tag because it works without closing the tag, and it also doesn't need any content.

So here we didn't take two things, neither the slash br tag nor written anything inside the br tag.

So the tag in which no content and closing tag are included is called the void element.

The second example of the void element is the hr tag.

Let us say I have used the br here in between now,

I will write this line another way.

Let us say,

P hello slash p

P I am fine

Again, P Thank you

Okay!

I have taken a total of three lines: Hello, I am fine and thank you.

We can see a line break between these two,

The "I am fine" is below the "hello" because we write p in different lines, one below the other.

As "p" is the paragraph tag and is a block element, & we will learn it in the next slide.

We will learn why instead of being adjacent to the "hello", "I am fine" is shown in the next line.

So, if I write this adjacent to it and run the program even after that, the "I am fine" is below and not shown adjacent to the "hello".

And similarly, if I remove this and write it here, it is still shown below and not adjacent.

So, P is a tag that adds the things one below the other, and I will explain this in block elements.

Currently, we are learning void elements where the content and the closing tag are not included.

So, if I want to get the content of these different p tags in the next line, I will use the br tag.

But as it's already shown in the next line & I want to add 2-3 more lines gap below, I will add the br tag three times.

If I write the "br" tag three times,

Three line breaks will be added here.

So, I will save it and run.

Here, even if we wrote hello and I am fine in one line but because we have used br tag three times, we got 3-line breaks here.

That means it is going in a new line three times.

The thing we need to learn about the void element is, that we can use the br tag without content and the closing tag.

Same way, if I want to show a line between "I am fine" and thank you,

I will use the hr tag here & it will give us a horizontal line.

So here, we can see I am fine, followed by a long horizontal line and thank you.

Here as I wrote the hr tag the browser showed a long line.

Also, in the hr tag, we didn't need to write the content, and not added something like /hr. So, this indicates that br and hr are the tags in which content is not included & that's why these two tags are void elements.

Now we will learn block-level elements.

When we define blocks in the browser,

Like we put things on the surface of a table, and if we put things starting to end on the surface.

When we reach the end and want to put more things on it, we cannot add them because the surface will be full.

So, in that case, the element will fall below as the table is full & we cannot put anything else.

The same concept applies to the browser, the things that are defined as block elements or block structures at the end of the tag rest stuff will display in the next line.

For example, I repeat, block-level elements when defined, take the 100% width of the screen, all the things we add after it, show up after that 100% line.

We will see this with the help of an example,

The first thing is that we consider left to right on this screen, the direction is left to right.

That is why the hello got printed on the left side instead of the right side.

The browser had both options, it could have shown on the left, right or the middle & it can also start from the right.

But no, the screen reads and prints left to right.

Based on that,

Soon as we write anything in the body tag, those things start getting printed from left to right.

That is why, as I wrote hello here, we can see it on the leftmost corner of the body tag. The rest of the things will be shown below.

When we were learning the void elements, we saw that I wrote the p tag "I am fine" adjacent to hello, still it was shown in the line below.

Let me do the same,

Let me put the p tag after removing the three br tags and putting this here.

I have removed the rest portion.

So, I have written three p tags (three-paragraph tags) one after the other. Hello, I am fine, thank you.

I saved it and run,

Still the "I am fine" is below the "hello" and "thank you" is shown below them.

That means, after one paragraph, the second paragraph starts below that & this concept is called a block.

If one element or tag just like this p tag will take 100% width of the browser, & any element after that like another p tag will be shown below that in the next line, again if anything is written after that it will show in the next line.

There are defined elements and tags which use block structures.

I repeat, a few tags are there that use block structures, whereas some tags do not.

So, in the future, whenever you create any website or web application, based on this you will decide which tag to use, for using this format.

So, we use the block elements while creating elements and designing anything where I want one thing in a line & the rest of the things start after that from the next line.

There are more examples of block elements like div, let us see that too.

Div is also a tag.

Div stands for division & here is the div tag, we can add anything in this tag & I am adding any free text like "HI".

If I write "hi" inside the div tag and run the program,

it will start from the next line because the p tag is used before that.

If I use the div tag exactly after this, it will still show after the p tag & from the new line which means the p tags are the block elements.

Now, I will add one more div after the previous one and write "how are you" inside it.

I will save and run it.

So, "how are you" is shown after and below the "hi" in the new line

The things which occupy the complete row and show up from the next line.

Like this hi, the first div tag occupied the complete row after that the space after "how are you" is occupied by the second div tag.

So, these div tags are block-level elements & if we want to see how much space the div tag has occupied.

For that, we can add some property inside the div tag like the style to identify how much space has been occupied by the div tag.

I am using the background-color property inside the style and selecting blue for it & I Will use the same for the second div tag but with green color and run it.

So, as we can see even if the first div tag in which we wrote hi is small but it has occupied the complete row or the complete width of the screen.

The second div is the how are you & it also has occupied 100% width that indicates, the div, p, and H1 to h6 are all block-level elements.

That means, that when we write the tags and define the elements in the web page, they will not take the space according to the content but the complete 100% width.

So, these were the block-level elements.

After these, there are the inline elements & which are the opposite of the block-level elements.

If the block-level element enters the next content in the new line, inline doesn't do that.

Inline elements start the next content where the last one ends.

So, the basic difference between block and inline elements is that block elements occupy 100% width of the screen while the inline elements do not occupy 100% width but only the space according to the content added.

For example,

we took a, b, and label as three examples

Let us learn using them.

I am removing all this as of now.

Here let me write the "a" tag inside that I am not adding any reference & when we define a null reference, we use a hashtag #, mostly we use hashtags only.

I am writing learnvern inside it.

I saved and ran it.

That is learnvern & I added a link to the webpage.

After this, I will add any text, like "this is learnvern's URL". That the above URL is of Learnvern.

Let me run it

Even if I wrote them in separate lines in the editor,

But while running in the browser, they are shown next to each other.

So, this element is inline.

A tag is an inline element because it has occupied the space according to the content in it

So how much content is there in the "a" tag, it is learnvern.

So, it will occupy the space according to the length of "learnvern" & only this space is given by the "a" tag.

If I write learnvern three times, the "a" tag occupies the space needed to show learnvern three times on the screen.

So, a tag is an inline tag, which means when the "a" tag ends, it shows the next writing immediately after its end and doesn't start with a new line.

Let us say I write "this is learnvern's URL" inside a label tag label is also a tag & is used to show something.

After saving it, I take "this is learnvern's URL" as a label.

Now I want to add something before it,

Let's say I write, click here.

I want to highlight it and show it in bold, so I will add a "b" tag.

So, click here, on the learnvern's URL & the label is "this is learnvern's URL".

Run

So, the "click here" is shown in bold but, same the anchor tag after the click here is not showing up below.

The same happens when the anchor tag is ending,

The label is not shown below.

So, these are examples of inline elements.

So today, we learned three types of elements.

The first was a void element,

the type of element that need not be closed and needs no content.

So, void elements are such elements in which no content and closing tag are present.

The second was the block-level elements in which the content and closing tag are present but, when block-level elements end, the next element starts from the new line.

Lastly, the inline elements,

The inline elements are those which allow starting the next element exactly after that.

So inline elements allow multiple elements in a single line, block elements occupy 100% width, and throw the next content in a new line.

That was today's topic regarding elements. The next topic we will see is formatting the text and comments.

How can we write the comments, along with whatever text we add, and format it in multiple ways?

And we will learn the available number of tags related to formatting with the formatting topic.

So, I hope that with the block-level and inline-level tags we learned today, You will try and practice on your own in your text editor.

I wish it will run successfully, but if you get stuck anywhere and they are not running or have any queries.

You can let us know at forum.learnvern.com.

We will resolve your queries and try to reach you as soon as possible.

Thank you!