View Categories

Basics of HTML

Table of Contents

HTML stands for Hyper Text Markup Language. It is the standard language used to create websites, allowing you to define the structure and layout of a web page. HTML consists of various elements that instruct the browser on how to display content on the screen. In this guide, we’ll cover the basics of HTML and provide examples to help you create a webpage.

In this tutorial, you’ll learn the fundamentals of HTML, including tags (e.g. <h1>, <p>, <img>), attributes, elements, and the structure of an HTML document, all of which are crucial for building a working webpage.

Basic HTML Document #

Every HTML document begins with a declaration of the document type, establishing the foundation for the webpage. This section introduces the essential HTML tags used to structure the page, such as <head>, <body>, and <title>. Although not strictly required, it’s good practice to start the document with the declaration shown below.

Basic HTML Tags for Document Structure

TagsDescriptions
<html>Encloses the entire HTML document, serving as the root element for all content.
<head>Contains metadata about the webpage, including the title, meta tags, and linked stylesheets. It is not displayed on the page.
<title>Defines the title of the HTML document. It appears in the browser tab and summarises the page’s content.
<body>Contains the visible content of the webpage, such as text, images, videos, and links. Elements inside this tag are displayed in the browser.
Tags of HTML

Example 1: Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics</title>
</head>
<body>
    <!-- Content of the webpage -->
    <p>Welcome to our HTML tutorial!</p>
</body>
</html>

HTML Headings #

HTML heading tags are used to create headings in a webpage. These headings are placed inside the <body> tag. HTML offers six heading tags, from <h1> to <h6>, each with progressively smaller font sizes.

Syntax:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Example 2: HTML Headings from <h1> to <h6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Heading Tags</title>
</head>
<body>
    <h1>Heading 1 (h1)</h1>
    <h2>Heading 2 (h2)</h2>
    <h3>Heading 3 (h3)</h3>
    <h4>Heading 4 (h4)</h4>
    <h5>Heading 5 (h5)</h5>
    <h6>Heading 6 (h6)</h6>
</body>
</html>

HTML Paragraph and Break Elements #

HTML <p> tags are used to write paragraphs on a webpage. They are enclosed by opening and closing <p> tags. To insert a single line break, the <br> tag is used, and it does not require a closing tag.

Syntax:

For paragraphs:

<p>Content...</p>

For line breaks:

<br>

Example 3: HTML Paragraph and Break Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph and Break Elements</title>
</head>
<body>
    <p>
        HTML stands for HyperText Markup Language.<br>
        It is used to design webpages using markup.<br>
        Hypertext defines the link between web pages,<br>
        while a markup language defines the structure of the content.
    </p>
</body>
</html>

HTML Horizontal Line #

The <hr> tag is used to create a horizontal line that divides sections of a webpage. This tag does not require a closing tag.

Syntax:

<hr>

Example 4: Using the <hr> Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML &lt;hr&gt; Tag</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is an example of a horizontal line.</p>
    <hr>
    <p>The line separates this section from the previous one.</p>
</body>
</html>

HTML Images #

The <img> tag is used to insert images into a webpage. The image source is specified within the src attribute.

Syntax:

<img src="source_of_image">

Example 5: Inserting an Image in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML img Tag</title>
</head>
<body>
    <img src="https://example.com/sample-image.png" alt="Sample Image">
</body>
</html>

Viewing HTML Source Code #

When viewing a webpage, you might want to check its underlying HTML code. Here’s how you can view the source code for the entire page or specific elements.

  1. Viewing the Source Code of the Entire Page:
    To view the entire HTML code of a webpage, press Ctrl + U or right-click on the page and select “View Page Source.”
  2. Inspecting a Specific Element:
    To view the HTML for a particular element, right-click on the element and select “Inspect.” This opens the developer tools where you can see the HTML and make temporary edits to test changes.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment