The Building Blocks of a Web Page: A Comprehensive Guide to HTML

HTML, which stands for Hypertext Markup Language, is the standard markup language used to create web pages. It's one of the fundamental technologies used to create and design websites along with CSS and JavaScript. In this blog post, we'll break down the process of creating a basic web page using HTML.

Introduction to HTML

HTML uses "tags" to structure content on a web page, such as headings, paragraphs, links, images, etc. Each tag tells the browser how to display the content within it.

An HTML document is divided into two main parts:

The head: This section doesn't contain the actual content to be displayed but includes the title of the web page (displayed on the browser's title bar or tab), links to CSS files, meta information, and more.
The body: This is where all the content that appears on the web page goes. This could include text, images, videos, forms, and other elements.

Creating an HTML Page

Let's take a look at how to create a basic HTML page.

First, open a text editor (like Notepad or Sublime Text), and save a new file with an ".html" extension, like "index.html".

Document Declaration and HTML Tag

An HTML document starts with the document type declaration <!DOCTYPE html> . This tells the browser that the document is an HTML5 document. The <html> tag follows, wrapping all the content of the page.

Example in html

<!DOCTYPE html> 
<html> 
... 
</html>

Head Section

The <head> tag comes next and it encapsulates elements like the title of the page, meta tags, and links to CSS files.

Example in html

<head> 
    <title>My First Web Page</title> 
</head>

The <title> tag defines the title of the webpage, which is displayed in the browser's title bar or tab.

Body Section

The <body> tag contains all the content that is rendered on the web page such as text, images, and more.

Example in html

<body> 
    <h1>Welcome to My First Web Page</h1> 
    <p>This is a paragraph of text on my web page.</p> 
</body>

In this example, <h1> is a heading tag (with 1 being the highest level and 6 the lowest), and <p> is a paragraph tag.

Adding an Image

You can add an image using the <img> tag. The src attribute is used to specify the path to the image file.

Example in html

<img src="image.jpg" alt="Description of Image">

The alt attribute provides alternative text for the image if it cannot be displayed.

Adding Links

To add a link, we use the <a> tag. The href attribute is used to specify the URL of the page the link goes to.

Example in html

<a href="https://www.example.com">This is a link</a>

Final HTML Page

Combining all the parts, the final HTML document will look something like this:

Example in html

<!DOCTYPE html> 
<html> 
<head> 
    <title>My First Web Page</title> 
</head> 
<body> 
    <h1>Welcome to My First Web Page</h1> 
    <p>This is a paragraph of text on my web page.</p> 
    <img src="image.jpg" alt="Description of Image"> <a href="https://www.example.com">This is a link</a> 
</body> 
</html>

This is a simple HTML document, but it introduces the fundamental elements used in every HTML web page.

Conclusion

HTML is the foundation of any website. Understanding how to use HTML tags to structure and add content to your web pages is the first step in web development. As you become more familiar with different HTML tags and attributes, you can start adding more complexity to your pages, such as forms, lists, tables, and more.