Back to Overview

HTML

web frontend fundamentals

What is HTML?

HTML (HyperText Markup Language) is like a set of LEGO bricks for building webpages. Just like how you use different LEGO pieces to build things, you use different HTML tags to create different parts of a webpage. It’s the basic structure that holds everything together on the internet!

Simple Analogy

Think of HTML like building with LEGO:


  • The Base Plate (<html>): The foundation everything sits on
    • The Building Area (<body>): Where you build your actual LEGO creation
    • The Instructions (<head>): Where you put information about your creation

  • Building Pieces:
    • Big Blocks (<div>, <section>): Like LEGO walls that create rooms
    • Special Pieces:
      • <h1> to <h6>: Like different sized doorways
      • <p>: Like furniture pieces for text
      • <img>: Like LEGO pictures you can hang on walls
      • <a>: Like LEGO doors that lead to other creations

  • Connecting Pieces:
    • Attributes: Like special LEGO connectors
      • class: Like using the same color bricks for similar things
      • id: Like putting a unique sticker on one special brick
      • src: Like instructions for where to find a special piece
      • href: Like building a bridge to another LEGO creation

Key Concepts

  • Elements: Complete LEGO pieces (a tag and its content, like <p> Hello! </p>)
  • Tags: The markers that show where elements start and end (like <p> and </p>)
  • Nesting: Putting elements inside other elements (like putting small LEGO pieces inside a big room)
  • Content: The actual stuff inside tags (like the LEGO people and furniture inside a room)
  • Attributes: Extra information about elements (like special features on LEGO pieces)
  • Semantic HTML: Using the right piece for the right job (like using door pieces for doors, not for windows)

Example

<!-- A simple LEGO house webpage -->
<html>
  <head>
    <title>My LEGO House</title>
  </head>
  <body>
    <!-- A big room -->
    <div class="room">
      <!-- A doorway -->
      <h1>Welcome to My Room!</h1>
      
      <!-- Some furniture -->
      <p>This is my awesome LEGO room.</p>
      
      <!-- A picture on the wall -->
      <img src="lego-picture.jpg" alt="My LEGO creation">
      
      <!-- A door to another room -->
      <a href="next-room.html">Go to next room</a>
    </div>
  </body>
</html>