Understanding HTML Tags and Elements
Topics that we are going to cover in this blog are mentioned below.
What HTML is and why we use it?
What an HTML tag is?
Opening tag, closing tag, and content?
What an HTML element means?
Self-closing (void) elements
Block-level vs inline elements
Commonly used HTML tags
What is HTML and why we use it?
Before jumping to HTML directly first understand from where it comes. We know server response to the request sent by the users. But is that possible to give access of server to everyone? Answer is no, so how to handle the access, WWW(world wide web a standard for HTML,HTTP, URL structure) come up with the protocol of http(hyper text transfer protocol) which consists of http:// IP address or port / <file_name> format URL which helps the server to find the <file_name> and transfer it to client’s brower through application layer (OSI Model) by doing this we stop giving access to the server.
But the problem is not yet solved. Earlier the response that is sent by the server is not in readable format. Because server don’t know what is heading, what is paragraph etc. So, Tim Berners-Lee come up with the idea of Hyper Text, which is basically how a server treat the text in more readable and good format so language is called HTML now. You can understand the name of Hyper Text Markup Language(HTML).So, this language consists of tags which has a opening and closing representation <tag> and </tag> respectively, and name hyper text transfer protocol is for transfering those hyper texts over a transfer protocol.
After making the HTML, other developer also acknowlege this and later recognised by various browser.
You can see now how server was earlier and how it is now. we are going to see the tags of HTML and understand how a heading , paragraph , img tags etc are being interrupt.
What an HTML tags and what is opening and closing tags?
Tags define the format, structure, and meaning of content on a webpage. Opening tags are something enclosed in an angle brackets <name_of_tag> also know as chevrons, for example <h1> This is heading. Okay but the problem is to how much extent it is a heading? So, to overcome that Closing tags comes into the picture to define where a tag ends. For exampe : <h1> This is heading </h1>. Because if we don’t specify the closing of a tag than it will take everything inside that tag which is not preferable.
<h1> InsideTech </h1> : opening tag - content - closing tag
So, server didn’t render or show the tags they just show the content inside the tag in predefine or customised scaling and painting.
Now question is how a browser understand that the text coming from the response of the server is an HTML? its is done by server itself by adding a header to the file. The server who sends the HTML as a response are know as WebServers.
Header{
Content-Type: txt/html
}
//now browser starts to parse the incoming text as HTML parser.
// because server is still sending the text but in HTML format.
Why most of the website uses www in the start of the URL?
This is a classic thing to learn about a WebServer, which basically indicates the landing page of a website or where you can access public information. So, wwwbasically means it points to a WebServer of that particular organization that they have running for their domains. But some people just search by domain name or just the name, so in that case, it automatically redirects to the webserver of that particular domain, and this has now become the standard. But it's just a standard, not a rule; you can directly point to your webserver without needing to mention www. However, www is now the standard, so it particularly indicates that it will return the HTML.
What an HTML Element mean?
These are for making the structure and meaning of the content on a webpage. it consists of 3 components ,opening tag, content and closing tag. <tag> content </tag>. if somebody ask about what is the difference between tags and element then you can say that tag are the delimiter(<p> and </p>) used in source code while element including content and the attributes.
Self-closing (void) elements
Some elements are "empty" or "self-closing" and do not have any content or a closing tag example <br> is known as break tag which is used to enter a line break inside a <p> tag without using another <p> tag. Similarly <hr> tag know as horizontal line tag used to add a horizontal line in you content. <img> is also another void element. There are many more tags like them.
Block level vs inline elements
Characteristic Block Elements Inline Elements ---------- | --------
New Line Always start on a new line. Do not start on a new line.
Width Take up the full width available of their parent container by default. Only take up as much width as their content requires.
Height/Width CSS height and width properties are respected. height and width properties have no effect.
Margins/Padding Top and bottom margins and padding are applied. Top and bottom margins and padding are not applied (only horizontal).
Content Can contain other block-level or inline elements. Can typically only contain data or other inline elements.
Here you introduced with new terms like margin padding we will see that in css blog what they actually mean.
Let’s see Block Level and Inline Elements through diagram.
Commonly used HTML tags
Heading tag(<h1></h1>), paragraph tag(<p></p>), anchor tag(<a></a>), image tag (<img>), break line tag (<br>), horizontal line tag (<hr>), div tag(<div></div>) and many more.
Conclusion
We got to know the use and Existence of HTML and HTTP, and how things changed time to time. Interesting to know about a WebServer what they actually mean in real.
Structure making
HTML file making
Upload to Server
HTTP server running
Response from server to client in form of HTML
