Ayush Nighoskar's Blog

Mastering Web Development Essentials: Script Placement, HTML Indents, and HTML5 Manifest Files

Mastering Web Development Essentials: Script Placement, HTML Indents, and HTML5 Manifest Files

Ayush Nighoskar's photo
Ayush Nighoskar
·

2 min read

Table of contents

Writing JS Script: Body vs. Head-

Placing Scripts in the<head>:

  • Advantages:

    • Ensures scripts are loaded before the page renders.

    • Ideal for scripts that manipulate or interact with page elements on load.

  • Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    // Your JavaScript code here
  </script>
</head>
<body>
  <!-- Body content -->
</body>
</html>

Placing Scripts in the<body>:

  • Advantages:

    • Allows parallel loading of scripts, potentially improving page load time.

    • Suitable for non-blocking scripts that don't need to manipulate the page immediately.

  • Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Head content -->
</head>
<body>
  <script>
    // Your JavaScript code here
  </script>
</body>
</html>

Choosing between <head> and <body> depends on the script's nature and its impact on page rendering.

HTML Indents: Structuring Your Code

  • Importance of Indents:

    • Enhances code readability.

    • Facilitates collaboration and maintenance.

    • Aids in understanding the hierarchy of nested elements.

  • Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Your Title</title>
  </head>
  <body>
    <header>
      <h1>Main Heading</h1>
    </header>
    <section>
      <h2>Subheading</h2>
      <p>Content goes here.</p>
    </section>
  </body>
</html>

Consistent indentation is crucial for maintaining clean, readable, and easily maintainable HTML code.

HTML5 Manifest File: Boosting Web App Capabilities

  • Creating a Manifest File:

    • A JSON file named manifest.json.

    • Specifies metadata like the app's name, icons, and display options.

  • Example:

{
  "name": "Your App",
  "short_name": "App",
  "description": "Description of your app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}
  • Usage:
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="manifest" href="/manifest.json" />
</head>
<body>
  <!-- Your web app content -->
</body>
</html>

Leveraging the HTML5 manifest file enhances your web app's capabilities, providing a seamless, app-like experience.

Conclusion

In web development, knowing details like where to put your scripts, how to format your HTML, and using the HTML5 manifest file helps developers make websites that are efficient, easy to read, and packed with features. As you keep learning web development, include these tips to create websites that are known for their functionality, readability, and a great user experience.

HTML5Web DevelopmentReactHTMLwebdevFrontend Developmentfrontend