HTML Basics: A Beginner's Guide

What is HTML ? (Analogy)

HTML (HyperText Markup Language) is standard language that help to make structure of webpage. Lets think that HTML as a car. HTML is the skeleton of the car it gives shape and structure. Where the door will be attached and the wheels are also. But it's doesn't make the car fancy or move to another place.

Understanding html with a code snippet and example every tag?

HTML code snippet is a small part of HTML code. it's not a whole webpage. Here are the examples:

<!DOCTYPE html> It’s declares the document type as HTML5.
<html lang=”en”> The lang="en" attribute specifies the language as English.
<html> This tag is one of the most basic tag in HTML. This tag contain the hole html code like <head> <body>
<head> This tag contain information about the webpage. such a title, meta information, and link to other resource. This information are not showing in Web browser.
<meta> This tag contain additional information about webpage.
<title> This tag use to set the title of the webpage.
<link> This link tag use to link others resources like stylesheet, script and for icons.
<body> The body tag is contain the hole main contain in webpage. Including images, icons, text, media, links.
<h1> This tag is Heading tag. There are <h1> to <h6> heading tags. <h1> is big heading tag and <h6> is small heading tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Simple HTML Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is a Simple HTML Snippet</h1>
</body>
</html>

Some HTML elements:

HTML element describe the structure and meaning of web content. Browser read these elements and render them visually for users. Here are some common elements described in below:

<h1> to <h6>: They are HTML heading elements (<h1> it defines the main heading or most important title on a webpage, <h6> it’s the smallest and least important heading in the HTML heading hierarchy.)
<p> Paragraph.
<br> Line break.
<hr> Horizontal rule. (horizontal line)
<span> This HTML tag is an inline container, it’s use for grouping and styling.
<b> This tag is used to bold text.
<ol> Ordered list.
<ul> Unordered list.
<li> List item.
<dl> Description list.
<dd> Description or definition in a description list.
<dt> Term in a description list.
<a> Anchor (Hyperlink).
<img> Image.
<figure> Container of figures (e.g., images with captions).
<figcaption> Figure of caption.
<video> Video player.
<audio>: Audio player.
<source>: Media source for <video> or <audio>.
<iframe>: Inline frame to embed content from another source.
<form>: Form container.
<input>: Input field (text, password, email, etc.).
<textarea>: Multi-line text input.
<button>: Button.
<label>: Label for form elements.
<table>: Table container.
<thead>: Table header.
<tbody>: Table body.
<tfoot>: Table footer.
<tr>: Table row.
<th>: Table header cell.
<td>: Table data cell.
<caption>: Table caption.

What is tag?

Tag is a piece of code. In HTML tag help to make a structure of webpage.

<p>Hello World!</p>

<p> is opening tag. It’s says paragraph starts here.

</p> is closing tag. It’s says paragraph end here.

Different between tag and element ?

Tags is a part of a code that used to define elements. Element is the hole thing that opening and closing and the content inside the tag. here are the examples

<p> THIS IS PARAGRAPH. </p>

<p> this is opening tag

</p> this is closing tag

This is paragraph = Content

*This hole things is a paragraph element.

What is attribute?

Attribute contains extra info about HTML element. Here are the examples

<a href="https://www.example.com">Visit Examples </a>

<a> is tag

href="https://www.example.com" = is attribute

href is attribute name

https://www.example.com is attribute value

Different between inline and block element?

Inline element is contain a small space. they don't start next line and take spaces as much needed.

examples <span> <a> <img> <b> <i>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hey guys this is <span style="color:red">Prithwijti Khan</span> welcome to my blog</p>
</body>
</html>

OUTPUT =

And block element is contain full line. When block element is end then this element always starts to the next line. examples <div> <p> <h1> to <h6> <section> etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: yellow;">
        <p>HELLO WORLD!</p>
    </div>
</body>
</html>

OUTPUT=

Understanding about HTML list ?

In HTML there are total 3 lists i. Order list ii. Unordered list iii. Description list
<ol> Order list.
<ul> Unordered list.
<dl> Description list.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Order List -->
    <ol>
        <li>Apple</li>
        <li>Orange</li>
        <li>Mango</li>
    </ol>

    <!-- Unorderd List -->
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
    </ul>

    <!-- Description List -->
     <dl>
        <dt>HTML></dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascadind Style Sheet</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
     </dl>
</body>
</html>

What is semantic and non-semantic tag?

HTML5 introduced a range of semantic tags that provide meaning to the structure of web content. This tags are specially add meaning to your HTML code. This tags are tells both (Browser and Developer) what kind of content in there. This tags are help to maintain your browser. like <nav> <header> <footer>

HTML `<header>` Tag

In HTML<header> tag use to define the top section of webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <header>
        <h1>Prithwijit's Portfolio</h1>
        <nav>
            <ul>
                <li><a href="Home">Home</a></li>
                <li><a href="About">About</a></li>
                <li><a href="Services">Services</a></li>
                <li><a href="Contact">Contact</a></li>
            </ul>
        </nav>
     </header>
</body>
</html>

HTML `<nav>` Tag

In HTML <nav> tag defines a section of a webpage that contains navigation links, that help users move around the side.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <nav>
    <ul>
       <li><a href="Home">Home</a></li>
       <li><a href="About">About</a></li>
       <li><a href="Services">Services</a></li>
       <li><a href="Contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

HTML `<footer>` Tag

This HTML tag defines a footer section of websites, like copyright, nav links, or document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <footer>
        <p> &copy; 2025. All Rights Reserved</p>
        <p><a href="mailto:info@abcd.com">Contact</a></p>
     </footer>
</body>
</html>

Structure:

Non Semantic Tag

And another side non-semantic HTML tags are element they don't carry any meaning about the content they contain. like <div> <span>

Structure:

Conclusion:

HTML is the backbone of web development, providing the essential structure for creating web pages that are both functional and accessible. By mastering the basics—such as tags, elements, and attributes you’ve taken the first step toward building your own websites. As you continue to explore HTML, experiment with more advanced features like forms, semantic elements, and accessibility best practices. Combine HTML with CSS and JavaScript to bring your web pages to life with style and interactivity. Keep practicing, stay curious, and leverage resources like documentation, tutorials, and communities on platforms like Hashnode to deepen your skills.

Learn HTML: A Beginner's Guide to Understanding the Basics

Table of contents

What is HTML ? (Analogy)

Understanding html with a code snippet and example every tag?

Some HTML elements:

What is tag?

Different between tag and element ?

What is attribute?

Different between inline and block element?

Understanding about HTML list ?

What is semantic and non-semantic tag?

HTML `<header>` Tag

HTML `<nav>` Tag

HTML `<footer>` Tag

Structure:

Non Semantic Tag

Structure:

Conclusion:

Subscribe to my newsletter

Prithwijit Khan

Prithwijit Khan

Learn HTML: A Beginner's Guide to Understanding the Basics

Table of contents

What is HTML ? (Analogy)

Understanding html with a code snippet and example every tag?

Some HTML elements:

What is tag?

Different between tag and element ?

What is attribute?

Different between inline and block element?

Understanding about HTML list ?

What is semantic and non-semantic tag?

HTML <header> Tag

HTML <nav> Tag

HTML <footer> Tag

Structure:

Non Semantic Tag

Structure:

Conclusion:

Subscribe to my newsletter

Prithwijit Khan

Prithwijit Khan

HTML `<header>` Tag

HTML `<nav>` Tag

HTML `<footer>` Tag