Section outline

    • An HTML document is structured using a specific set of tags that organize the content and define the purpose of each part. Below is the basic structure of an HTML document:

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page">
<meta name="author" content="Your Name">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to CSS file -->
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>Home Section</h2>
<p>This is the main content area of the homepage.</p>
</section>

<section id="about">
<h2>About Section</h2>
<p>Information about the website or its creator.</p>
</section>

<section id="contact">
<h2>Contact Section</h2>
<p>Details for getting in touch.</p>
</section>
</main>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>

<script src="script.js"></script> <!-- Link to JavaScript file -->
</body>
</html>



      Key Components:
      1. <!DOCTYPE html>: Specifies the document type and version of HTML.
      2. <html>: Root element of the HTML document.
      • lang="en": Sets the language of the document (English in this case).
      3. <head>: Contains metadata and links to external resources.
      • <title>: Title of the document (displayed in the browser tab).
      • <meta>: Provides metadata such as character encoding and viewport settings.
      • <link>: Links external stylesheets.
      4. <body>: Contains the content of the page.
      • <header>: Typically contains introductory content or navigation.
      • <main>: The main content of the page.
      • <section>: Divides content into thematic sections.
      • <footer>: Contains footer information like copyright notices.
      5. <script>: Links or contains JavaScript code.

      This structure ensures your page is well-organized and compatible with web standards.

    • <meta>: Specifying Content Type, Character Set, and More

      A <meta> tag has a number of uses. For example, it can be used to specify values that are equivalent to HTTP response headers. For example, if you want to make sure that your MIME type and character set for an English-based HTML document is set, you could use

      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

      Because meta is an empty element, you would use the trailing-slash syntax shown here:

      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

      Most people would agree that using the UTF-8 character set is probably a good idea for Western-language page authors because it gives them access to international character glyphs when needed without causing them any trouble:

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>Page title here</title>
      </head>

      Other Elements in the head

      In addition to the title and meta elements, under the HTML 4.01 and XHTML 1.0  the elements allowed within the head element include base, link, object, script, and style. Comments are also allowed. A brief discussion of the other head elements and comments follows.

      <base>  <script>, <link>, <style>
      ++++++++++++++

      <base href="http://seedocx.com/html" >
      ++++++++++++++

      <script type="text/javascript" href="ajaxtcr.js"></script>
      ++++++++++++++

      <link rel="stylesheet" media="screen" href="seedocx.css" type="text/css" >

      ++++++++++++++
      <style type="text/css" media="screen">
      h1 {font-size: xx-large; color: red; font-style: italic;} /* all h1 elements render as big, red and italic */
      </style>