HTML Structure

Let’s begin with the fundamental building blocks of HTML – the structure of a webpage. HTML (HyperText Markup Language) is the language used to create web pages. It’s not a programming language like JavaScript, but it’s the foundation for all interactive elements on a website. Think of it like the skeleton of a website – it provides the structure and content. Without a proper HTML structure, your webpage will be a jumbled mess, difficult to read and navigate. This tutorial will cover the basics of HTML, focusing on creating a simple, functional webpage.

– The Main Content

The <body> element is the container for all the content that users will see on your webpage. Everything goes inside the <body> tag. This includes text, images, links, and other elements. The <body> element is always the last element in the HTML document.

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <a href="https://www.netgramnews.com">Visit NetGram</a>
</body>

In this example:

• <body> – The container for the content.
• <h1> – A level 1 heading.
• <p> – A paragraph of text.
• <a href="https://www.netgramnews.com"> – A hyperlink.

– Headings

Headings are used to structure content and indicate its importance. HTML defines three heading levels:

• <h1> – Largest heading, used for the main title of the page.
• <h2> – Second-level heading, used for subheadings.
• <h3> – Third-level heading, used for further subheadings.

<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<h3>My Interests</h3>

<p> – Paragraphs

Paragraphs are used to display text that is not part of a heading. They are typically used for descriptions, explanations, and other text content.

<p>This is a paragraph of text. It's a simple example of how to use HTML.</p>

<a> – Links

The <a> (anchor) tag is used to create hyperlinks. It defines a link to another webpage or resource.

<a href="https://www.netgramnews.com">Visit NetGram</a>

<img> – Images

The <img> tag is used to display images on your webpage.

<img src="image.jpg" alt="A beautiful landscape">

• src – Specifies the URL of the image file.
• alt – Provides alternative text for the image, displayed if the image cannot be loaded. This is important for accessibility.

– The Closing Tag

The </body> tag closes the <body> element. It's essential to include it at the end of your HTML document.

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <a href="https://www.netgramnews.com">Visit NetGram</a>
</body>

– Headings and Paragraphs – A Complete Example

Here's a complete HTML document demonstrating the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Simple Website</title>
</head>
<body>

  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.  It's a simple example of how to use HTML.</p>
  <a href="https://www.netgramnews.com">Visit NetGram</a>

</body>
</html>

💡 Tip: Use semantic HTML tags like <article>, <aside>, and <nav> to structure your content logically. These tags help search engines and assistive technologies understand your page better.