Skip to main content
HashnodeSaumya AgrawalSaumya Agrawal

Command Palette

Search for a command to run...

HTML: The Lego Bricks of the Internet

Your First Step Into the World of Web Development with HTML

Updated
•8 min read
HTML: The Lego Bricks of the Internet
S
Saumya

Imagine you have a bucket of Lego bricks. You can build a castle, a Death Star, the Avengers tower, your own creation from your imagination and time.
HTML is that bucket of bricks for the internet.
It is the raw material of every single website, from Google to your college website. In the beginner friendly guide, we will explore the building blocks of the internet and get yourself the tools to turn yourself from consumer to creator.

The HTML Document Structure

Before we dive into individual HTML elements, let's understand the basic structure of every HTML document. Think of this as the foundation of your house, every webpage needs this structure to work properly.

The Complete HTML Document Template:

<!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>
    <!-- Your visible content goes here -->
    <h1>Hello World!</h1>
</body>
</html>

  1. DOCTYPE Declaration: The first line of every HTML document. It act as links to a set of rules that the HTML page had to follow to be considered good HTML. The mordern browsers use HTML5 document.

  2. The <html> Element: The root element that wraps all content. The lang="en" attribute specifies the language (English in this case)

     <html lang="en">
   <!-- Everything else goes here -->
 </html>

  3. The <head> Element: It contains settings and metadata.

     <head>
     <!-- Character encoding, how text is displayed -->
     <meta charset="UTF-8">

     <!-- Page title  -->
     <title>My Awesome Website</title>

     <!-- Viewport for responsive design -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!-- Page description for search engines -->
     <meta name="description" content="Learn HTML basics">

     <!-- Link to CSS file-->
     <link rel="stylesheet" href="style.css">
 </head>

  4. The <body> Element: It contains what users actually see.

     <body>
     <h1>Welcome!</h1>
     <p>This is visible content.</p>
 </body>

What is HTML and Why Do We Use It?

HTML stands for HyperText Markup Language, where

  • HyperText: It is the text that contains links to other documents.

  • Markup: A way to annotate or "mark up" content to give it structure and meaning.

  • Language: A set of rules for writing web content.

Why HTML?

HTML tells browsers (like Chrome, Firefox, or Safari) how to display content. Without HTML, browsers wouldn't know if text should be a heading, a paragraph, a link, or an image. It's the universal language that all web browsers understand.

Building a House                     Building a Webpage
 ├── Frame (structure)                ├── HTML (structure)
 ├── Paint (style)                    ├── CSS (style)
 └── Electricity (function)           └── JavaScript (function)

Anatomy of HTML

Lets explore how a HTML Syntax looks like and break it down:

<p class="container">This is HTML </p>

  • Tag
    HTML Tag is a set of instructions that informs the browser of the kind of content being created. The are like containers that wrap around the content, where the label of the containers tells the browser on how to handle the content.
    Tag Syntax**:** Tags are written using angle brackets: < >. They come in pairs in most cases:

      <tagname>Content goes here</tagname>

  <!-- Example-->
  <p>This is a paragraph of text.</p>

    Opening Tag: This signals the start of an element. It's written as <tagname>.
    Content: This is the actual information between the tags like text, images, or even other HTML tags.
    Closing Tags: This signals the end of an element. It's written as </tagname>.

    Self-Closing Tags: Some HTML Elements do dont need content and are complete element by themselves.
    Common Self-Closing Tags:

      <!-- Line break -->
  <br>

  <!-- Horizontal line -->
  <hr>

  <!-- Image -->
  <img src="photo.jpg" alt="A beautiful sunset">

  <!-- Input field -->
  <input type="text" placeholder="Enter your name">

  • Attribute
    Attributes add extra information or functionality to elements. They are present in the opening tag.

      <tagname attribute="value">Content</tagname>

  <!-- Example -->
  <a href="https://example.com">Visit Website</a>

    Common attributes:

    • href - links to other pages or posts

    • src - specifies image sources

    • class - groups elements for styling (like "blog-post", "sidebar")

    • id - unique identifier for a specific element

    • alt - describes images for accessibility

    • style- inline styling

        <!-- href for links -->
  <a href="https://example.com">Visit Website</a>

  <!-- src and alt for images -->
  <img src="photo.jpg" alt="A beautiful sunset">

  <!-- id unique identifier -->
  <div id="header">Website Header</div>

  <!-- class for styling or functionality-->
  <p class="highlight">This paragraph has a class</p>

  <!-- style inline styling -->
  <p style="color: blue; font-size: 16px;">Blue text</p>

  • HTML Element

    The complete package: opening tag + content + closing tag. They can be nested too.

      <!-- Example -->
  <div>
    <h2>My Favorite Books</h2>
    <p>I love reading science fiction!</p>
  </div>

    Block-Level vs Inline Elements

    HTML elements are displayed in two main ways: block-level and inline. Understanding this difference is crucial for creating proper layouts.
    Inline elements:

    • Stay on the same line as surrounding content

    • Only take up as much width as needed

    • Flow like words in a sentence
      Some Inline elements are:

        <span>Generic inline container</span>
  <a href="#">A link</a>
  <strong>Bold text</strong>
  <em>Italic text</em>
  <img src="icon.png" alt="Icon">

Block-level elements:

  • Start on a new line

  • Take up the full width available

  • Stack on top of each other like building blocks
    Some Block level elements are:

      <div>A generic container</div>
  <p>A paragraph</p>
  <h1>A heading</h1>
  <ul>
    <li>List item</li>
  </ul>
  <section>A section</section>

HTML Tags

  1. Core Structure Tags: These define the skeleton of any HTML document.

    | Tag | Purpose | | --- | --- | | <html> | Root of the document | | <head> | Metadata, styles, title | | <title> | Browser tab title | | <body> | Visible content | | <meta> | Charset, viewport, SEO | | <link> | External CSS, icons | | <style> | Internal CSS | | <script> | JavaScript |

  2. Text & Content Tags:

    | Tag | Purpose | | --- | --- | | <div> | Generic container | | <span> | Inline container | | <p> | Paragraph | | <h1>–<h6> | Headings | | <strong> | Important text (bold) | | <em> | Emphasized text (italic) | | <br> | Line break | | <hr> | Horizontal divider |

  3. Layout & Semantic Tags: These give meaning to your layout (SEO + accessibility).

    | Tag | Purpose | | --- | --- | | <header> | Top section | | <nav> | Navigation | | <main> | Main content | | <section> | Logical section | | <article> | Independent content | | <aside> | Sidebar | | <footer> | Footer |

  4. Links, Media & Assets:

    | Tag | Purpose | | --- | --- | | <a> | Hyperlinks | | <img> | Images | | <video> | Video playback | | <audio> | Audio playback | | <source> | Media source | | <iframe> | Embed content | | <picture> | Responsive images |

  5. Lists & Tables:

    Table:

    | Tag | Purpose | | --- | --- | | <table> | Table container | | <tr> | Table row | | <td> | Table cell | | <th> | Header cell | | <thead> | Table header | | <tbody> | Table body | | <tfoot> | Table footer |

List:

TagPurpose
<ul>Unordered list
<ol>Ordered list
<li>List item

  1. Forms & User Input:

    | Tag | Purpose | | --- | --- | | <form> | Form container | | <input> | Input field | | <textarea> | Multi-line input | | <button> | Button | | <label> | Input label | | <select> | Dropdown | | <option> | Dropdown option | | <fieldset> | Group inputs | | <legend> | Fieldset title |

  2. Interactive & UI Enhancement Tags:

    | Tag | Purpose | | --- | --- | | <details> | Expandable content | | <summary> | Title for <details> | | <dialog> | Modal dialog | | <progress> | Progress bar | | <meter> | Measurement display |

Quick Reference Cheat Sheet

<!-- Document Structure -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>

<!-- Text -->
<p>Paragraph</p>
<strong>Bold</strong>
<em>Italic</em>

<!-- Containers -->
<div>Block container</div>
<span>Inline container</span>

<!-- Attributes Example -->
<a href="url" title="Link title">Link text</a>
<img src="image.jpg" alt="Description" width="300">
<div id="unique" class="shared-style">Content</div>

<!-- Lists -->
<ul>
  <li>Unordered item</li>
</ul>
<ol>
  <li>Ordered item</li>
</ol>

<!-- Links & Images -->
<a href="url">Link text</a>
<img src="image.jpg" alt="Description">

<!-- Self-Closing -->
<br>
<hr>
<input type="text" placeholder="Enter text">

You Have the Bricks, Now Build the Castle

At the start of this guide, we imagined a bucket of Lego bricks. You have now learned the names of those bricks: tags, attributes, elements, and the document structure.

You have moved from being a passive consumer of the web to an active creator. The code you see on your screen might look simple, just text inside angle brackets, but it is the skeleton of every digital experience you love.

Your Next Challenge: Don't let this knowledge sit. Open a IDE, write your first <h1>, and see how does browser responds. It won't be perfect, and it won't be styled yet. This is where CSS comes to play, which is the paint, decoration, and style that brings your HTML skeleton to life.

The bucket is open. Go build something amazing.

Additional Resources:

#html#html-tags#chaicode
5 views

More from this blog

S

Saumya Agrawal

40 posts