1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
2. 

HTML Basics with Code Examples: A Quick Guide

Updated on 22/07/2024476 Views
Content

In today's digital age, the online world offers endless possibilities. From e-commerce to entertainment, there's a website for nearly every need. But have you ever wondered how these websites come to life and evolve over time? The answer lies in HTML, the foundation of web development.

I’ve always wanted to curate a clear and easy guide to HTML basics having been a web developer myself.

Drawing from years of personal experience within the web development sector, this tutorial can be a great introduction of HTML language for beginners.

HTML Basics: What It Is.

First things first, let's define HTML briefly.

When a web page is created, the structure and the formatting of the page are directed by HTML or Hypertext markup language code. HTML contains a bunch of elements that can be used for various purposes to make the webpage according to our wishes.

The tags or elements used in HTML can be used for hyperlinking a word or an image, editing the look of the website, and changing fonts just to name a few.

I’ve explained it below with a basic HTML program example.

Say I want to write a paragraph on our website. I can do so using the <p> tag. But this might be a little boring and not catch attention.

Code:

<!DOCTYPE html>

<html>

<body>


<p>This may be generic information. But we want this part of the paragraph to be bold. This again is generic information.</p>


</body>

</html>

As you can see, the important part we want to make sure stands out looks nothing special. To make the important information stand out, we can make the important information bold with the help of the <b>(<b> is the bold tag) tag.

Let me show you how.

Code:

<!DOCTYPE html>

<html>

<body>

<p>This may be generic information. <b>But we want this part of the paragraph to be bold.</b> This again is generic information.</p>


</body>

</html>

Here the use of the <b> tag as you can see made the important information stand out.

HTML Element Anatomy

Let us understand the basic structuring of HTML elements first. This will help us understand the future concepts better. Let us take an example. Here I have attached an HTML element below, let us dissect it.

Opening tag

In this example, the opening tag is <h1>. The opening tag indicated the beginning of the HTML element.

Content

We put the content or the information of an element between the opening and closing tags. Not all elements include material. Here, the content is “Machine Learning Workshop”.

Closing tag

The closing tag always has a backslash while starting followed by the name of the element. This marks the end of the element. Here, the closing tag is </h1>.

Basic HTML website Template

We have already covered how HTML elements work, now let us look at a simple HTML code to understand its structure. Let me explain with the help of an example.

Code:

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>My test page</title>

</head>

<body>

<p>This is a HTML test webpage.</p>

</body>

</html>

Now let me explain each element used in the above basic HTML website template.

<!doctype html>

The doctype tag as the name suggests is a declaration at the beginning of an HTML document that identifies the document type and HTML version in use. HTML5 documents are marked to follow the HTML specification.


<html></html>

This element, also called the root element, wraps around the entire code. It also includes the language instruction, which specifies the default language of the document.

<head>

This element is a container for metadata and other items that are not readily visible on the webpage. It is put between the opening and tags.

<meta name="viewport" content="width=device-width">

In HTML, the tag controls a webpage's layout and scaling for different devices.

<title></title>

The <title> tag is used to display the name of the website on the browser tab. If used correctly, it even makes the website SEO-friendly.

<body></body>

The element in HTML contains a webpage's visible content. It includes everything that users see and engage with while visiting the page.

Images

In this section, I will teach you how to include images in your HTML document. First, let us look at the syntax of the process.

<img src="images/HTMLtest.png" alt="My test image" />

In this format, src stands for source. It is used to tell the compiler where to look for the image in your system. Here, the name of the file is HTMLtext.png and it is present inside a file named images.

We include the alt text to communicate to other developers which image is being used. This saves a lot of time as the developer does not have to constantly look for which image is being used.

Basic HTML Tags

In this section of the tutorial, I will show you some of the most important text elements used in a basic HTML page.

Headings

Headings in HTML define the order of content and importance of text on a webpage. Headings are divided into six levels with each level the size grows smaller. Let us look at an example to understand it better.

Code:

<!doctype html>

<html lang="en-US">

</head>

<body>

<h1>This will be the biggest heading</h1>

<h2>This heading will be a little smaller</h2>

<h3>This heading will be a little smaller still</h3>

<h4>This will be the smallest heading</h4>

</body>

</html>

As you can see, <h1> is the biggest, followed by <h2>,<h3>, and so on.

Paragraphs

As used in earlier examples, the <p> tag is used for inserting paragraphs into an HTML file. The format for using paragraphs is.

<p> Example to explain paragraphs</p>

Here, content that is encased in the <p> tags is “Example to explain paragraphs” and that will be shown in the final website.

Links

Links in HTML are created with the (anchor tag) element. Links enable users to move between web pages, elements, or resources. Let me demonstrate with the help of an example

Code:

<!doctype html>

<html lang="en-US">

</head>

<body>

<p> Visit

<a href="https://www.upgrad.com/">

uPGrad

</a>

to learn more about HTML.</p>

</body>

</html>

Here, the term upGrad is linked with their website. Thus if someone clicks the word, it will take them to uppGrad’s website directly.

Lists

Now let us discuss lists with the help of examples. There are mainly four types of lists used in a basic HTML page.

Ordered List

An ordered list is used when the order of elements is important, such as in a process or a numerical sequence. The browser automatically numbers each list item. Let us look at an example.

Code:

<!doctype html>

<html lang="en-US">

</head>

<body>

<ol>

<li>I woke up.</li>

<li>I went to work.</li>

<li>I came back home.</li>

</ol>

</body>

</html>

List

When the order of the list is not important, an unordered list is used in HTML. For example, say a list of fruits. Unordered list items are usually shown in bullet points

Code:

<!doctype html>

<html lang="en-US">

</head>

<body>

<ul>

<li>Apples are red.</li>

<li>Oranges are orange.</li>

<li>Bananas arre yellow.</li>

</ul>

</body>

</html>

Nested Lists

If we want to list things inside a pre-existing list, the concept of nested lists can be used. Let me show you an example to explain the concept better.

Code:

<!doctype html>

<html lang="en-US">

</head>

<body>

<ul>

<li>Main List 1</li>

<li>Main List 2

<ul>

<li>Sub-List 2.1</li>

<li>Sub-List 2.2</li>

</ul>

</li>

<li>Main List 3</li>

</ul>

</body>

</html>

Description List

When we want to mention the description of an item in the list along with the item, we generally use a description list. The list item is called <dt> and the information is called <dd>.

Code:

<!doctype html>

<html lang="en-US">

</head>

<body>

<dl>

<dt>Apple</dt>

<dd>Appple is a fruit.</dd>

<dt>Eggplant</dt>

<dd>Eggplant is a vegetable.</dd>

</dl>

</body>

</html>

Attributes

Another important concept to know in HTML is attributes. Let me teach about attributes and teach with the help of an example.

Attributes in HTML give additional information about HTML elements or indicate how they should behave or appear. They are included in element opening tags and written as name-value pairs.

In this simple HTML code line, href=”#register” and target=”_self” are the attributes. Here, the anchor tag keyword ‘Registration’ when clicked will take you to the register on the same page.

When an attribute value includes a space or a special character, it must be enclosed in double-quotes. If an attribute value is case-sensitive in HTML, it will also be case-sensitive when used as a selector in CSS and JavaScript.

Conclusion

HTML is an important skill to have if you are planning to work in the field of web development. It is still quite popular and a very sought-after skill to have to land a job in today's market.

Here in this HTML tutorial for beginners, only HTML coding basics are covered. If you want to master more complex HTML basics and concepts, I recommend checking out upGrad's certification classes. The courses are developed in partnership with the world's top universities and are guaranteed to offer you vital insights.

FAQs

  1. What are the basics of HTML?

Headings, paragraphs, links, images, and lists are some basic topics of HTML.

  1. What are the 12 basic HTML tags?

The 12 basic tags in HTML are.

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>
  • <meta>
  • <body>
  • <p>
  • <a>
  • <img>
  • <h1> to <h6>
  • <ul> and <ol>
  • <li>
  1. What are the basic operations of HTML?

Some simple functions of HTML are defining elements, text formatting, creating links, inserting images, and making lists, tables, forms, and comments to name a few.

  1. What is the basic structure of HTML?

The basic HTML structure is.

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <body>
  1. What is HTML syntax?

HTML syntax refers to the rules and structure for writing HTML code. In brief, HTML syntax comprises tags, attributes, nested structure, empty elements, and comments.

  1. What is the purpose of HTML?

HTML aims to structure and format web content

  1. How does HTML work step by step?

Here's a simple step-by-step explanation of how HTML works:

  • Creation
  • Document declaration
  • Structure
  • Content
  • Rendering
  • Display
  • Interactivity
  1. Why is HTML used?

HTML is used to construct and structure web content, enabling developers to design and display text, graphics, links, forms, and other elements consistently. It is required for creating web pages and guaranteeing uniformity.

Rohan Vats

Rohan Vats

Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...