HTML tags and Elements
How beautiful does a web page looks when we open it - the floating cards , the dancing text - the stylish buttons and what not. Feeling excited about what is happening on our screen and getting drawn to the services provided by it . Often times in this mesmerization we fail to ask ourselves - what even made this possible?
The beautiful creation we usually see on our screens is an epitome of software engineering that took years to develop and decades to finalize. The birth of the web page happens from its skeleton creation via a format of storing text documents called HTML - the hypertext markup language.
Now what is this:
Lets do you specific exercise (if you are on a laptop or PC).
Right Click the page you are on right now - and click the Inspect Option.
On the right of the screen or sometimes at the bottom you will see an interface like this:
This looks overwhelming at first - but actually when you learn what it is - and how to work with it - you will regret being scared of it.
Once you learn HTML which is probably the simplest language in the entire field of computer science - you will be very interested in how actually things are happening in a website.
Lets delve a bit into the history of HTML.
History of HTML
Long before nothing like websites existed - but computers did. Researches at CERN - yeah the one with the large Hadron Collider - hoarded pages of research papers. If you have ever seen one you would know that a research paper has something called citations. Which means that a section of their research paper was taken from another paper. Now imagine yourself in that time - going through one such paper. And now you are interested in another research paper. What do you do? You go to the document library - rummage through the paper and pull out the paper - half tearing it in the process.
Yeah the man - Tim Berners Lee - also thought the same. He mainly desired two things. A way to store research paper on computers in form of text files - and to be able to connect multiple research papers together. He sought out a plan . Now even tho this could be achieved as computer networking had developed so it was possible to “link” those tags together - but something was off.
Think of a research paper. Does it look it it has normal text. No right? It has stuff like this:
Now these formulas and images can’t be contained in by a single text file. We needed something more inclusive. And from there came into existence - Hypertext. A text that can store formatted text and also display it effectively.
They came up with the idea of defining some rules to classify the formats based on the intended content to be formatted being places between “tags” - a computer identifiable identify with its specific meaning. Such a language is called a markup language - and the final result was Hypertext Markup Language - which as we know today as HTML.
The HTML tag
An html tag is just a semantic entity. Basically speaking its a type of special string whose meaning the computer interprets in a different language. This helps the computer identify that the content between the tag is meant to be displayed in a specific format defined by the tag.
Tags are primarily of three types:
Opening Tags
Closing Tags
Self Closing / Void Tags
Now assuming we already know a bit of HTML- I think its fair to dive deep in how it actually works which will give us a better understanding of
The browser needs to parse the html tags to render its content on the screen. In this process of parsing - the browser converts each tag into a specific node. A tag nested within another tag will be a child node of it. During the process of parsing - the browser removes the tags and takes its contents. It than attaches metadata to that content and creates node out of it. The topmost root node is usually the html tag’s contents. The node is represented by what is called an object. It contains its elements, attributes and text. These are extracted from the html document and a tree is created out of it - providing us with a model of what needs to be on the screen. Hence this entire tree structure is called as the Document Object Model.
Opening Tag
The opening tag implies the start of a specific data format. It is represented by angular brackets => “<>”.
And in between them is the specification we desire - like h1 for a large heading and p for a paragraph. The machine already knows about this format and knows what p means or what h1 means and will process the internal data accordingly.
Closing Tag
The closing tag implies the end of the specific data format. It is also represented being enclosed in angular brackets and the specification inside - except that to differentiate itself from its opening tag the specification inside the brackets is preceded by a /.
So in total they look like this:
<specification>
CONTENT
</specification>
This forms the heart of HTML. There can be more tags nested in another set of opening or closing tags -which as we know will be the child of this tag - and if that one has another nested in it - a grandchild and so on. And when is the end?
Of course when at the end we find some content. Another tag can’t be at the end right - well what if it is?
Self Closing/Void Tags
The self closing or void tags are the tags that usually refer to a standalone piece of data. Like an image <img> or break <br> tag. These tags to imply they are self closing are usually succeeded by a / at the end of the specification before a closing brace.
like this
<specification />
and in some cases like <br> it may not be required but using it as <br/> will generally be interpreted the same way by the browser . In fact a div tag being tried to be made self closing will automatically be assumed as an opening tag - like if - <div /> the browser will see it as - <div> and render everything inside this div beyond it because it won’t have a closing tag.
This is all possible because the html parser is extremely forgiving.
HTML Element
While the tags are what we use to define what kind of content they hold - the element is the entity that comprises of the tag (opening and closing), its attributes and other metadata along with its contents. Inside the DOM . It is not just a long string consisting of the data of tag and its contents - but contains the meaning, content and also the logic for handling what it needs to do on the page.
Block Elements and Inline Elements
The block elements and Inline elements are usually define as-
Block Elements : Elements that start content on a new line and cover the entire width of the screen.
Inline Elements: Elements that start in the same line and take only as much width as required.
However these definitions abstract away too much of their significance as well as hinders us in understanding the proper usage of each type of tag. The elements were definitely not created in mind with -lets have an element which will start from new line and have full width and another which doesn’t. They were built to solve a problem.
The problem was that in such complex documents like a research paper - the writers wanted to divide their content in clearly visible sections and structure their words , images etc properly. They wished to have positions of a their content relative to a frame tailored to their needs. Also they wanted to have some way to be able to define some attributes about some specific parts of the document without breaking any flow.
In response to these - these tags were created.
Block Elements
The Block Elements solve the first problem . They allow the users to create a specific frame that will have some defined format for its contents. Using CSS - they elements can even be modified in size and tailored to one’s own personal needs. They break away from the previous content and occupy their own space - occupying 100% width of their parent container not the full screen. They start from a new line to indicate the start of their own space.
These tags include - the header tag.
<header></header> = used to define the preceding content of a web page.
The heading tags - used to provide headings.
<h1></h1> , <h2></h2>….h6
In decreasing order of text size.
The most popular - division tag - for specifically this purpose:
<div></div>
And many more. Please explore your browser using the inspect element and find more.
Inline Elements
The Inline elements are required to solve the second problem. They help continue the text without breaking the flow of the structure . They help in emphasizing text , providing it meaning for the browsers and making it more accessible say for screen readers etc. This becomes really important. For a normal person the text on the screen maybe all that matters - but often times - html needs to follow strict guidelines to adhere to accessibility. Meaning that the website should be usable for visually challenged people who use screen readers - which use these semantic tags to understand the context of the characters and provide correct experience. Even tho HTML is really easy - when we learn that HTML can also be so tricky. This would become very interesting if you know that people have faced lawsuits for not taking care of things like these.
The inline elements are used to specify hyperlinks, date and time, paragraphs etc.
For example:
the popular:
<a href=”url”></a> => The anchor tag used for URL linking.
<span></span> t=> The span tag for specifying a section of content that can be worked on independently say for designing etc.
<strong></strong> => The strong tag used to bold out some text
<em></em> => The emphasis tag - also used to bold but it indicates emphasis. It is used by screen readers for understanding context of statements and pronouncing the section with a different tone.
HTML has extensive history and a deep lore - and that is exactly why its holding up hundred of millions of website throughout the world. Understanding how it works and what it does becomes extremely important to be on a journey to being not a coder but a great engineer.