The HTML page skeleton every student should know

Every page you build in a web lab should start from the same few lines. Each one has a job, and leaving any of them out causes problems that are hard to trace later.

The skeleton

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mini project: Library system</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Library system</h1>
    <script src="app.js" defer></script>
  </body>
</html>

What each line does

• <!doctype html>: tells the browser to use standards mode. Without it, browsers fall back to old "quirks" behaviour and your CSS acts strangely.
• lang="en": helps screen readers pronounce the text and helps search engines. Use hi, te, ta and so on for pages in those languages.
• <meta charset="utf-8">: lets the page show any character, including ₹ and Indian scripts. Put it first inside head.
• viewport meta: without it, phones show a shrunken desktop page. This one line is the start of every responsive design.
• <title>: the text on the browser tab and in search results. Make it describe the page, not just the site.
• defer on the script: the script downloads while the page is read and runs after the HTML is parsed, so it can safely find elements by id.

Common lab mistakes

• Putting content (headings, images) inside head. Only metadata belongs there; everything visible goes in body.
• Several h1 elements for styling. Use one h1 for the page title and size other headings with CSS.
• Forgetting to close tags in nested lists and tables. Format your code with indentation so missing closings stand out.
• Opening the file by double-clicking and expecting fetch() calls to work. Many browser features need the page to be served, for example with a small local server.