HTML (HyperText Markup Language) is the foundation of every web page. Think of HTML as the skeleton of a body: it provides structure and defines how the content is arranged. Without HTML, the content would have no form, and web pages would just be a jumble of text.

The Structure of an HTML Document

An HTML document begins with a few basic elements that define the structure:

DOCTYPE Declaration
This tells the browser which version of HTML you’re using.
HTML Tag
The <html> tag wraps all of the content on the page.
Head Section
The <head> section contains metadata (data about the data) such as the title, character set, and links to external files like stylesheets.
Body Section
The <body> tag contains all the visible content like text, images, and links.

HTML Tags and Elements: The Basic Building Blocks

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Explanation:

<!DOCTYPE html> declares the document type.
<html lang="en"> starts the HTML document and sets the language to English.
Inside the <head> section, the meta tags define the character set and responsiveness, and the <title> tag specifies the page’s title in the browser tab.
The <body> section contains the content that appears on the web page, such as headers and paragraphs declares the document type.

Analogy: HTML as the Skeleton of the Body

Imagine you're designing a human body. The skeleton is the structure that holds everything together: muscles, organs, skin, etc. Similarly, HTML provides the structure for a webpage, like where to place your text, images, links, and so on.

Here’s how this analogy works:

HTML Tags are like bones, giving the page structure.
CSS (Cascading Style Sheets) is like the skin and muscles that style and position the bones, making everything look appealing.
JavaScript adds functionality to the body, like how muscles allow you to move.

Key Tags to Know

Here’s a list of essential HTML tags to get started:

<h1> - <h6>: Headings, from the most important (h1) to the least (h6).
<p>: Paragraph, for text.
<a href="URL">: Link, to connect to other pages or resources.
<img src="image.jpg" alt="Image description">: Image, to display pictures.
<ul>, <ol>, <li>: Lists, both unordered and ordered.
<div>: A block-level container for grouping content.

There are many tags but basics tags are covered above

Conclusion

Building an HTML skeleton for a web page is the first step toward web development. It’s simple but powerful, like the foundation of a house or the skeleton of a body. Once you master HTML’s basic tags and structure, you’ll be well on your way to creating functional, well-structured web pages.

HTML for Beginners: Building the Skeleton of a Web Page