The Building Blocks of a Web Page: A Comprehensive Guide to 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.
<html> ... </html>
<head> tag comes next and it encapsulates elements like the title of the page, meta tags, and links to CSS files.
<head> <title>My First Web Page</title> </head>
<title> tag defines the title of the webpage, which is displayed in the browser's title bar or tab.
<body> tag contains all the content that is rendered on the web page such as text, images, and more.
<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.
<img src="image.jpg" alt="Description of Image">
alt attribute provides alternative text for the image if it cannot be displayed.
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.
<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:
<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.
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.