Mastering HTML: A Beginner's Guide to Web Development

Introduction

Have you ever visited a website and wondered, "How do all these pieces come together? How does the browser know where to place the text, images, and links?" Well, the answer lies in HTML.
You can think of HTML as the blueprint for a house. Just as a blueprint tells builders where to place walls, windows, and doors, HTML outlines where each element of a webpage should go.

💡

What if there was no HTML? How would web browsers even know how to display a page?

HTML (Hyper Text Markup Language)

HTML is a markup language which is used to interpret and compose texts, images, and other material into the browser as a web page.
In layman's terms, HTML is like the skeleton of a website. Think of it as the building blocks that create the structure and look of a website, similar to how bricks and mortar are used to build a house.

It consists of a set of tags contained within an HTML document, and the associated files typically have either a ".html" or ".htm" extension.
It was created by Tim Berners-Lee in 1991.

Features of HTML

It is platform-independent language.
Images, videos, and audio can be added to a web page.
IT is a markup language and not a programming language.
It can be integrated with other languages like CSS, JavaScript, etc. to show interactive (or dynamic) web pages.

Why the Term HyperText & Markup Language?

The term 'Hypertext Markup Language' is composed of two main words: 'hypertext' and 'markup language.' 'Hypertext' refers to the linking of text with other documents, while 'markup language' denotes a language that utilizes a specific set of tags.

Open a webpage of your choice, right-click on the browser, and select 'View Page Source,' and then you will see the HTML code for that page.

HTML Page Structure

An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets and acts as a container for content or other HTML tags.
Let's take a look at a basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
   <!-- content -->
</body>
</html>

Now break down its structure:

<!DOCTYPE html> : It informs the web browser about the HTML version being used. The latest version is HTML5.
<html> </html> : It is the root element that encapsulates all the content on the page.
<head> </head> : It contains metadata and links to external resources like CSS and JavaScript files.
<title> Document </title> : It sets the title of the web page, which is displayed in the browser's title bar or tab.
<body> </body> : It contains the visible content of the web page. This is where text, images, and other elements go.

Tags, Elements & Attrinutes

Tags :

Tags are words enclosed within < and > angle brackets.
They serve as keywords that instruct the web browser on how to format and display the content.
Tags can be broadly categorized into two types:

Container Tags : The tags in pairs, consisting of an opening tag and a corresponding closing tag. The content goes between these two tags.
Empty Tags : These are tags that don't require a closing tag. They are self-contained, encapsulating all the information within a single tag.

Examples of some tags :

Elements :

An HTML element is a complete set that consists of a start tag (or opening tag), content, and an end tag (or closing tag).

HTML Element = Start Tag + Content + End Tag.

Attributes :

They used to define the characteristics of an HTML element. They are placed within the element's opening tag and consist of two parts: the name and the value.

Name: Specifies the property for that element.
Value: Sets the value of that property for the element.
Most widely used attributes are : id, class, title, style.

Inline v/s Block Elements

Inline elements take up as much width as necessary. They do not start on a new line. They can contain other inline elements, but they generally should not contain block-level elements
Block-level elements are those that start on a new line and take up the entire width of their container by default. They essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line.

Semantic Tags

Semantic tags add meaning to your HTML. They tell both the browser and the developer what kind of content is being presented.

💡

enhance SEO, improve accessibility, and make your code easier to read and maintain.

As you explore HTML further, what aspects of web development are you most eager to delve into next? Is it CSS for styling, JavaScript for interactivity, or perhaps exploring more about how websites are hosted and deployed?

From Tags to Pages: An Intro to HTML

Table of contents