HTML 101: Skeleton of the Web
Why Your Code Needs a Cabinet: Understanding Web Structure
What is HTML?
Suppose you are building your dream PC, You spend months saving up. You go to the local shop, hand-pick the most powerful graphics card, the fastest CPU, and the best RAM. You buy it all. But when you get home, you realize you forgot the most important part: the Cabinet (Case).
Without the cabinet the parts you bought, are nothing but expensive pile of useless part as there is nothing to provide them structure.
HTML is your that cabinet.
Just as a cabinet holds the computer parts in place to make a working machine, HTML (HyperText Markup Language) holds your website content together. It provides the layout and structure. It tells the browser where the images go, where the text sits, and where the buttons belong. Without HTML, the web is just raw, unorganized data.
Is HTML Programming Language?
Technically, no.
A programming language (like Python or Java) uses math and logic to solve problems (e.g., "Calculate 2 + 2" or "If X happens, do Y").
A markup language (like HTML) doesn't "think" or perform logic. It simply uses tags to display information. It tells the browser: "This is a bold word" or "This is a picture."
What is HTML Tag?
Every language has rules. In English, we call it grammar. In code, we call it syntax. To communicate with a web browser, you must speak its syntax.
Let’s look at the syntax of the tag:
Opening Tag: <p> This is an opening tag, it tells the browser that the paragraph starts from here.
Content: Anything you write between this tags is treated as the content of the tag.
Closing Tag: </p> This is a closing tag. This informs the browser that paragraph ends here.
Element: Opening Tag + Content + Closing Tag. Together they are known as a element.
Beginners often confuse "Tag" and "Element." Just remember: The Tag is just the <keyword>, but the Element is the whole package (tags + content).
The BoilerPlate Code: Decoding the Matrix
This is what a boiler plate code of html looks like. Let me explain you what everything means.
1. <!DOCTYPE html>
This is a declaration, not a tag. It simply tells the browser, "Hey, I am using HTML5 (the modern standard)."
2. <html lang=”en”>
The Root: The
<html>tag is the root element of the page. Everything else wraps inside it.The Language: The
lang="en"attribute specifies that the content is in English. This is crucial for:Accessibility: Screen readers use this to determine the correct pronunciation.
SEO: Search Engine Optimisation.
3. <head>
(The Brain) This section holds information about the page that the user doesn't see directly—like settings, the page title, and links to CSS files.
4. <meta charset=”UTF-8”>
(The Translator) This sets the character encoding. UTF-8 covers almost every character, symbol, and emoji in the world. Without this, your emojis might show up as random gibberish (e.g., •).
5. <meta name=”viewport” content=””>
(The Mobile Fix) This is critical for mobile devices. It tells the browser to match the website width to the device's screen width. Without this, your phone would try to shrink a desktop-sized site onto a tiny screen, making the text unreadable.
6. <title>My First Web Page</title>
The Tab Name: This sets the text you see in the browser tab at the very top of the window. It is also the text that appears as the clickable headline in Google search results.
7. <body>
The Visible Content: This contains everything the user actually sees on the screen—text, images, buttons, and videos. If it's not in the body, it won't be rendered on the page canvas.
HTML Tags
Before we learn about some html tags, let us understand some block elements v/s inline elements.
You must scene in many web pages that some heading occupies the whole width of the page while some only occupy a part of the width. The element which occupy whole width is called Block Elements while the other is called Inline Element, they don’t occupy the whole width. Block elements always start from a new line like in the above picture, while you can find many inline elements on the same line.
Self-Closing Tags
In above you have noticed that an element is a combination of Opening Tag + Content + Closing Tag. But in html there are also few elements which don’t have a closing tag. We call them as Self Closing Tab as there is no need to specifically mention a closing tag.
Since tags like Images (<img>) or Line Breaks (<br>) don't hold any text content inside them, they don't need a closing tag. We call these Self-Closing Tags or Void Elements.
And for tags you can go on the internet and read about them as it will be more helpful to you then just reading the tags on the blog.
#HTML #WebDevelopment #Frontend #CodingForBeginners #LearnToCode #100DaysOfCode #DevCommunity #Programming #TechBlog #HTML5 #ChaiCode