{"id":78928,"date":"2020-07-04T09:00:47","date_gmt":"2020-07-04T03:30:47","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78928"},"modified":"2024-07-24T17:02:44","modified_gmt":"2024-07-24T11:32:44","slug":"html-head-elements","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-head-elements\/","title":{"rendered":"HTML Head Elements – Usage, Attributes and Examples"},"content":{"rendered":"

Welcome to DataFlair HTML Head Tutorial<\/strong>. In this article, we will learn what are HTML head elements, its attributes and examples.<\/p>\n

\"HTML<\/a><\/p>\n

HTML Head Elements<\/h2>\n

The information related to the HTML document is defined in the head section or the <head> element of the document. It was mandatory to use <head> element up till HTML4, but this rule has been omitted in HTML5. The information contained by the <head> element is not displayed by the browser on the web-page. It includes machine-readable information such as style sheets, scripts, title of the document, etc.<\/p>\n

In modern web development, the head section of a web page contains essential meta-information that is vital for SEO analysis, accessibility, and performance. Thus by including a proper and accurate metadata, the developers of the websites can enhance their web pages\u2019 status in search engines, guarantee the website accessibility by users, and increase the efficiency of the internet sites\u2019 work through proper link to the external resources.<\/p>\n

Furthermore, elements placed within the head can aid in defining how the document must be displayed in various browsers and on different gadgets.<\/p>\n

Syntax-<\/strong><\/p>\n

<html>\r\n<head>...<\/head>\r\n<html>\r\n<\/pre>\n
Example-<\/strong><\/p>\n
<!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n <meta content=\"Example\" name=\"description\">\r\n <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n <p>Welcome to DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
The elements contained within the <head> element are-<\/p>\n
1. HTML <title><\/h3>\n
The <title> element resides in the <head> tag and defines the name of the web page. It appears as the name of the tab. The title is displayed during search results.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"DataFlair.png\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
2. HTML <style><\/h3>\n
The <style> tag contains the CSS files or the implicit CSS attributes, used for styling and manipulating the HTML document.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<style>\r\n  h1{\r\n    color: blue;\r\n    background-color: red;\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"DataFlair.png\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
3. HTML <link><\/h3>\n
This tag links the current document with other web pages or external style sheets.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"DataFlair.png\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
4. HTML <meta><\/h3>\n
The <meta> tag contains additional information related to the document such as page description, keywords, author, character set, etc. The web browsers use the metadata to display content, and keywords are used by search engines and other web-services.<\/p>\n
Meta tags are exceptionally essential for passing vital information to the web crawlers and browsers about the key elements of an HTML document, including character set used in the current document to ensure proper displaying of the text. They also have the function of social media integration by supplying information such as Open Graph tags that determine the manner in which URLs appear on social media sites.<\/p>\n