BASICS ABOUT HTML
HyperText Markup Language a.k.a HTML is a standard mark-up language designed to display documents on a web server. WHAT? CONFUSED?
Ok, so keeping it in simple words you can say that HTML is a language used to display content on a web page. Now, why is it a Mark-up language ?? For that don’t worry won’t be digging up the theory of mark-up language. In simple words, HTML doesn’t act like any programming language, you can’t use any function, class, or structure to perform some kind of function that will induce some kind of output. Mark-up language’s only job is to DISPLAY. Yes, you read it right, HTML helps you to display the data or content the way you want. NOW sad fact, HTML is not easy as Microsoft word, excel where clicking a few buttons and choosing a few options will display the data as you want. So, for that HTML has a few sets of tags that are used to display the data the way you want.
We know for the human body the skeleton keeps the entire structure of the human body. So, just that way HTML also acts as a skeleton of a web page where you design the structure of your web page mentioning the components you want to add up.
Now in order to construct your HTML document, as we mentioned earlier, a few sets of tags are needed which are termed Elements. Now, before we move further into learning more about HTML let’s discuss what are Tags and Elements and their differences.
HTML tag — It is a small text written inside angular brackets(<>) which have certain functions to perform for example — the <img> tag is used to insert an image in our HTML document and display it on the screen.
HTML Element — It comprises the start tag, end tag, and the content inside it. Also, some elements don’t have ending tags.
Check out the below diagram to understand the difference better -
Reading so much about HTML documents did you wonder how these documents are actually displayed on our screen. EASY answer — these documents are first received by Web Browsers from any Web Server or even any local server and the browser displays them in the way you wished to display them on the screen. HTML documents are usually accompanied by CSS and Javascript. In short, CSS helps to beautify it and Javascript actually helps to perform certain functions ( like any Programming language, okay now that’s surprising, yEaH I know sounds surprising and weird but true though).
Now let’s talk more in detail about HTML Elements. Elements as mentioned earlier are actually what defines our HTML documents. They are written in nested and semantic manner for example -
<body>
<h1>Hello world</h1>
</body>
As you can see, the <h1> tag is inside the <body> tag as you will study later that <body> tag comprises the major content which is to be displayed on the screen but the <h1> tag is just a header tag to make the text appear bigger. Therefore, these tags are written in a way that it’s actually nested and written semantically.
In some elements, the Start tag may also contain attributes. What are these ? Attributes are used to enhance the content more in many ways. Some attributes have their own functions whereas some tags are used to point towards the elements to perform some externally built functions. Attributes always come in pairs of AttributeName=” value”. So, on the whole, HTML elements are written in the following format -
<tag attribute1=”value1" attribute2=”value2">’’content’’</tag>
Or, for some elements, there are no end tags so they may be written in the following manner -
<tag attribute1=”value1" attribute2=”value2">
So, now Let’s check out the general structure of an HTML document followed b every web developer in day-to-day life -
Code -
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Document</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
In the above code, as you all can clearly see the structure, let’s discuss all of them in bulletins -
- <!DOCTYPE> is actually a declaration mentioning that this document is a HTML Document. It helps the web browsers to identify the document type and display the web pages correctly.
Do you know there’s a little catch in here?
(The catch is that for different versions of HTML we mention different Doctype. Thus you can say DOCTYPE also mentions the HTML version of the document. In the above code, we are using HTML5 so, for that we wrote <!DOCTYPE html> . But if we would’ve been using HTML 4. Then the code would’ve been -
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"> )
- At the very beginning, the <html> element is mentioned as it specifies the beginning and the end of our HTML document. As part of an HTML element, HTML tags help web browsers convert HTML documents into web pages.
- Now, nested we declare two more tags under the HTML tag which are the head element and body element.
- The head element is to be mentioned before the body tag as it contains all the details about the document(Details will be shared further). In the above code, we only mentioned the title element as it specifies the name of the web page.
- Now, let’s talk about the body element, this is the most important element as it consists of all the contents of our HTML document and whatever we display on our screen.
- Inside the body tag, the h1 element as mentioned earlier is just a heading tag used to format text as larger or smaller.
(But here’s another catch. I know I know so many surprises but trust me this is the last of my blog,
H1 element is not used for defining the appearance of my text, it’s used to assess the importance of the text as a heading in your HTML document. For Ex-
H1 tag may enlarge the text but it actually justice that this is the most important heading again H6 may appear the text small but it actually justifies that this is the least important heading.)
So, that was all about the basics of HTML that you all need to know before digging into more elements and their uses and kick-starting your web development journey.
Thank you and happy coding !!!
