Hello, I'm manish, a aspiring web developer. If you are new to learning about web development then first undersatnd what is HTMl. HTML stands for hyper text markup language. It is called skeleton of the web page . It is used to layout the website. Hyper text provides access to other documents via hyperlinks. HTML uses various markup tags to layout HTML document. Markup language define the structure and presentation of raw text. There are many tags like head tag, heading tag, paragraph tag etc.
In this blog post we will discuss some of the tags we ignore due to emmet. Have you ever use emmet. Probably yes! Emmet is powerful feature in vs code that give you starter code inside your HTML file. It is like a shortcut for writing code. It can speeds your work. But, due to this we ignore the various tags above body tag. We forget about meta tag, title tag etc. These are the most important tag that you must know about. They can help improve traffic in your website. This we will learn later so stick around. You can see the basic HTML document that we are referring for this blog post:
As you can see that we have to main section inside html tag that is head and body tag. Content inside body tag is visible inside the browser but content inside the head tag is not visible inside the browser. But head tag tells a lot about page and it is really helpful. It includes title, liking to css and javascript, favicons etc. You can see here a very short head tag but big websites contain a lot of head inforamtion. If you utilize these tags effectively then it can be really helpful in many ways. They improve search engine optimization. In this blog post we will cover these tags and see how they can impact your website. We will learn why yo should include them in your website. Be curious and explore about these topics in much details. So let's begin.
Before We Begin
You can also see that above the html tag we have Doctype HTML and lang attribute. Let us explore them first.
DOCTYPE HTML is an instruction to the browser that in which version of html this document is written. This ensures that web browser parse the document the right way. The above tag tells browser to use HTML 5 in the document. There are different doctype declaration for older versions. If you didn't write this in your document it will get confused. It can't identify which version of code to expect. It can still parse code but also introduced bugs in your code sometimes.
lang="en" attribute used to identify the language of text content on the web. "en" here means to expect english language. There are other various code available.
Let's discuss what's inside head of the html document.
Title Tag
<title>This Is the Title</title>
As you can see the syntax above that this tag is similar to any other tag used in html. This tag is used to describe title of the whole document. Don't confuse it with h1 heading tag. H1 is present on the web page itself but title tag content present on tab section or title bar of the page.
Linking to CSS and Javascript
<!--Linking to external css-->
<link href="/style.css" rel="stylesheet">
<!--Linking to external js file-->
<script scr="/app.js" defer ></script>
Having a separate CSS and Javscript file is must. This can make your code more beautiful and human readable. You can link your external CSS and Javscript file inside head using link and script tags respectively.
For Linking CSS you have to use link tag with href and rel attribute. href attribute provide a reference of external file inside html. href takes external file url as a value. While rel is used to define relationship between linked document and current document where we have linked it. Here it is stylesheet means for styling.
For Linking to Javscript you have to use script tag with source attribute. src attribute takes file url as value amd links to that file.
Adding custom icons using favicon
<!--Linking to external css-->
<link href="/favicon.png" rel="icon" type="image/png">
As You can see above how you can add favicons short for favorite icons on your web page. Ihey appear right in front of title of your address bar. They can improve design of website and make it more attractive. We can add favicon using link tag. We specify url with href and relation of linked item with rel attribute.
Meta tags
Meta data is the data that describes the data of document. It won't show on web page but do contains a lot of inforamtion about the document. It is useful for search engine optimization. It is used to describe content, author, description keyword related to the page. Meta data is used by browser. We can add meta data to the document using <meta> tag. There are various meta tags and attributes.
Charset Attribute Of Meta Tag
<meta charset="utf-8">
The charset attribute of meta tag is used to specify the character encoding of the HTML document. It's value must be set to UTF-8, It can identify every charcter of any language. If it is not set to UTF-8 then it will not render certain language character properly.
Define keyword, author, description with meta tag
<!--Describes keyword-->
<meta name="keyword" content="HTML, Javscript, CSS">
<!--description of document-->
<meta name="description" content="This blog will give
you insight about HTML head tag elements which are very
useful">
<!--Describes author-->
<meta name="author" content="Manish">
As you can see above that with meta tags we can define keywords, document description & author of the docoument. This information is really useful. Keywords can help search engine identify your document useful and thus rank it above in search results. Someone can know who wrote this document by author value. Description is also important and plays a huge role in dearch engine optimization. Also, description gives user what your document is about before clicking it.
Thanks for reading this blog post down to here and thanks if you have read this blog post fully. It means a lot to me. Now you have good understanding of these head tags. Now you know how much they worth and why you should care about them. Why you should include them in your website.
They can help improve website performance based on SEO an also it can help visually impaired person to read them effectively. I urge you to research more about these topics. Keep Coding.
Final Words:
Final words: If you are a programmer them you can follow me on github @manish591, you can also connect with me on linkedIn @manishdevrani77 and on twitter @manishdevrani77 as well.