What is HTML?

HTML or HyperText Markup Language is the standard markup language for creating web pages and web applications. It helps to structure and organize the content of a web page for displaying it in a web browser. It is the most basic building block of the web. It was created by Tim Berners-Lee in 1990 and is maintained by the World Wide Web Consortium (W3C). The latest version of HTML is HTML5. HTML is written in plain text and is saved with the .html or .htm extension.

HTML is not a programming language, it does not have any logic or flow control. So to create a complete web application, you need to combine HTML with other technologies like CSS and JavaScript.

The Basics of HTML

HTML is very simple and easy to learn. The basic syntax of HTML is tags. With tags, you can create elements. An element is a piece of content that has a meaning. For example, a paragraph of text is an element, an image is an element, a form is an element and so on.

Tags and Elements


The above syntax is called a tag. It consists of an opening tag, content and a closing tag. The opening tag is denoted by < and >. The closing tag is denoted by </ and >. And in between them is the content that is displayed in the browser. The content can be text or other HTML elements nested inside the element. The name of the tag is called the element name. The element names are case-insensitive. So <p> and <P> are the same.

<p>This is a paragraph.</p>

For example, here the opening tag is <p> and the closing tag is </p>. The content is This is a paragraph.. And the name of the element is p which stands for paragraph.

Self-Closing Tags

<element />

There are some tags that do not have any content. For example, the image tag <img> does not have any content. It gets the content from the src attribute. So the image tag is a self-closing tag. We write self-closing tags like this:

<img src="image.jpg" />

The closing tag is replaced by a slash / after the element name.


<element attribute="value">Content</element>

Attributes are used to provide additional information about an element. They are written inside the opening tag. They have a name and a value. The name is separated from the value by an equal sign =. The value is wrapped in double quotes ". The attribute names are also case-insensitive. So onload="" and onLoad="" are the same.


In the above example, the src attribute provides the source of the image. The alt attribute provides an alternate text for the image. It is displayed if the image is not available.


<!-- This is a comment -->

Comments are used to add notes to the HTML code. They are not displayed in the browser. They are ignored by the browser. They are used to explain the code or to temporarily remove some code without deleting it.

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- This is another comment -->

Comments are written between <!-- and -->. They can be written anywhere in the HTML code.

Classes and IDs


Classes and IDs are attributes that are used to identify elements. They are used to style elements with CSS and to target elements with JavaScript.

One element can have multiple classes. Classes are separated by a space. Classes are used to identify similar elements. For example, all the paragraphs in the page can have the class paragraph and all the headings can have the class heading.

<h1 class="heading">Heading 1</h1>
<p class="paragraph">This is a paragraph.</p>

<h2 class="heading">Heading 2</h2>
<p class="paragraph">This is another paragraph.</p>

IDs are unique. One element can have only one ID, any other element in the document cannot have the same ID. IDs are used to identify a single element. For example, the first paragraph in the page can have the ID first.

    This is a paragraph.
<p class="paragraph">This is another paragraph.</p>

Nesting Elements


Elements can be nested inside other elements. The content of an element can be other elements. The content of an element can be text. The content of an element can be a combination of elements and text.

<p>This is a paragraph with <strong>bold</strong> text.</p>

In the above example, the <strong> element is nested inside the <p> element. The content of the <p> element is a combination of text and another element.

Structure of an HTML Document

Now that we know the basics of HTML, let's see how to create a HTML document.

The structure of an HTML document should be like this:

<!doctype html>

<html lang="en">
        <title>Page Title</title>

Here the <!DOCTYPE html> declaration is used to tell the browser that the document is written in HTML5. The <html> element is the root element of the document. It contains the <head> and <body> elements. The <head> element contains the metadata of the document that are not displayed in the browser viewport. The <body> element contains the content of the document that is displayed in the browser viewport.

One html document should only have one html element, one head element and one body element.

Common HTML Elements

Here are some of the most commonly used HTML elements:


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Headings are used to organize the content of a document. They are used to create sections and subsections. There are six levels of headings. The <h1> element is the highest level and <h6> is the lowest level.



Paragraphs are used to group related content. They are used to separate different sections of a document.

<a href="">Example Link</a>

Links are used to navigate to another page or to another location on the same page. The href attribute specifies the destination of the link. The content of the link is the anchor text.



Images are used to display images in a web page. The src attribute specifies the source of the image. The alt attribute provides an alternate text for the image. It is displayed if the image is not available.


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

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

    <dt>Item 1</dt>
    <dd>Description 1</dd>
    <dt>Item 2</dt>
    <dd>Description 2</dd>
    <dt>Item 3</dt>
    <dd>Description 3</dd>

Lists are used to display a list of items. There are three types of lists: unordered list, ordered list and description list. The unordered list is displayed with bullets. The ordered list is displayed with numbers. The description list is displayed with terms and descriptions.


        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>

Tables are used to display tabular data. The <table> element is used to create a table. The <tr> element is used to create a table row. The <th> element is used to create a table header. The <td> element is used to create a table data cell.


    <label for="name">Name</label>

    <label for="email">Email</label>

    <label for="message">Message</label>


Forms are used to collect user input. The <form> element is used to create a form. The <label> element is used to create a label for an input element. The <input> element is used to create an input field. The <textarea> element is used to create a text area. The <input type="submit"> element is used to create a submit button.

Semantic Elements

    Main Content

The HTML5 specification introduced some new semantic elements. These elements are used to define the structure of a document. They are used by search engines and screen readers to understand the content of a document.

For example, the <header> element is used to define the header of a document. The <main> element is used to define the main content of a document. The <footer> element is used to define the footer of a document. Technically, these elements are just like the <div> element, which is a generic container element.

Other HTML Elements

There are many other HTML elements to structure a web page and to display different types of content. Here are the standard HTML elements with a short description and valid attributes for each element.

<a>Defines a hyperlinkhref, target, download, rel, hreflang, type
<abbr>Defines an abbreviation or an acronymtitle
<address>Defines contact information for the author/owner of a document or an article
<area>Defines an area inside an image-mapalt, coords, download, href, hreflang, media, rel, shape, target, type
<article>Defines an article
<aside>Defines content aside from the page content
<audio>Defines sound contentautoplay, controls, loop, muted, preload, src
<b>Defines bold text
<base>Specifies the base URL/target for all relative URLs in a documenthref, target
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>Overrides the current text directiondir
<blockquote>Defines a section that is quoted from another sourcecite
<body>Defines the document's body
<br>Defines a single line break
<button>Defines a clickable buttonautofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value
<canvas>Used to draw graphics, on the fly, via scripting (usually JavaScript)height, width
<caption>Defines a table caption
<cite>Defines the title of a work
<code>Defines a piece of computer code
<col>Specifies column properties for each column within a <colgroup> elementspan
<colgroup>Specifies a group of one or more columns in a table for formattingspan
<data>Links the given content with a machine-readable translationvalue
<datalist>Specifies a list of pre-defined options for input controls
<dd>Defines a description/value of a term in a description list
<del>Defines text that has been deleted from a documentcite, datetime
<details>Defines additional details that the user can view or hideopen
<dfn>Represents the defining instance of a term
<dialog>Defines a dialog box or windowopen
<div>Defines a section in a document
<dl>Defines a description list
<dt>Defines a term/name in a description list
<em>Defines emphasized text
<embed>Defines a container for an external (non-HTML) applicationheight, src, type, width
<fieldset>Groups related elements in a formdisabled, form, name
<figcaption>Defines a caption for a <figure> element
<figure>Specifies self-contained content
<footer>Defines a footer for a document or section
<form>Defines an HTML form for user inputaccept-charset, action, autocomplete, enctype, method, name, novalidate, target
<h1> to <h6>Defines HTML headings
<head>Defines information about the document
<header>Defines a header for a document or section
<hr>Defines a thematic change in the content
<html>Defines the root of an HTML documentmanifest
<i>Defines a part of text in an alternate voice or mood
<iframe>Defines an inline frameallow, allowfullscreen, height, name, referrerpolicy, sandbox, src, srcdoc, width
<img>Defines an imagealt, crossorigin, decoding, height, ismap, loading, referrerpolicy, sizes, src, srcset, usemap, width
<input>Defines an input controlaccept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width
<ins>Defines a text that has been inserted into a documentcite, datetime
<kbd>Defines keyboard input
<label>Defines a label for an <input> elementfor, form
<legend>Defines a caption for a <fieldset> element
<li>Defines a list itemvalue
<link>Defines the relationship between a document and an external resource (most used to link to style sheets)as, crossorigin, href, hreflang, imagesizes, imagesrcset, integrity, media, referrerpolicy, rel, sizes, title, type
<main>Specifies the main content of a document
<map>Defines a client-side image-mapname
<mark>Defines marked/highlighted text
<meta>Defines metadata about an HTML documentcharset, content, http-equiv, name
<meter>Defines a scalar measurement within a known range (a gauge)form, high, low, max, min, optimum, value
<nav>Defines navigation links
<noscript>Defines an alternate content for users that do not support client-side scripts
<object>Defines an embedded objectdata, form, height, name, type, typemustmatch, usemap, width
<ol>Defines an ordered listreversed, start, type
<optgroup>Defines a group of related options in a drop-down listdisabled, label
<option>Defines an option in a drop-down listdisabled, label, selected, value
<output>Defines the result of a calculationfor, form, name
<p>Defines a paragraph
<param>Defines a parameter for an objectname, value
<picture>Defines a container for multiple image resources
<pre>Defines preformatted text
<progress>Represents the progress of a taskmax, value
<q>Defines a short quotationcite
<rb>Defines a ruby annotation (used in East Asian typography)
<rp>Defines what to show in browsers that do not support ruby annotations
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<rtc>Defines a ruby text container for ruby text components (used in East Asian typography)
<ruby>Defines a ruby annotation (used in East Asian typography)
<s>Defines text that is no longer correct
<samp>Defines sample output from a computer program
<script>Defines a client-side scriptasync, crossorigin, defer, integrity, nomodule, nonce, referrerpolicy, src, type
<section>Defines a section in a document
<select>Defines a drop-down listautofocus, disabled, form, multiple, name, required, size
<slot>Defines a slot for an element that you can fill with your own markupname
<small>Defines smaller text
<source>Defines multiple media resources for media elements (<video> and <audio>)media, sizes, src, srcset, type
<span>Defines a section in a document
<strong>Defines important text
<style>Defines style information for a documentmedia, nonce, scoped, type
<sub>Defines subscripted text
<summary>Defines a visible heading for a <details> element
<sup>Defines superscripted text
<svg>Defines a container for SVG graphics
<table>Defines a table
<tbody>Groups the body content in a table
<td>Defines a cell in a tablecolspan, headers, rowspan, scope
<template>Defines a template
<textarea>Defines a multiline input control (text area)autocomplete, autofocus, cols, dirname, disabled, form, maxlength, minlength, name, placeholder, readonly, required, rows, wrap
<tfoot>Groups the footer content in a table
<th>Defines a header cell in a tablecolspan, headers, rowspan, scope
<thead>Groups the header content in a table
<time>Defines a date/timedatetime
<title>Defines a title for the document
<tr>Defines a row in a table
<track>Defines text tracks for media elements (<video> and <audio>)default, kind, label, src, srclang
<u>Defines text that should be stylistically different from normal text
<ul>Defines an unordered list
<var>Defines a variable
<video>Defines a video or movieautoplay, controls, crossorigin, height, loop, mediagroup, muted, playsinline, poster, preload, src, width
<wbr>Defines a possible line-break

For more information, see the MDN Web Docs.

Global Attributes

These are the attributes that can be used on any HTML element.

accesskeySpecifies a shortcut key to activate/focus an element
classSpecifies one or more classnames for an element (refers to a class in a style sheet)
contenteditableSpecifies whether the content of an element is editable or nottrue, false
contextmenuSpecifies a context menu for an element. The context menu appears when a user right-clicks on the element
data-*Used to store custom data private to the page or application
dirSpecifies the text direction for the content in an elementltr, rtl, auto
draggableSpecifies whether an element is draggable or nottrue, false, auto
dropzoneSpecifies whether the dragged data is copied, moved, or linked, when droppedcopy, move, link
hiddenSpecifies that an element is not yet, or is no longer, relevant
idSpecifies a unique id for an element
langSpecifies the language of the element's content
spellcheckSpecifies whether the element is to have its spelling and grammar checked or nottrue, false
styleSpecifies an inline CSS style for an element
tabindexSpecifies the tabbing order of an element
titleSpecifies extra information about an element
translateSpecifies whether the content of an element should be translated or notyes, no

To learn more about these attributes, see the MDN Web Docs.