<![CDATA[HTML for beginners: Building Skeleton]]>https://html-for-beginners-building-skeleton.hashnode.devRSS for NodeWed, 16 Sep 2026 19:50:27 GMT60<![CDATA[HTML for Beginners: Building the Skeleton of a Webpage]]>https://html-for-beginners-building-skeleton.hashnode.dev/html-for-beginners-building-the-skeleton-of-a-webpagehttps://html-for-beginners-building-skeleton.hashnode.dev/html-for-beginners-building-the-skeleton-of-a-webpageTue, 21 Jan 2025 04:00:00 GMTIt was a quiet evening when I attended my first HTML class on ChaiCode after attending my first class. Then I decided to build my first webpage because I understood how websites worked. I thought. That’s when I stumbled upon HTML, the magical language that forms the backbone of every webpage we see.

Let’s know about what is HTML

What is HTML?

  • When building a webpage, think of HTML(Hypertext Markup Language) as the skeleton that provides structure. Just like a building needs blueprints, HTML is the foundation for organizing content on the web.

Let's see with Diagram

Now we can see the Key Topic of HTML

  1. HTML for Beginners: Building the skeleton of a webpage

    • Every HTML document starts with the <!DOCTYPE HTML>declaration, followed by essential tags like <HTML>,<head>, and <body>.

    • The <head> section contains metadata, like the title and links to stylesheets.

    • The <body> section holds the page's visible content, such as headings, paragraphs, images, and links.

Structure of HTML

Now we can see what HTML tags

What Are HTML Tags?

HTML tags are the building blocks of any webpage. Think of them as labels that tell the browser how to display the content. For example, when you write a paragraph, you use the <p> tag to inform the browser, “Hey, this is a paragraph.”

Tags are usually enclosed in angle brackets, like <tag>. Most tags come in pairs:

  1. Opening tag: <tag>

  2. Closing tag: </tag>
    The content goes between these tags.

Types of HTML Tags

  1. Basic Structure Tags

  • <html>: This wraps everything and tells the browser, “This is an HTML document.”

  • <head>: This is where you put things like the page title, styles, and metadata (stuff the user doesn’t see directly).

  • <body>: This is the visible part of your webpage—the text, images, buttons, etc.

  1. Content Tags

  • <h1> to <h6>: These are for headings. <h1> is the largest, and <h6> is the smallest. Think of them as the titles and subtitles of your webpage.

  • <p>: For paragraphs. Use this to write normal text.

  • <a>: This is for links. Do you want to link to Google? Use:

    <a href="https://google.com">Go to Google</a>

<img>: This adds images to your webpage. Example

        <img src="image.jpg" alt="Description of the image">

  1. Layout Tags

  • <div>: A container for grouping elements. Think of it as a box you can use to organize your content.

  • <span>: A smaller container used to style specific parts of text, like making one word bold.

  1. Form Tags (For Input Fields)

  • <form>: Wraps a form.

  • <input>: For text boxes, buttons, etc. Example:

            <input type="text" placeholder="Enter your name">

  • <button>: Adds a button.

Conclusion :

  • Building webpages with HTML is like learning a new language—it might feel unfamiliar at first, but with practice, it becomes second nature. So, grab your "HTML toolkit," start experimenting with tags, and watch your ideas come to life on the web!

    Happy coding! 🚀

]]>