Kenhuang Academy
  • English

      • HTML Basics

      All HTML documents share a common basic structure. Understanding this structure is the first step in learning HTML. Let's look at a simple HTML document example.

      A Basic HTML Document

      <!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

</body>
</html>

      Now, let's break down this structure line by line:

      1. The <!DOCTYPE html> Declaration

      • Purpose: <!DOCTYPE html> is a Document Type Declaration that tells the browser this page is written using the HTML5 standard.
      • Position: It must be the first line of the HTML document, before the <html> tag.
      • Note: This is not an HTML tag, but a directive. It is case-insensitive, but the uppercase form <!DOCTYPE html> is generally recommended.

      2. The <html> Element

      • Purpose: The <html> element is the root element of the entire HTML page. All other elements must be nested between the <html> and </html> tags.
      • lang Attribute: It's common to add a lang attribute to the <html> tag to declare the primary language of the page, e.g., <html lang="en"> for English, <html lang="zh-CN"> for Simplified Chinese. This helps with SEO and assistive technologies like screen readers.

      3. The <head> Element

      • Purpose: The <head> element contains the page's metadata. This information is not directly displayed in the browser's main window but defines various properties and information about the document.
      • Contents: The <head> element typically includes:
        • <title>: Defines the title displayed in the browser tab or window title bar. This is the only required element within <head>.
        • <meta>: Provides metadata about the HTML document, such as character set declaration (<meta charset="UTF-8">), page description, keywords, etc.
        • <link>: Used to link external resources, most commonly external CSS stylesheets.
        • <style>: Used to define internal CSS styles.
        • <script>: Used to link or write JavaScript code.

      4. The <body> Element

      • Purpose: The <body> element defines the main content of the HTML document. All content you want users to see in the browser should be placed between the <body> and </body> tags.
      • Contents: This includes text, headings (<h1> to <h6>), paragraphs (<p>), images (<img>), links (<a>), lists, tables, etc., forming the visible part of the web page.

      Nesting Tags

      HTML builds structure through nesting tags. An element can contain other elements, like Russian nesting dolls. Proper nesting is crucial.

      <!-- Correct nesting -->
<p>This is an <strong>important</strong> paragraph.</p>

<!-- Incorrect nesting -->
<p>This is an <strong>important</p></strong> paragraph.

      On top of this basic structure, we build rich web content by adding more HTML elements to the <body>.