HTML Basics: Structure and Core Elements

HTML Document Structure

Basic Template:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <!-- Page content goes here -->
    <h1>Welcome to my website!</h1>
</body>
</html>

Breakdown of Structure Elements:

1. <!DOCTYPE html>

   • Purpose: Declaration that defines this is an HTML5 document

   • Position: Must be the VERY first line

   • Note: Not an HTML tag, but an instruction to the browser

   • History: Older versions had complex DOCTYPEs; HTML5 simplified it

2. <html> Element

   • Purpose: Root element that wraps ALL HTML content

   • Attribute: lang="en" specifies the language (English)

   • Contains: Everything except <!DOCTYPE>

3. <head> Section

   • Purpose: Contains metadata (data about the webpage)

   • Not displayed: Users don't see this content directly

   • Common elements inside:

     • <title>: Page title (appears in browser tab)

     • <meta>: Character encoding, viewport settings

     • <link>: Links to CSS files

     • <script>: JavaScript references

     • <style>: Internal CSS

4. <body> Section

   • Purpose: Contains ALL visible webpage content

   • Everything users see: Text, images, links, videos, etc.

   • Structure: Follows semantic hierarchy (headings, paragraphs, etc.)

Elements & Attributes

HTML Elements

• Definition: Building blocks of HTML, defined by tags

• Syntax: <tagname>Content</tagname>

• Examples:

  html

  <p>This is a paragraph</p>
  <h1>Main Heading</h1>
  <a href="#">Click me</a>

   

Types of Elements:

1. Container Elements: Have opening and closing tags

   html

   <div>Content here</div>

2. Empty/Void Elements: Self-closing, no content

   html

   <img src="image.jpg" alt="Description">
   <br>
   <hr>
   <input type="text">

    

HTML Attributes

• Purpose: Provide additional information about elements

• Syntax: name="value" within opening tag

• Common Attributes:

  html

  <!-- Global attributes (work on most elements) -->
  <p id="unique-id">Paragraph with ID</p>
  <div class="container special">Div with classes</div>
  <p style="color: red;">Styled paragraph</p>
  <div title="Tooltip text">Hover over me</div>
  
  <!-- Specific attributes -->
  <a href="https://example.com">Link</a>
  <img src="photo.jpg" alt="A beautiful sunset">
  <input type="email" placeholder="Enter email">

   

Basic Content Elements

Headings (<h1> to <h6>)

• Purpose: Define hierarchical document structure

• Importance: <h1> is most important (main title), <h6> least

• SEO Note: Search engines use headings to understand content

• Example:

  html

  <h1>Main Title (Only one per page recommended)</h1>
  <h2>Section Heading</h2>
  <h3>Sub-section</h3>
  <h4>Sub-sub-section</h4>
  <h5>Minor heading</h5>
  <h6>Least important heading</h6>

   

Paragraphs (<p>)

• Purpose: Group blocks of text

• Behavior: Browser adds space before and after

• Example:

  html

  <p>This is a paragraph of text. It automatically wraps to multiple lines based on screen width.</p>
  <p>This is another paragraph separated by whitespace from the first one.</p>

   

Line Breaks and Horizontal Rules

1. Line Break (<br>)

   • Purpose: Force a line break within text

   • Self-closing: No </br> needed

   • Use case: Poems, addresses, or breaking lines without starting new paragraph

   html

   <p>
       123 Main Street<br>
       New York, NY 10001<br>
       United States
   </p>
   
   <p>
       Roses are red,<br>
       Violets are blue,<br>
       HTML is awesome,<br>
       And CSS too!
   </p>

    

2. Horizontal Rule (<hr>)

   • Purpose: Thematic break or visual separator

   • Self-closing: No </hr> needed

   • Visual: Creates a horizontal line across the page

   html

   <h2>Section 1</h2>
   <p>Content for section 1...</p>
   
   <hr>
   
   <h2>Section 2</h2>
   <p>Content for section 2...</p>

HTML Comments

Purpose:

• Add notes in code that browsers ignore

• Temporarily disable code without deleting it

• Explain complex code sections

Syntax:

html

<!-- This is a single-line comment -->

<!-- 
    This is a 
    multi-line comment
    spanning several lines
-->

<p>This text is visible</p>
<!-- <p>This paragraph is commented out</p> -->
<p>More visible text</p>

<!-- 
    Section: User Profile
    Author: John Doe
    Date: 2024-01-15
-->
<div class="profile">
    <!-- Profile picture will go here -->
    <img src="user.jpg" alt="User profile">
</div>

Important Notes About Comments:

1. Browser ignores: Everything between <!-- and --> is not displayed

2. Not nested: Comments cannot contain other comments

3. Visible in source: Users can view comments via "View Page Source"

4. Best practices:

   • Use comments to organize code sections

   • Explain "why" not just "what" the code does

   • Remove unnecessary comments before publishing

Complete Example Putting It All Together:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics Example</title>
</head>
<body>
    <!-- Main Header Section -->
    <h1>Welcome to HTML Basics</h1>
    <p>This page demonstrates fundamental HTML elements.</p>
    
    <hr> <!-- Visual separator -->
    
    <!-- Content Section -->
    <h2>About HTML</h2>
    <p>
        HTML (HyperText Markup Language) is the standard markup language 
        for creating web pages. It describes the structure of a web page 
        semantically.
    </p>
    
    <h3>Key Features:</h3>
    <p>
        Easy to learn<br>
        Platform independent<br>
        Supported by all browsers
    </p>
    
    <!-- Contact Information -->
    <h2>Contact Us</h2>
    <p>
        Web Development Institute<br>
        456 Tech Street<br>
        San Francisco, CA 94107
    </p>
    
    <!-- Footer -->
    <hr>
    <p>© 2024 HTML Basics Tutorial. All rights reserved.</p>
</body>
</html>

Quick Reference Table:

Pro Tips for Beginners:

1. Always close your tags (except void elements)

2. Use lowercase for tags and attributes (convention, not requirement)

3. Indent nested elements for readability

4. Validate your HTML using tools like validator.w3.org

5. Start simple and build complexity gradually

This foundation covers about 80% of what you'll use in everyday HTML coding!