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
4. 

Mastering HTML Elements: A Comprehensive Guide

Updated on 23/07/2024446 Views
Content

One of the most fundamental concepts I have learned in my journey as a web developer is HTML elements. HTML elements are used to create the structure of the website, and each serves a different purpose.

With this tutorial I’d attempt to give you a basic idea about HTML elements and attributes.

What Exactly are HTML Elements

One of the first things you will realize when learning HTML programming is that the web page you develop in HTML is not one body but many small portions. Let me explain with an example.

Take the example of a car. A car is not just one entity but a culmination of many small parts. For example, a car consists of an engine, doors, wheels, windows, mirrors, seats, and so on and so forth. Similarly, web pages are made of a lot of tiny components called HTML elements.

Now, all HTML elements follow certain rules. Let me show you what is the syntax of these elements.

HTML element

Let me dissect the above example.

  • Opening tag: The element begins with an opening tag encased in angle brackets (< and >). It comprises the element name (e.g., <div>, <p>, <a>) and optional attributes. In this case, it is <a href=”my-page.htm”>.
  • Attribute: They give additional information about the element and are defined within the opening tag. They are written as name-value pairs separated by an equal sign (=) and surrounded by double quotations (""). In this case, it is href=”my-page.htm”.
  • Content: An element's content is the information or markup that is nested between the opening and closing tags. Some elements are self-closing (void), with no content between tags.
  • Closing tag: Most elements have a closing tag that indicates the conclusion of the element's content. Closing tags begin with </, followed by the element name, and ending with >. In this case, it is </a>.

Here is a commonly used HTML elements list to get you started.

  • <script> contains embedded JavaScript code or links to external JavaScript files.
  • <style> defines CSS styles directly in the HTML document so that external CSS is not needed.
  • The <body> section contains the webpage's visible content, such as text, graphics, links, etc.
  • <h1> to <h6> are headings of different sizes, with <h1> being the largest and <h6> being the smallest.
  • <p> denotes a paragraph of text.
  • <a> generates links to other web pages or resources.
  • <img>  adds images to the webpage.
  • The <ul> tag defines an unordered list.
  • The <ol> tag defines an ordered list.
  • <li> identifies list elements within <ul> or <ol> lists.
  • <div> is a generic container for grouping and decorating content.
  • <span> is a generic inline container for decorating text or tiny sections of material.
  • <table> is used to define a table.
  • <tr> tag represents a table row within a <table> element.
  • <th> tag is used to define a table header cell within a <tr> element.
  • <td> tag is used to define a table data cell within a <tr> element.

HTML Elements vs Tags

Elements and tags in HTML are often used interchangeably, which can be very confusing. In this section of the tutorial, I will explain how elements are different from tags.

Point of difference

HTML elements

HTML tags

Definition 

An HTML element is the primary building block for a web page.

An HTML tag is a specific syntax for defining an HTML element.

Composition

It typically includes an opening tag, content, and a closing tag.

It typically consists of the tag name enclosed in a pair of angle brackets.

Examples

Include paragraphs (<p>), links (<a>), images (<img>), and divisions (<div>).

Include <p> to open paragraphs, </p> to close paragraphs, and <a> to open links, among others.

Syntax

Self-closing (void) elements, like <br> for line breaks or <img> for images, do not require a closing tag.

Tags can be opened (<tagname>) to start an element or closed (</tagname>) to end it.

Examples of HTML Elements

There are a lot of HTML elements and tags in HTML coding. In this section of the tutorial, let me discuss some common HTML elements with examples.

Paragraphs and Headings

Paragraphs and headings are basic HTML elements of text. We use <h1> to <h6> tags for headings, where <h1> is the largest font size and <h6> is the smallest. For paragraphs, we use the <p> tag. Let me show you an example program to explain the syntax.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Paragraphs and Headings Example</title>

</head>

<body>

    <h1> Heading in h1 </h1>

    

    <h2> Heading in h2 </h2>

    <p>This is the content of the first paragraph.</p>

    

    <h3> Heading in h3 </h3>

    <p>This is the content of the second paragraph.</p>

    

    <h4> Heading in h4 </h4>

    <p>This is the content of the third paragraph.</p>

    

    <h5> Heading in h5 </h5>

    <p>This is the content of the fourth paragraph.</p>

    

    <h6> Heading in h6 </h6>

    <p>This is the content of the fourth paragraph.</p>

</body>

</html>

In the above example, we have used all the heading sizes from <h1> to <h6>. Under each heading, we have incorporated a paragraph.

List

We can also incorporate lists into HTML. There are two types of lists in HTML: ordered and unordered lists. Let me show you an example program to explain the concept better.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>List Example</title>

</head>

<body>

    <h2>Unordered List Example</h2>

    <ul>

        <li> unordered list item 1</li>

        <li>unordered list item 2</li>

        <li>unordered list item 3</li>

    </ul>

    <h2> Ordered List Example </h2>

    <ol>

        <li> ordered list item 1 </li>

        <li> ordered list item 2 </li>

        <li> ordered list item 3 </li>

    </ol>

</body>

</html>

In the above example, the <ul> tag creates an unordered list containing bullet points.

The <ol> creates an ordered list with sequentially numbered items. Each list item in <ul> or <ol> has its own individual  <li> tag for each item.

Tables

We can also add tables to our website using HTML. Let me show you how with an example.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML Table Example</title>

    <style>

        table {

            width: 100%;

            border-collapse: collapse;

        }

        th, td {

            border: 2px solid #ddd;

            padding: 8px;

            text-align: left;

        }

        th {

            background-color: #f2f2f2;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <h2> Table example in HTML </h2>

    <table>

        <tr>

            <th>Name</th>

            <th>Age</th>

            <th>Score</th>

        </tr>

        <tr>

            <td>John Johnson </td>

            <td> 20 </td>

            <td> 68 </td>

        </tr>

        <tr>

            <td> Jane Garfield </td>

            <td> 21 </td>

            <td> 89 </td>

        </tr>

        <tr>

            <td> Mike Stark </td>

            <td>22</td>

            <td> 98 </td>

        </tr>

    </table>

</body>

</html>

In the above example,

  • <table> specifies the table structure.
  • <tr> indicates a table row.
  • <th> specifies table header cells (top row).
  • The <td> tag specifies normal table cells (data cells).

I have styled the table using inline CSS, which I have included in the <head> section. CSS styles are used to control the appearance of the table, headers, and cells (such as width, borders, padding, alignment, and background color).

Style

The <style> section includes CSS rules for styling different elements in the document. Let me share an example.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Internal Style Example</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #a0f0f0;

        }

        h1 {

            color: #ac3333;

            text-align: center;

        }

        p {

            color: #ac6666;

            font-size: 16px;

            line-height: 1.5;

        }

        .container {

            max-width: 800px;

            margin: 0 auto;

            padding: 20px;

            background-color: #bfdfff;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }

    </style>

</head>

<body>

    <div class="container">

        <h1> Style Element Example</h1>

        <p>This is an example of the style element in HTML.</p>

    </div>

</body>

</html>

In the above example, we have the style element in the head of the program to include all the CSS attributes.

Nested element

A nested HTML element is when one element is inserted within another, resulting in a hierarchical structure in the HTML document. This allows you to code efficiently and helps with organizing content.

Let me share a small example to explain.

<div>

         <p> This is a nested element </p>

</div>

In the above example, the paragraph is a nested element because it exists inside the <div> element, which can be called the parent element.

Summing Up

HTML elements serve as the foundation for web pages, allowing developers to structure and convey material properly. They are the building blocks of every website, no matter how complex. This tutorial has hopefully taught you the basics of elements in HTML, although there is always something new to learn as technology progresses, just like HTML5 introduced new HTML elements.

If you want to learn more complex concepts of HTML, you should definitely check out upGrad. Their courses are in collaboration with some of the best universities around the world. The courses are curated by some of the best professors in this field. Doing these certified courses is sure to add value to your skills.

Frequently Asked Questions

  1. What is the main element in HTML?

The <html> element in HTML represents a webpage's main or root element. It includes all other HTML components, such as the <head> and <body>. The <html> element defines a webpage's structure and content and is the starting point for building HTML documents.

  1. How are HTML elements structured?

Elements in HTML are composed of opening and closing tags, with material inserted between them. Opening tags begin with < and end with >, whereas closing tags begin with </ and conclude with >. There are, however, self-closing tags like <img>, which do not need a closing tag.

  1. What are some common HTML elements?

Some common HTML elements are

  • <div> is used to group and style content.
  • <p> denotes a paragraph of text.
  • <a> generates hyperlinks.
  • <img> contains images.
  • <ul> and <ol>  generate unordered and ordered lists, respectively.
  • <li> identifies list elements within <ul> or <ol> lists.
  • Heading tags (<h1> to <h6>) define several levels of headings.
  1. Can HTML elements have attributes?

Elements may include attributes. Attributes include additional information about an element and can be used to change its behavior, appearance, or usefulness. 

  1. Are HTML elements case-sensitive?

HTML element names are not case-sensitive. This means that HTML element names can be written in capitals, lowercase, or a combination of the two, and web browsers will identify and interpret them correctly.

  1. Can HTML elements be nested?

HTML elements can be nested inside one another. Nesting is the process of inserting one HTML element inside another.

  1. How many elements are there in HTML?

The newest HTML5 specification includes 115 standard elements in HTML. These elements provide various functionalities, including text formatting, multimedia embedding, form controls, semantic organization, and more.

  1. Are there empty HTML elements?

Empty elements do exist in HTML. They are those with no content or text between the opening and closing tags. These tags are self-closing and take the form <tagname> without a closing tag.

Mukesh Kumar

Mukesh Kumar

Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.

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...