HTML Structure and Syntax

HTML (HyperText Markup Language) is the foundation of every webpage you see. It provides the structure and content for everything, from text and images to videos and interactive elements. Understanding HTML is the first step to becoming a web developer.

What is HTML?

HTML uses tags to define elements on a webpage. These tags tell the browser how to display the content. Think of it like building blocks: each block (tag) represents a piece of the webpage, and you combine them to create the complete structure. The browser reads the HTML code and renders the webpage based on the instructions within the tags.

Basic Example

Let’s look at a very simple HTML document:


<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first paragraph.</p>
</body>
</html>

<!DOCTYPE html>: This declares the document as HTML5. It tells the browser what version of HTML is being used.
<html>: This is the root element and encompasses the entire HTML document.
<head>: This section contains metadata about the page, such as the title (which appears in the browser tab) and links to external resources like CSS stylesheets.
<title>: This tag defines the title of the webpage, shown in the browser’s title bar or tab.
<body>: This section contains the visible content of the webpage, such as headings, paragraphs, images, and links.
<h1>: This tag creates a level 1 heading (the largest and most important heading).
<p>: This tag creates a paragraph of text.

Practical Usage

Here’s an example of how you might structure a simple webpage with a heading, a paragraph, and an image:


<!DOCTYPE html>
<html>
<head>
  <title>My Page with an Image</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph about my website.  It's pretty cool!</p>
  <img src="my-image.jpg" alt="A descriptive alt text for my image">
</body>
</html>

In this example:

We’ve added an <img> tag. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image (helpful for accessibility and SEO). Always include alt text.
The alt attribute is very important for accessibility. If the image can’t be loaded, the alt text will be displayed instead. It also helps search engines understand the content of your image.

Key Takeaways

HTML uses tags to structure content.
Tags are enclosed in angle brackets (<tag>).
There’s a basic structure: <!DOCTYPE html>, <html>, <head>, and <body>.
The <body> contains the visible content of the webpage.
Always use descriptive alt text for images.