Comments in HTML
Comments are that part of our code that is not rendered by our browser. Let us take a real-life example to understand the concept of “comments” more deeply. Let you be working for a company where you are writing code but in the future, if you switch the company so the new developer working in your place of you so it will quite difficult to understand the code of the new developer if you did not use the comments in that code.
Because In the comments, A developer can tell about the code without any problem. A developer can write the topic name as well as other things in the code which helps to understand the code more easily than any other developer or by himself/herself.
Now, look at how we write comments in HTML.
Syntax of the comment is this:-
<!-- -->
We can write inside there to comment on anything.
Like I want to comment on my name
So this is the syntax:-
<!--Rachit Kumar -->
Tags
Let us take a simple example to understand the tags, like when we simply write anything in our HTML code so, the browser cannot detect or find out that it is a paragraph or it a heading or it is a subheading etc. So, To resolve this problem we have “tags” in which we can tell the browser what content inside the tag is of which category.
<>:- It is the opening tag.
</>:- It is the closing tag.
Some special types of tags are also in HTML named “Self closed tags”. These tags have opening or closing on one’s own.
Like, img tag which is used to take the image from the source is self-closed.
Now, Let us see if we want to give Heading to my HTML code.
So, there is a tag name <h1></h1>.
6 types of heading tags are in HTML.
If we want to give a paragraph, we use the <p></p> tag.
So various tags in HTML are used to contain the various kinds of data.
Elements
The combination of the tag and the content inside the tag is called Element.
Let us take a simple example to understand elements.
<h1>Rachit Kumar</h1>
<p>Lorem ipsum set all data </p>
We can say that these two statements are the elements in our HTML code.
As we see In these statements there is a tag and content combined so it forms elements.
Attributes
Attributes are special words used inside the opening tag to control the element's behavior.
And we can say that attributes give some extra power or features which help tags to do work.
Let us take an example to understand the attributes:-
Like <img src=” ” alt=” “/>
In this tag src and alt are the attributes which help the img tag to take images from other sources.
Entities
There are some reserved symbols in HTML like <,>. So when we need those characters so there are some special words with the help of them we can use those reserved symbols as a character in our HTML code.
Like <,> these characters are used as a tag in HTML but these are the symbol of less than and greater and there are more symbols.
So if we want to use them in our HTML we have to write < for less than and > for greater than. So these special words which we use are known as entities.
If we don’t want to write like that so we can use Hex-code also to access them like < is the code for = “equal to”. Like this, there is various entities code.
Emmets
In our HTML code, emmet is like a magical lamp. Emmet uses the abbreviations and short expressions depending on what is passed, and then dynamically converts the abbreviations into a full code.
We can also say that Emmet is the most essential tool of the code because it saves a lot of time for a programmer.
Let us take an example to understand the emmet briefly we want to write our HTML code in notepad in plain text. So, In this case, we can’t use emmet so we have to write all tags like the opening tag and closing tag and much more things itself. In this, It will take more time to write a simple code. But on the other hand, if we use emmet in our code so, we don’t need to write the opening tag as well as the closing tag, NO, we only write our tag name and press the tab key. It will convert this into a full code.
Like if we write p and press the tab key, it will convert into <p> </p> automatically, so if we use emmet in our code, It will save a lot of time for the programmer.
The first emmet code we write in our HTML is Boilerplate code.
We only write '!' and press the tab key only, our boilerplate code is ready.
So these are the benefits of emmets in our code.
The first code of emmet (Boilerplate code) is:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>