Rohitash Singh

Posted on Dec 21, 2023 • Edited on Jun 13

Demystifying HTML: A Comprehensive Guide for Beginners

HTML, acronym of HyperText Markup Language, is the backbone of the World Wide Web. It serves as the standard markup language used to create and structure content on the internet. Understanding HTML is essential for anyone looking to venture into web development, whether as a hobbyist or a professional. In this blog post, we will take a detailed look at HTML, its fundamentals, structure, and some advanced features.

Note: HTML- A Markup Language, Not a Programming Language:

A markup language is used to annotate text to provide additional information about its structure. HTML, which stands for HyperText Markup Language, fits perfectly into this category. Its primary purpose is to structure content on the web by utilizing a system of tags that surround pieces of text to indicate their purpose.

What is HTML?

HTML is a markup language that defines the structure of a web page. It consists of a series of elements, each represented by tags, which are used to enclose or wrap different parts of content. These elements can include headings, paragraphs, links, images, and more.

Basic Structure of an HTML Document:

An HTML document typically consists of the following basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
    <h1> Hello World!!</h1>
</body>
</html>

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used (in this case, HTML5).
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document, such as the title (displayed in the browser's title bar or tab).
<title>: Sets the title of the HTML document.
<body>: The content visible in the browser window is defined within the <body> tag. It Contains the content of the HTML document, such as text, images, links, and more.

HTML Elements:

HTML elements are the building blocks of a web page. Each element is represented by a pair of tags, an opening tag, and a closing tag. Some elements are self-closing and don't require a closing tag. Here are a few common HTML elements:

Headings:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

h1 is highest section level and h6 is lowest section level.

Paragraphs:
```
<p>This is a paragraph of text.</p>
```

Links:

<a href="https://www.google.com">Visit Google</a>

Images:

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

Attributes:

HTML elements can have attributes that provide additional information about them. Attributes are always included in the opening tag and are written as name/value pairs.

<a href="https://www.google.com" target="_blank">Visit Google</a>

href: Specifies the URL of the linked resource.
target="_blank": Opens the link in a new browser tab or window.

List

Ordered List

Ordered list has a specific order.

<ol>
    <li>Mango</li>
    <li>Apple</li>
    <li>Guava</li>
</ol>

UnOrdered List

It has no specific order.

<ul>
    <li>Code</li>
    <li>Execute</li>
    <li>Run</li>
</ul>

Anchor Element

Used to add link to our pages.
Google

Br Tag

Used to add next line or line breaks to our text.

<br>

Bold, Italic & Underline tags

Used to highlight text in page.

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>

Comments in HTML

This is a part of code that should not be parsed.

    <!-- This is comments -->

Case Sensitive

HTML is not Case Sensitive.

<html> = <HTML> = <hTML>
<p> = <P>
<head> = <HEAD>
<body> = <BODY>

Inline V/S Block

Block Elements

start from new line and take full with of the window.

<div>Hello </div>
<div>World </div>

Inline Elements

Takes up only necessary width.
Don't start from new line.

<span>Hello World!!</span>

div Element

Div is a container used to hold other HTML elements or group elements together.
It is a block Element.

<div>This is a div Container </div>

Span Element

Span is also a generic element used to hold other HTML elements or group elements together.
It is an inline Element.

<span>This is span tag</span>

Hr Tag

Horizontal Rule Element
It is used to draw horizontal line.

<hr>

Sub & Sup Tag

a2 = b2 + c2 -> SuperScript

a<sup>2</sup> = b<sup>2</sup> = c<sup>2<sup>

H20 -> SubScript

H<sub>2</sub>O

HTML Forms:

Forms are used to collect user input. HTML provides various form elements such as text fields, checkboxes, radio buttons, and more.

<form action="/submit_form" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <input type="submit" value="Submit">
</form>

action: Specifies the URL to which the form data will be submitted.
method: Specifies the HTTP method (e.g., GET or POST) used when sending form data.

Advanced HTML:

HTML has evolved, and HTML5 introduces several new elements and attributes. Some of these include:

Semantic Elements:

<article>, <section>, <header>, <footer>, <nav>, <aside>, <figure>, <figcaption>

Audio and Video:

<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>

Canvas:

<canvas width="200" height="100"></canvas>

Geolocation:

<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Get Location</button>

Conclusion:

HTML is the cornerstone of web development. This guide provides a solid foundation for beginners to start creating web pages. As you continue your journey, explore CSS for styling and JavaScript for interactivity to take your web development skills to the next level. With HTML as your starting point, you are well on your way to becoming a proficient web developer.
Know More
Follow me for more like this.

Happy coding!

DEV Community