<!DOCTYPE html>

Building Your First Webpage with HTML

 body { font-family: sans-serif; margin: 20px; } h1, h2, h3 { color: #333; } code { background-color: #f0f0f0; padding: 5px; border-radius: 5px; } pre { background-color: #f0f0f0; padding: 10px; border-radius: 5px; overflow-x: auto; } img { max-width: 100%; height: auto; }

Building Your First Webpage with HTML

The World Wide Web is a vast and interconnected network of information, powered by languages like HTML. This article will guide you through the basics of HTML, the fundamental building block of every webpage you see. We'll explore the key concepts, techniques, and tools you need to create your own simple webpages.

What is HTML?

HTML, which stands for HyperText Markup Language, is a markup language used to structure and organize content for the World Wide Web. It is the language that tells web browsers how to display the content of a webpage. Think of it as the blueprint for a house, defining the structure and arrangement of the rooms and elements within.

Key Concepts

Tags and Elements

The core of HTML lies in the use of tags, which are keywords enclosed in angle brackets (< and >). These tags define elements, which are the building blocks of a webpage.

For example, the  tag defines a paragraph element:

   <p>
    This is a paragraph of text.
   </p>

Each element has a starting tag and an ending tag (which includes a forward slash). Content between the tags is the actual data that will be displayed on the webpage.

2. Attributes

Elements can have attributes, which provide additional information about the element. Attributes are specified within the starting tag and have a name-value pair format:

   <img alt="A beautiful image" src="my-image.jpg"/>

In this example, src and alt are attributes that provide information about the image element.

3. Structure

The basic structure of an HTML document is as follows:

   <!DOCTYPE html>
   <html lang="en">
    <head>
     <meta charset="utf-8"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>
      My First Webpage
     </title>
    </head>
    <body>
     <h1>
      Welcome to my webpage!
     </h1>
     <p>
      This is the main content of the page.
     </p>
    </body>
   </html>

<!DOCTYPE html>:

This declaration specifies the HTML version being used.
<html lang="en">:

The root element of the document, indicating the HTML language and language of the content.
<head>:

Contains metadata about the document, such as the title, character set, and links to external resources.
<title>:

Specifies the title of the webpage, displayed in the browser tab or window title bar.
<body>:

Basics Webpage using HTML