HTML Tutorials

HTML - The Head Tag

The Head Tag in HTML

Metadata, script links, stylesheet links, and other connections that take readers out of the immediate view of the webpage are all contained in the <head> section of an HTML document. Setting up the document's details and adding links to outside resources that alter the way the website looks and functions are essential tasks for this phase.
 

Key Elements Inside <head>:

  • <title>: Specifies the document's title that appears in the title bar or tab of the browser.
  • <meta>: Supplying information about the HTML content, including viewport settings, character set, description, and keywords that aid in SEO (Search Engine Optimization).
  • <link> is used to connect favicon icons and CSS files.
  • <style>: Can have internal CSS rules in it.
  • <script>: This is used to add JavaScript, either directly embedded or through an external link, to the document.

Example of a <head> section:

<head>
    <title>My Sample Website</title>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

logo

HTML

Beginner 5 Hours

The Head Tag in HTML

Metadata, script links, stylesheet links, and other connections that take readers out of the immediate view of the webpage are all contained in the <head> section of an HTML document. Setting up the document's details and adding links to outside resources that alter the way the website looks and functions are essential tasks for this phase.
 

Key Elements Inside <head>:

  • <title>: Specifies the document's title that appears in the title bar or tab of the browser.
  • <meta>: Supplying information about the HTML content, including viewport settings, character set, description, and keywords that aid in SEO (Search Engine Optimization).
  • <link> is used to connect favicon icons and CSS files.
  • <style>: Can have internal CSS rules in it.
  • <script>: This is used to add JavaScript, either directly embedded or through an external link, to the document.

Example of a <head> section:

<head>
    <title>My Sample Website</title>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.