Tutorials


Script and Link Tags


Script and Link tags in HTML are used to include external resources and scripts in a web page. They play a crucial role in enhancing the functionality and style of a web page.

Script Tags

The <script> tag is used to include JavaScript code or link to an external JavaScript file. It is essential for adding interactivity, dynamic content, and client-side logic to a web page.

  1. Including Inline JavaScript

    • Description: You can place JavaScript code directly within the <script> tag. This is useful for small scripts or when you need to execute code immediately.
    • Usage: Typically used for small snippets of JavaScript.
    • Example:
      <script>
    document.addEventListener('DOMContentLoaded', function() {
        alert('Page loaded!');
    });
</script>

  2. Including External JavaScript Files

    • Description: You can include external JavaScript files by specifying the src attribute with the path to the file. This is useful for separating JavaScript code from HTML content and for reusability.
    • Attributes:
      • src: Specifies the URL of the external script file.
      • type: Specifies the MIME type of the script (optional, default is text/javascript).
      • async: Indicates that the script should be executed asynchronously.
      • defer: Indicates that the script should be executed after the document has been parsed.
    • Usage: Used for linking to external JavaScript files.
    • Example:
      <script src="scripts/main.js" defer></script>

  3. Attributes of <script> Tag:

    • async: When present, the script will be executed asynchronously as soon as it is available, without blocking the page rendering.
    • defer: When present, the script will be executed after the HTML document has been completely parsed.
    • type: Defines the type of script being used, though it's often omitted for JavaScript.

    Example of Using async and defer:

    <script src="scripts/async.js" async></script>
<script src="scripts/defer.js" defer></script>

Link Tags

The <link> tag is used to link to external resources, such as stylesheets, icons, and other files that are not part of the HTML content itself. It is most commonly used to include CSS stylesheets.

  1. Including External Stylesheets

    • Description: The <link> tag with rel="stylesheet" is used to include an external CSS file, which applies styles to the HTML document.
    • Attributes:
      • href: Specifies the URL of the stylesheet.
      • rel: Defines the relationship between the current document and the linked resource (e.g., stylesheet).
      • type: Specifies the MIME type of the linked resource (optional, default is text/css).
    • Usage: Used to apply external CSS styles to the HTML document.
    • Example:
      <link rel="stylesheet" href="styles/main.css">

  2. Including Icons

    • Description: The <link> tag can be used to specify the favicon (icon) of the web page. This icon appears in the browser tab or bookmark bar.
    • Attributes:
      • rel: Defines the relationship (e.g., icon).
      • href: Specifies the URL of the icon file.
      • type: Defines the MIME type of the icon (e.g., image/x-icon).
    • Usage: Used to set the favicon for the web page.
    • Example:
      <link rel="icon" href="images/favicon.ico" type="image/x-icon">

  3. Preloading Resources

    • Description: The <link> tag can be used to preload resources like fonts, scripts, and styles to improve page performance.
    • Attributes:
      • rel: Defines the relationship (e.g., preload).
      • href: Specifies the URL of the resource.
      • as: Specifies the type of content being preloaded (e.g., font, script, style).
    • Usage: Helps to optimize resource loading and improve page load times.
    • Example:
      <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Example of Using Both <script> and <link> Tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
    
    <!-- Linking to an external stylesheet -->
    <link rel="stylesheet" href="styles/main.css">
    
    <!-- Including a favicon -->
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    
    <!-- Preloading a font -->
    <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example page using script and link tags.</p>
    
    <!-- Including an external JavaScript file -->
    <script src="scripts/main.js" defer></script>
</body>
</html>



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about