HTML Basics for Beginners Step by Step

HTML Basics for Beginners — In this post, we will cover all the topics that every HTML learner should know. If you want to learn web development, HTML is your first step.

HTML Introduction

What is HTML? (Definition)

HTML (HyperText Markup Language) is a markup language used to create web pages and websites. With HTML, we build the structure of a web page. HTML tells the browser how to display elements such as headings, links, images, and forms. Whenever you open a website, all the text, images, and other elements you see are created using HTML.

Why is HTML used

HTML is used to create websites. It tells the browser where and how to display specific content. The main function of HTML is to add headings, paragraphs, images, links, and other elements to a webpage.

2. How HTML Works

To create a webpage, HTML code is written using various types of tags. For example — if we want to add a heading to our page, we use the heading tag, and if we want to insert an image, we use the image tag. Tags tell the browser which part is a heading and which part is an image.

Example:

<h1>Welcome to my website</h1>
<p>This is my first paragraph</p>

In the above example, the h1 tag tells the browser that this is a main heading, and the p tag tells the browser that this is a paragraph. The browser reads this code and displays it correctly on the webpage.

Basic Structure of an HTML Document

To create a webpage, it is important to use the Basic Structure of HTML. In the example below, different HTML tags are shown, which we will understand in detail.

example.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

<!DOCTYPE html> — This tag tells the browser that it is an HTML5 document.

<head> — It contains important information about the page, such as the page name, description, and other meta data.

<title> — It defines the title of the page, which appears in the browser tab.

<body> — It contains the main content that is displayed to the user on the page.

Note: Every opening tag must be closed. To close a tag, a / is used.

Commonly Used HTML Tags

Some tags are used very frequently when creating a webpage, such as text tags and text formatting tags.

Text Tags

<h1> to <h6> — Heading tags, where h1 is the largest and h6 is the smallest.

<p> — Paragraph tag. We write our paragraph inside this tag.

<br> — For a line break. This tag breaks the line, and wherever it is placed, the content will start from the next line.

example.html

<h1>This is a heading tag</h1>
<p>This is a paragraph tag</p>
<br>This is a line break tag

Formatting Tags

<b> — Bold text. Any text written inside this tag will appear in bold.

<i> — Italic text. Any text written inside this tag will appear slightly slanted.

<strong> — Strong emphasis, similar to bold. This tag also makes the text bold but indicates that the text is of strong importance.

example.html

<p>This is a <b>bold</b> tag</p>
<p>This is an <i>italic</i> tag</p>
<p>This is a <strong>strong</strong> tag</p>

Link Tag <a>

The anchor tag is used to navigate from one page to another.

example.html

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

Image Tag <img>

To insert an image on a webpage.

example.html

<img src="image.jpg" alt="image name">

List Tags

Ordered List — <ol> With the tag, we get an ordered list in which all items are displayed in sequence with numbers in front of them.

Unordered List — <ul> With the tag, we get an unordered list in which all items are displayed with bullets in front of them.

Ordered List Example

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Unordered List Example

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Table Tags

For creating a table:

<table> — The <table> tag creates a container in which we make a table.
<tr> — The <tr> tag is used to create a row in the table.
<th> — The <th> tag is used to create a table heading, which appears at the top of the columns.
<td> — The <td> tag is used to insert table data into the table rows.

example.html

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Tips for Beginners

If you are an absolute beginner and have learned basic HTML, then start creating your own website. It’s better to do this on your local computer. As you progress, you will find it much easier to understand advanced HTML.

Run the code we have given you on your computer and see the result.

FAQ (Frequently Asked Questions)

Q1. How to start HTML in Notepad?

To start HTML in Notepad, you need to open Notepad, write your HTML code, and save the file with a .html extension.

Q2. Can I learn HTML in 1 week?

Yes, you can learn beginner-level HTML in one week and create your own webpage. Doing this will be very beneficial for you.

Q3. Is learning HTML very easy?

Learning HTML is not very difficult; it is much easier compared to other programming languages.

🔗 Also check: