HTML Document

An HTML document is the document type where HTML is written and ends with .html or filename.html with the latest document type being HTML5. Here are the fundamental building blocks of an HTML5 document:

1. HTML5 Document Type Declaration:

  • <!DOCTYPE html> tells the browser that this is an HTML5 document, ensuring it interprets the code correctly.

2. HTML Element:

  • <html> is the root element that encompasses everything else on the page. It usually contains two main sections: the head and the body.

3. Head Element:

  • <head> houses non-visible information about the page, including:
    • <title> (required): Sets the title displayed on the browser tab and search results.
    • <meta> tags (optional): Provide metadata like page descriptions, keywords, character encoding, viewport settings, etc.
    • <link> tags (optional): Link external resources like stylesheets, favicons, etc.
    • <script> tags (optional): Embed JavaScript code for interactivity.

4. Body Element:

  • <body> contains the visible content that users see and interact with, including:
    • Headings: <h1>, <h2>, <h3>, etc., for headings of different levels.
    • Paragraphs: <p> for regular text paragraphs.
    • Text formatting: <strong>, <em>, <mark>, etc., for emphasis, italics, highlighting, etc.
    • Lists: <ul> for unordered lists, <ol> for ordered lists.
    • Images: <img> to embed images.
    • Links: <a> to create hyperlinks to other pages or websites.
    • Tables: <table>, <tr>, <td>, etc., to structure tabular data.
    • Forms: <form>, <input>, <button>, etc., to collect user input.
    • Multimedia: <audio> and <video> for audio and video content.
    • Semantic elements: Meaningful tags like <header>, <nav>, <main>, <article>, <aside>, <footer>, etc., to structure content and improve accessibility.

Example of a Basic HTML5 Document Structure:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to My Website</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>
  • <meta charset="UTF-8"> proclaims a universal language of characters, ensuring every letter and symbol displays flawlessly across diverse online worlds.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> instructs web browsers to tailor the page’s dimensions to match the user’s device width, ensuring optimal viewing experiences across diverse screens.

Key Points:

  • HTML5 is more intuitive and less strict than older HTML versions.
  • Most elements don’t require closing tags (e.g., <img>, <br>)
  • Semantic elements enhance accessibility and SEO.
  • HTML5 introduces new features like media elements, canvas for drawing, and more.
< Previous
Next Lesson >