What are HTML tags?

What are HTML tags?

HTML tags are the most primal elements of hypertext markup language. They are not case sensitive and are used to define markup on the website. They were created by W3C to introduce standardization to develop websites. There is a lot of history behind it but we'll skip that and dive right into other technicalities.


Why do we need a website or a web page?

Websites are a way to organize and showcase your business online. It'd rather be hard to keep everything on the same page. Thus we use web pages to separate the content. That's one way of looking at it. Arguably, we have something called SPA's which are beyond the scope of this tutorial. Let us know if you'd love to read about them so that we can write an article on SPA's.

You create these pages, using an editor such as Notepad that's available by default on your computer. When you start to learn HTML, you don't need to install anything!! All HTML documents have a .htm or .html extension. For example, you can save a shopping page as 'shop.htm' or 'shop.html' 

Although we can use Notepad to create HTML documents, we can use something called advanced editors to make our life easy. They support heck loads of things such as IntelliSense, code completion, debug features, etc. We won't discuss them in the current article. Let me know if you need a post on that as well.


Structure of HTML document

All, HTML 5 webpages begin with a <!DOCTYPE html> tag. This tag tells the browser that the current page is an HTML5 document. We need this as there are a lot of languages for the web. Thus, by using it, you are telling the browser that you will use the HTML 5 document standard's on your web page. Right after that, we are ready to wrap the whole HTML content using the <html> tag. This is called the opening HTML tag. It tells the browser, this is where your HTML document starts.


The immediate next tag that precedes the previous one is the <head> tag. It signifies that the head section of the HTML5 document begins. Again there are a lot of things that can go here, we will discuss the most common ones.


The head section can contain scripts, stylesheets, and meta information for the website. We can also specify the title of the website here using <title> My first page </title> tags. Note, the title tag is closed immediately after we set the page title. The first title you see in <> braces is called the opening tag, and the </> is called the ending of the title tag. Once we define all these thing's, we finally close the head section by using the </head> tag.


The next important tag is the body tag. This is where all the content users see is placed. We begin by opening the <body> tag. Then place the content that we want to show to the users. This can contain anything under the sun! You can create headers, paragraphs, throw a few images, and phew, heck load of other things. Once done, close the body section using the </body> tag.


Finally, we are also ready to close the HTML tag, that we opened on the top of the page by using the </html> tag.


We will conclude this post by looking at the complete code for the HTML document. Here we go:


<!DOCTYPE html>

<html>

<head>

<title> My new page </title>

</head>

<body>

Display content here. This is what you see on the webpage.

</body>

</html>


That's all for now! Can't cover everything in a day. HTML5 is extensive. Thus, I'll break these into tiny size nuggets you enjoy. Please do share and express your opinions. It takes time to create content that matters. Thanks for sharing. 


Contest giveaway applies to this post. For this post, the target is 2500 shares. There will be three winners. If you want to participate, please subscribe, share, and leave useful feedback on the content. 

Prizes: First place: 75/- , Second place: 50/- and third place: 25/-.

Post a Comment

0 Comments

React