NEW

6/recent/ticker-posts

Header Ads Widget

HTML Head

Sunday, June 11, 2023

 

HTML Head

The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.

The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document which specifies data about the HTML document.

An HTML head can contain lots of metadata information or can have very less or no information, it depends on our requirement. But head part has a crucial role an HTML document while creating a website.

Metadata defines the document title, character set, styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

  • <title>
  • <style>
  • <meta>
  • <link>
  • <script>
  • <base>

HTML <title> Element

The HTML <title> element is used to define the title of the document. It is used in all HTML/XHTML documents. The <title> element must be placed between <head> element, and one document can only have one title element.

What does <title> element do?

  1. It defines a title in the browser tab.
  2. It provides a title for the page when it is added to favorites.
  3. It displays a title for the page in search engine results.

Note: The title element must be specific about the document and its recommended length is 65 to 70 characters including spaces.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>This Page Title</title>  
  5. </head>  
  6. <body>  
  7. <p>The body's content is displayed in the browser window.</p>  
  8. <p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>  
  9. </body>  
  10. </html>  

HTML <style> Element

The HTML <style> element is used to style the HTML page. The <style> element can have CSS properties for that HTML page only. If we want to apply CSS for multiple pages then we should use separate CSS file.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>This is Page Title</title>  
  5.   <style>  
  6.     body {background-color: pink;}  
  7.     h1 {color: red;}      
  8.     p {color: blue;}  
  9.   </style>  
  10. </head>    
  11. <body>  
  12. <h1>This is a Heading</h1>  
  13. <p>This is a paragraph.</p>  
  14. </body>  
  15. </html>  

HTML <link> Element

The HTML <link> element is used to link an external style sheet to your webpage. The <link> element contains main two attributes which are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.

Example:

 

  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.     <title>This is title</title>  
  5.     <link rel="stylesheet" href="style.css">  
  6.    </head>  
  7.    <body>  
  8.     <h2>Web-page with external CSS</h2>  
  9.     <p>This is looking a cool page</p>  
  10.    </body>  
  11.  </html>  

HTML <meta> Element

The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.

Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.

Let's see how to use metadata:

To define a character set:

  1. <meta charset="UTF-8">  

The charset attribute specifies the character encoding. In this example we have set it to "UTF-8" which means it can handle to display any language.

Example:


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">    
  5. </head>  
  6. <body>  
  7. <p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p>  
  8. <p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>  
  9. </body>  
  10. </html>  

Output:

HTML Head

To define a description of your webpage:

  1. <meta name="description" content="Free Web tutorials">  

If you give a meta description then it will be useful for the relevant search to perform by search engines.

To define keywords for search engines:

  1. <meta name="keywords" content="HTML, CSS, XML, JavaScript">  

The keyword value is also used to provide keywords for a search engine, but it may ignore by browser due to spammers.

To define author of the webpage:

  1. <meta name="author" content="Akon">  

The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by some content management systems.

To refresh document every 30 seconds:

  1. <meta http-equiv="refresh" content="30">  

Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. As in above example it will automatically refresh after 30 sec

  1. <meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html-head>  

If you add an URL with content value, then it will redirect to that page after the time limit will over.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.    <meta http-equiv="refresh" content="5; url=https://www.slogantechblog.com/html-head">  
  5.  </head>  
  6.    <body>  
  7.     <h2>Meta element Example</h2>  
  8.    <p style="color: green;">Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag</p>  
  9.  </body>  
  10. </html>  

Following is an example to show how to use all Meta elements within HTML head

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <meta name="description" content="Free Web tutorials">  
  6. <meta name="keywords" content="HTML,CSS,XML,JavaScript">  
  7. <meta name="author" content="Akon">  
  8. </head>  
  9. <body>  
  10. <p>All the meta information are set.</p>  
  11. </body>  
  12. </html>  

Use <meta> tag to set the Viewport

This method is introduced in HTML5 to take control over the viewport by using <meta> tag.

Viewport is the user's visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer screens.

Syntax for <meta> viewport element:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

Here, the <meta> viewport element specifies how to control the page's dimensions and scaling.

The width=device-width is used to set the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 is used to set the initial zoom level when the page is first loaded by the browser.

Example of a web page without the viewport <meta> tag:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>  
  6.   
  7. <img src="image.jpg" alt="image" width="460" height="345">  
  8.   
  9. <p>  
  10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
  11. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
  12. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
  13. eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
  14. feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
  15. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
  16. eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
  17. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
  18. facer possim assum.  
  19. </p>  
  20.   
  21. </body>  
  22. </html>  

Example of a web page with the viewport <meta> tag:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
  5. <style>  
  6. img {  
  7.     max-width: 100%;  
  8.     height: auto;  
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>  
  14.   
  15. <img src="image.jpg" alt="image" width="460" height="345">  
  16.   
  17. <p>  
  18. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
  19. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
  20. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
  21. eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
  22. feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
  23. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
  24. eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
  25. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
  26. facer possim assum.  
  27. </p>  
  28.   
  29. </body>  
  30. </html>  

Note: To see the difference clearly, open this page on smartphone or tablet.

HTML <base> Element

The HTML <base> element is used to specify the base URL and base target for all relative URLs in a page.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Page Title</title>  
  5. <base href="https://static.javatpoint.com/htmlpages/images/" target="_blank">  
  6. </head>  
  7. <body>  
  8. <img src="html5.png">  
  9. <p>We have specified a base URL, the browser will look for the image "html5.png"   
  10. at "https://static.slogantechblog.com/htmlpages/images/html5.png"</p>  
  11. <p><a href=" https://www.slogantechblog.com">JavatPoint</a></p>  
  12. <p>The link above will open in a new window because base target is set to "_blank".</p>  
  13. </body>  
  14. </html>  

HTML <script> element

HTML <script> element is used to apply client side JavaScript for the same page or to add an external JavaScript file to current page.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <script>  
  5.         function fun() {  
  6.         document.getElementById("p").style.color="green";     
  7.         }  
  8.     </script>  
  9. </head>  
  10. <body>  
  11. <h2>Script within Head element</h2>  
  12. <p id="p">This will change the color</p>  
  13. <button type="button" onclick="fun()">Click me</button>  
  14. </body>  
  15. </html>  

If we want to use some external JavaScript file then it can be applied by:

  1. <script src=".js file_path">  

Excluding <html>, <head> and <body> elements

HTML 5 facilitates us to omit the <html>, the <body>, and the <head> tag.

Example:

  1. <!DOCTYPE html>  
  2. <title>Page Title</title>  
  3. <h1>This is a heading</h1>  
  4. <p>This is a paragraph.</p>  

Note: It is not recommended to omit the <html> and <body> tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).

However, you can omit the <head> tag.


Tags:

Post a Comment

0 Comments

Post a Comment

Recents Post

Exploring Paidwork - Your Gateway to Earning Online

Exploring Paidwork - Your Gateway to Earning Online

Slogan Technologies Monday, May 13, 2024

In today's digital age, the possibilities for earning money online are vast and …