ADVERTISEMENTS

HTML Head

The HTML head element is a container for metadata about a web page. It is located between the opening <html> tag and the opening <body> tag, and is usually not visible to the user.

The HTML head element contains metadata about the web page, which is not visible to the user. Here are some of the common elements that can be included in the head section of an HTML document:

  • <title> : The <title> element specifies the title of the web page that appears in the browser's title bar and is often used as the default text for bookmarks.
  • <meta> : This element provides additional information about the web page, such as the character encoding, description, keywords, author, and viewport settings for responsive design.
  • <link> : This element is used to link to external resources, such as stylesheets, icons, or other web pages.
  • <script> : This element is used to include scripts, such as JavaScript, in the web page.
  • <style> : This element is used to define styles for the web page that are not included in an external stylesheet.

Here is an example of head elements in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
	<meta name="description" content="This is a description of my web page.">
    <meta name="keywords" content="web page, HTML, metadata">
    <link rel="stylesheet" href="styles.css">
	<script src="myscript.js"></script>
	<style>
      /* Define CSS styles for the web page */
      body {
        background-color: lightblue;
      }
      h1 {
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
	<script>
      // Embedding JavaScript code in the HTML file
      alert('Welcome to my web page!');
    </script>
    <!-- Visible content of the web page goes here -->
  </body>
</html>

 

ADVERTISEMENTS

HTML <title> tag

The HTML <title> element is used to define the title of the web page. It is located in the head section of the HTML document and is not visible to the user, but is displayed in the browser's title bar and is often used as the default text for bookmarks.

In above example, the <title> element contains the text "My Web Page". When a user visits this web page, the text "My Web Page" will be displayed in the browser's title bar.

It's important to use a descriptive and concise title for your web page that accurately reflects its content. This not only helps users to easily identify your page when they have multiple tabs open, but it also improves your web page's search engine optimization (SEO) by providing relevant information to search engines.

HTML <meta> tag

The HTML <meta> element is used to provide additional information about the web page, such as the character encoding, description, keywords, author, and viewport settings for responsive design. The element is placed in the head section of the HTML document and is not visible to the user, but is used by search engines, social media platforms, and other web services to understand and display information about the web page.

In above example, the element with the name attribute set to "description" provides a description of the web page, and the <meta> element with the name attribute set to "keywords" provides a list of keywords or phrases that are relevant to the web page.

HTML <link> tag

The HTML <link> element is used to link to external resources, such as stylesheets, icons, or other web pages. The <link> element is placed in the head section of the HTML document and does not have a closing tag.

In above example, the <link> element with the rel attribute set to "stylesheet" and the href attribute set to "styles.css" links to an external stylesheet that defines the styles for the web page. By placing the stylesheet in a separate file, the code for the web page can be kept clean and organized, and the styles can be reused across multiple pages.

HTML <script> tag

The HTML <script> element is used to embed or reference JavaScript code in an HTML document. JavaScript is a programming language that is commonly used to add interactivity, animations, and other dynamic features to web pages. There are two main ways to use the <script> element in an HTML document: by embedding the JavaScript code directly in the HTML file, or by referencing an external JavaScript file.

In above example, the <script> element with the src attribute set to "myscript.js" references an external JavaScript file that contains the JavaScript code. The code in the external file can be edited and reused across multiple web pages, making it easier to maintain and update.

HTML <style> tag

The HTML <style> element is used to define CSS styles directly in the head section of an HTML document. CSS (Cascading Style Sheets) is a style sheet language used to define the presentation and layout of web pages.

In above example, the <style> element contains CSS rules that define the background color and text color of the web page, as well as the text alignment of the <h1> element. The CSS styles are applied to the corresponding HTML elements using selectors, such as body and h1.

Using the <style> element to define CSS styles directly in the HTML document can be useful for small-scale web projects or for prototyping and experimenting with different styles. However, for larger and more complex web projects, it's generally recommended to use external CSS files, which can be reused across multiple pages and edited separately from the HTML code.

ADVERTISEMENTS