In this article, we are going to know what is HTML, why we use HTML, and What are HTML Elements. I hope you understand whatever I explain here.

What is HTML?

HTML stands for HyperText Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.

Hypertext refers to links that connect web pages, either within a single website or between websites.

Other technologies excluding HTML are generally used to describe a web page's presentation (CSS) or functionality (Javascript).

What Is HTML? Hypertext Markup Language Basics Explained

HTML has a lot of use cases

Web development - Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.
Internet navigation - Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.
Web documentation - HTML makes it possible to organize and format documents, similarly to Microsoft Word.

HTML Element

An HTML file is made with lots of HTML elements. These elements are responsible for creating web pages. An HTML element consists of starts <tag> and close </tag>. HTML Element is a collection of start tags, attributes, content and close tag.

<p> This is paragraph </p>

All the elements in HTML do not require to have a start tag and end tag, some elements do not have content and end tag such elements are known as Void elements or empty elements. These elements are also called unpaired tags. Some Void elements are <br> (represents a line break), <hr>(represents a horizontal line), etc.

For the default display and styling purpose in HTML, all the elements are divided into two categories:

Block Level Element
Inline Element

Block Level Element

These elements are the main parts of the web page structure dividing a page into coherent blocks.

A block-level element always starts with a new line and takes the full width of a web page, from left to right.

These elements can contain block-level as well as inline elements.

Some block level elements are <article>, <aside>, <div>, <form>, <hr>, <li>, <main>, <nav>, <p>, <section>, <table> etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,
        div {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div> This is div </div>
    <p> This is paragraph </p>
</body>
</html>

Inline Element

Inline elements are those elements, which differentiate the part of a given text and provide it with a particular function.

These elements do not start with a new line and take width as per requirement.

The Inline elements are mostly used with other elements.

Some Inline elements are <a>, <b>, <button>, <i>, <img>, <input>, <label>, <select>, <small>, <span>, <textarea> etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a,
        span {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <a href="#">This is Anchor Tag </a>
    <span>This is Span tag</span>
    <input type="text" name="" id="">
</body>
</html>

Some Main HTML Elements

Some HTML elements are mostly used.

<a> </a>

In short, this is a tag that helps you link to a web page, to your page, social media site, or product within an online store,... The main attribute for this HTML tag is the href (Hypertext Reference) attribute, where you put a link to a website you want to link to.

<a href="#" alt="" target="">This is Anchor Tag </a>

<body> </body>

The body part of an HTML document. This is an integral part of all HTML documents but it is just a tag that marks what is the visible content of the page, where the most content is

<body> All content which is shown on browser presented here </body>

<br>

With this basic HTML tag, we let the browser know, where we want some blank lines or breaks in the text. Using a few breaks makes our text breathe, which means that it is easier to read and understand.

<div> This text <br> This text are in new line </div>

<div> </div>

An element that is mostly used to group elements and to act as a template for new controls. The div HTML tag is an element you will use to divide a significant part of an HTML document from other parts. For example, let’s say you have a list of products on your web page, and you will use a div for each product.

<div> This is div </div>

<head> </head>

The head part of an HTML document. Moreover, this is where you have metadata, which is data about the styling of the document, what kind of Javascript libraries the document uses, and title and CSS files.

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style src = "script.js"> </style>
</head>

<h1> </h1> ... <h6> </h6>

Headings (levels 1-6, i.e. H3 is a subheading within an H2 subheading). H1, H2, and... tags are used to create titles. Why do we need titles, when we can style a text to look like H tags? For instance, titles are used so that search engines and other scrapers (bots) understand the important parts of our documents.

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

<img>

We use the IMG tag to show images. Considering that images can be within files for your web page or anywhere online. In addition, the most important attribute is src (source), which tells where the picture is.

<img src="" alt="" width="500" height="600">

<input>

The input HTML element is used to create interactive controls for web-based forms to accept data from the user a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML. The default type is text. Other available tags are - button, checkbox, color, date, datetime, email, file, number, password, radio etc.

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

<span> </span>

The span tag groups text for which we want to have different styling. A good example would be if we wanted to have a red word inside a sentence.

<span> this </span>

<ul> <li> </li> </ul>

An unordered list just means that it will have bullets for each item in the list. List items will have bullets for each item. It is mainly used in the navigation bar of the web page.

<ul>
    <li> Apple </li>
    <li> Mango </li>
    <li> Orange </li>
</ul>

HTML Element

Table of contents

What is HTML?

HTML has a lot of use cases

HTML Element

Block Level Element

Inline Element

Some Main HTML Elements