Category: Basic

Attributes

Every HTML tag can be modified by attributes. Think of attributes as extra information you give to an element to change how it behaves or appears. This guide explains the most common attributes you will use every day.What are HTML Attributes?

HTML attributes are special words that provide additional information to an HTML element. Attributes are placed inside the element’s opening tag, and they are used to configure or adjust the element’s behavior. All attributes are made up of two parts: a name and a value −

Name: The attribute name is the keyword, also known as the attribute identifier, which defines a specific characteristic for the element in which it is using. For example, the paragraph <p> element (in the below-given example) has an attribute “align“, which defines the alignment of the paragraph on the page.
Value: The attribute value is the data or information that defines the value to be set for that attribute. The value is assigned within the double quotes. For example, “left“, “center“, or “right” can be assigned to the “align” attribute with the paragraph tag (as shown in the below example).

Below is the syntax of an element HTML having attribute −

<tag_name attribute="Value">...</tag_name>

Rules and Characteristics

The following are the rules and characteristics of HTML attributes; you should follow while using attributes with HTML elements:

Attributes are optional; you can use them to provide additional information about an HTML element.
Attributes have name and value pairs, but some of the attributes do not require any value; those are known as Boolean attributes.
An HTML element can have multiple attributes, and they should be separated by spaces.
Attributes should always be written with the opening tag.
All HTML elements can have attributes except a few like <head>, <title>, <script>, etc.
W3C recommends using attributes in lowercase and keeping the value in quotes.

Example of HTML Attributes

This example demonstrates the use of attributes with HTML elements −

<!DOCTYPE html><html><head><title>Example of HTML Attributes</title></head><body><a href="https://www.tutorialspoint.com">Visit our homepage</a></body></html>

In this example, href is the attribute name and “https://www.tutorialspoint.com” is the attribute value.

Core Attributes Every Element Can Use

The four core attributes that can be used on the majority of HTML elements (although not all) are −

The id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

We are using the id attribute to distinguish between two paragraph elements −

Example

<!DOCTYPE html><html><head><title>ID Attribute Example</title></head><body><p id="html">This para explains what is HTML</p><p id="css">This para explains what is Cascading Style Sheet</p></body></html>

The title Attribute

The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for id attribute −

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when the cursor comes over the element or while the element is loading.

Example

<!DOCTYPE html><html><head><title>The title Attribute Example</title></head><body><h3 title="Hello HTML!">Titled Heading Tag Example</h3></body></html>

On executing the above example, it will display the heading “Titled Heading Tag Example”. If you bring your cursor over it, you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

The class Attribute

The class attribute specifies one or more CSS classes for an HTML element. Multiple classes can be used on a single element with this attribute. The value of this attribute is a space-separated list of class names if you are specifying multiple classes.

Example

class="className1 className2 className3"

The style Attribute

The style attribute allows you to write inline CSS rules for an element.

Example

<!DOCTYPE html><html><head><title>The style Attribute</title></head><body><p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p></body></html>

On executing the above example, it will display the text “Welcome to Tutorialspoint…” in the “Arial” font and with a red color.

Internationalization (i18n) Attributes

There are three internationalization attributes, which are available for most (although not all) XHTML elements.

The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −

S.No	Value & Meaning
1	ltrLeft to right (the default value)
2	rtlRight to left (for languages such as Hebrew or Arabic that are read right to left)

Example

<!DOCTYPE html><html dir="rtl"><head><title>Display Directions</title></head><body>
   This is how IE5 renders right-to-left directed text.</body></html>

If you click on Edit & Run, you can observe the text aligned to right.

When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text’s direction for just the content of that tag.

The lang Attribute

The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

Example

<!DOCTYPE html><html lang="en"><head><title>English Language Page</title></head><body>
   This page is using English Language
</body></html>

Boolean Attributes

Boolean attributes represent true and false values and do not require any value with the attribute name. To set the true value, you need to write the attribute’s name, and to set it false, the attribute should be omitted altogether.

Here are some Boolean attributes –

disabled
readonly
required
inert
autocomplete

Example

Here is an example of an HTML Boolean attribute (required) −

<!DOCTYPE html><html><body><h1>Example of "required" attribute</h1><form><label for="user_name">Input User Name:</label><input type="text" id="user_name" name="user_name" required><input type="submit"></form></body></html>

The xml:lang Attribute

The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code, as mentioned in the previous section.

Generic Attributes

Here’s a table of some other attributes that are readily usable with many of the HTML tags.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	“Pop-up” title of the elements.
href	User Defined	Specifies the destination URL for a link or reference.
src	User Defined	Specifies the source file for media elements like `<img>`, `<audio>`, or `<iframe>`.

We will see related examples as we proceed to study other HTML tags. For a complete list of HTML tags and related attributes, visit: HTML Tags Reference and HTML Attributes Reference.

Best Practices for Using HTML Attributes

There are certain practices you should follow to use attributes on any element, please check the below-mentioned ways to do so:

1. Write Values in Quotes

You should always write the attribute values in single or double quotes.

<!-- Good Practice --><a href="https://www.tutorialspoint.com/html/html_overview.htm">
   HTML Introduction
<a><!-- Bad Practice --><a href=https://www.tutorialspoint.com/html/html_overview.htm>
   HTML Introduction
<a>

2. Use Lowercase

HTML is case-insensitive, but the good practice is to write the HTML attribute in lowercase.

<input type="text">

3. Use of Single and Double Quotes Together

When you need to provide any string in quotes as the value of an attribute, you can use the combination of single and double quotes.

<!-- Can use single and double Quotes --><p title="We are known for 'Simple Easy Learning'">
Tutorialspoint</p><p title='We are known for "Simple Easy Learning"'>
Tutorialspoint
</p>

August 16, 2025

Elements

HTML elements are the basic building blocks to create a web page, created with an opening tag, content, and ending tag.

What is an HTML Element?

An HTML element is a fundamental component of an HTML document that can contain data to display on the webpage, such as text, image, link, or sometimes nothing. An HTML element includes an opening tag, content, and a closing tag, where the opening tag may also include attributes.

An HTML element includes:

Opening Tag: An opening tag specifies the beginning of the element and may include multiple attributes.
Content: The content part includes the information to be displayed or processed within an element.
Closing Tag: A closing tag marks the end of the element (A closing tag may be optional for some elements).

An HTML document consists of a tree of HTML elements, and they define the content and layout of a webpage, like how and what content should display in the different sections of a webpage.

Example of HTML Elements

Some of the examples of HTML elements are as follows:

<p>This is paragraph content.</p><h1>This is heading content.</h1><div>This is division content.</div>

The following table displays the different parts (opening tag, content, and closing tag) of the HTML elements used in the above example:

Opening Tag	Content	Closing Tag
<p>	This is paragraph content.	</p>
<h1>	This is heading content.	</h1>
<div>	This is division content.	</div>

So here <p>…</p> is an HTML element, <h1>…</h1> is another HTML element.

HTML Element Structure

The following image demonstrates the structure of an element, like how an HTML element is written with the opening and closing tags:

Elements vs. Tags: What’s the Real Difference?

This is the most common point of confusion for beginners. Here’s a simple way to think about it:

An HTML Tag is just the opening <p> or closing </p> part. They are the instructions.
An HTML Element is the entire thing: the opening tag, the content inside, and the closing tag.
Think of it like a sandwich. The two slices of bread are the tags, and the complete sandwich with everything inside is the element.

Understanding Nested Elements

HTML allows nesting of elements. The nested elements are created by placing one or more HTML elements inside an HTML element. Where the container element can be considered as a parent element and others are as child elements. The child elements are nested inside the parent element. We can have multiple levels of nesting; however, it requires some guidelines to follow −

Every opening tag must have a corresponding closing tag.
The closing tag of the parent element must come after the closing tag of the child element.
The nested elements must be valid HTML elements.

Example

In the following example, we are nesting the italicized element (<i>…</i>) within the h1 element and underline (<u>…</u>) element within the paragraph element.

<!DOCTYPE html><html><head><title>Nested Elements Example</title></head><body><h1>This is <i>italic</i> heading</h1><p>This is <u>underlined</u> paragraph</p></body></html>

On executing the above example, we can observe the two sentences where we have nested one HTML within another.

Note: In the above example, the <html>, <head>, and <body> tags are also nested elements as they have one or more elements inside them.

Special Case: Empty (Void) Elements

HTML void elements are those elements that don’t require closing tags. These tags don’t have any content model and even don’t allow nesting of elements. The void elements are also known as empty or self-closing elements.

Some of the void elements are such as <img />, <hr />, and <br /> elements. The below table shows a list of void elements −

S.No	Elements & Description
1	<img>Used for inserting images within HTML documents.
2	<hr>It displays a horizontal rule.
3	<br>It is used to provide a line break.
4	<source>It is used for embedding media resources like audio and video.

Note: You might see these tags written with a / at the end, like <br />. This is an older syntax and is not needed in modern HTML5.

Example

The following example demonstrates the example of HTML void elements −

<!DOCTYPE html><html><body><p>This line contains a line break tag, <br> hence content is visible in two separate lines.</p><p>This line is <hr>separated by a horizontal rule.</p></body></html>

On executing, the above code will produce two paragraphs, one with a line break and the other with a horizontal rule.

Attributes With HTML Elements

The attributes can be placed with an opening tag by using the pairs of attribute name and value. Multiple attributes can be separated with a space.

The following statement demonstrates the use of two attributes src and alt with an HTML element img:

<img src="logo.jpg" alt="TutorialsPoint Logo" />

Mandatory Closing HTML Elements

The HTML elements that are opened must be closed. Only the void elements like <img />, <hr />, <br />, etc. do not require closing tags; other elements such as <p> and <h1> require closing tags after the content part.

If any HTML element does not include a closing tag, it may not cause an error, and some content may still display properly. However, never miss the closing tag, as it may lead to unexpected and inconsistent results.

Example

In this example, we are removing the closing tags from the paragraph tag. Still, it will show the correct result.

<!DOCTYPE html><html><body><p>This line contains a line break tag, <br /> hence content is visible in two separate lines.
   <p>This line is <hr /> separated by a horizontal rule.
</body></html>

The above HTML code will produce two paragraphs, one with a line break and the other with a horizontal rule.

Are HTML Elements Case-sensitive?

No, HTML elements are not case-sensitive, which means we can write HTML elements either in uppercase or lowercase. However, it is not a good practice, as W3C recommends and demands lowercase. Hence, always try to use lowercase for the tag names.

Example

In the following example, we are writing HTML elements (tag names) in uppercase and mixed case (uppercase and lowercase); see the output; there is no error and HTML code runs fine −

<!DOCTYPE html><HTml><BODY><P>HTML is not case sensitive i.e we can use both upper or, lower case letters in the tags.</p></BOdy></html>

August 16, 2025

Basic Tags

HTML tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >).

Usually, most of the HTML tags contain an opening and a closing tag. Each tag has a different meaning, and the browser reads the tags and displays the contents enclosed by them accordingly.

For example, if we wrap any text in the paragraph (<p></p>) tag, the browser displays it as a separate paragraph. In this tutorial, we will discuss all the basic tags in HTML.

Heading Tags

Heading tags are used to define headings of documents. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, the browser adds one line before and one line after that heading.

Example

Following HTML code demonstrates various levels of headings:

<!DOCTYPE html><html><head><title>Heading Example</title></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6></body></html>

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag.

Example

The following example demonstrates the use of paragraph (<p>) tag, here we are defining 3 paragraphs −

<!DOCTYPE html><html><head><title>Paragraph Example</title></head><body><p>Here is a first paragraph of text.</p><p>Here is a second paragraph of text.</p><p>Here is a third paragraph of text.</p></body></html>

Line Break Tag

The <br> tag is used to insert a line break in the text. It forces the content after it to appear on the next line. This tag is used whenever you want the text to break into a new line without starting a new paragraph.

Note: The <br> tag is an empty tag and does not need a closing tag.

Example

The following example demonstrates the use of break (<br>) tag −

<!DOCTYPE html><html><head><title>Line Break Example</title></head><body><p>Hello<br>You delivered your assignment on time.<br>Thanks<br>Mahnaz</p></body></html>

Center Tag

In HTML, the alignment should be handled using CSS rather than deprecated tags. The <center> tag, previously used to align content to the center of a web page, is deprecated in HTML5. You can use the text-align: center; property of CSS to center text or inline elements.

Example

The following example demonstrates how to center a paragraph using CSS:

<!DOCTYPE html><html><head><title>Centering Content Example</title><style>.center-text {
     text-align: center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This text is not in the center.&lt;/p&gt;&lt;p class="center-text"&gt;This text is in the center.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Horizonal Rule Tag



The <hr> tag is used to insert a horizontal line across the page. It is commonly used to separate sections of content visually.



Note: Like <br> tag, the <hr> tag is also an empty tag and does not need a closing tag.



Example



The following example draws a horizontal line between two paragraphs −



<!DOCTYPE html><html><head><title>Horizontal Line Example</title></head><body><p>This is paragraph one and should be on top.</p><hr><p>This is paragraph two and should be at bottom.</p></body></html>



On executing the above example, you can see a straight line dividing the two paragraphs.



The <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.



The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr>, it is not valid in XHTML.



Preserve Formatting Tag



The <pre> tag is used to preserve the formatting. Whenever you want to display content on the webpage exactly in the same format as it was written in the HTML document, you can use the <pre> tag. It preserves the formatting of source code, including line breaks and indentation.



Example



The following example demonstrates the use of the <pre> tag. Here, we are displaying some code that should keep the formatting exactly the same as it is written inside the <pre> tag −



<!DOCTYPE html><html><head><title>Preserve Formatting Example</title></head><body><pre>functiontestFunction(strText){alert(strText)}</pre></body></html>



function testFunction( strText ){
 alert (strText)
}




Non-breaking Spaces



Non-breaking spaces prevent an automatic line break and are displayed using the &nbsp; entity.



Suppose if you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12, Angry" and "Men" across two lines −



An example of this technique appears in the movie "12 Angry Men."



In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code −



Example



The following example demonstrates the use of &nbsp; entity −



<!DOCTYPE html><html><head><title>Nonbreaking Spaces Example</title></head><body><p>An example ofthis technique appears in the movie "12 Angry Men."</p><p>An example ofthis technique appears in the movie "12&nbsp;&nbsp;&nbsp;Angry Men."</p></body></html>



On executing the above example, it will display the sentence: An example of this technique appears in the movie "12 Angry Men." twice. Since we have added 3 " " characters between 12 and men, the second time, you can observe three spaces.



Listing Tags



The <ul> and <ol> tags create the unordered and ordered listings, and to display list items, the <li> tag is used.



Example



The following example demonstrates the use of listing tags −



<!DOCTYPE html><html><head><title>Listing Tags Example</title></head><body><h2>Unordered list</h2><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><h2>Ordered list</h2><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>

August 16, 2025

Learn about Editor
HTML editors are used to create, edit, and manage HTML code. In this tutorial, you will learn about the popular HTML editors that can be used to manage your HTML documents. Here, we are explaning the steps to create and run HTML code in the specific editors.

What are HTML Editors?

HTML editors are tools/software to create, edit, manage, and run (in some cases) HTML documents. HTML editors provide many features, such as auto-indenting, syntax highlighting, autocompletion, etc.

You can use any of the HTML editors mentioned below to write and manage your HTML codes. You need to save the file with an extension .htm or .html.

Types of HTML Editors

The following are the different types of HTML editors:
- Text Editors:
  Text editors are the basic HTML editors where you need to write the code manually. These types of editors don’t provide all features required for writing and managing HTML codes. Some of the text editors may include features like syntax highlighting and basic code editing tools.
  Example: Notepad, Notepad++, etc.
- WYSIWYG Editors:
  WYSIWYG Editors allow you to create web pages visually where you need to write the complete code manually. These types of HTML editors provide designing pages without needing to write code.
  Examples: Adobe Dreamweaver, BlueGriffon, etc.
- Online HTML Editors:
  The online HTML editors are web-based tools where you can write, manage, and run your HTML codes directly in your browser. These editors often provide live previews of the HTML documents. We provide an online HTML editor that supports syntax highlighting, alignment, code beautification, and many more features. You can use our HTML Editor to write, edit, and manage your HTML code.
- Integrated Development Environments (IDEs):
  The IDEs provide an integrated development environment where you can write, manage, and debug complete or larger projects. Some of the IDEs are JetBrains, WebStrom, Eclipse, etc.
Popular HTML Editors in 2025

There are several HTML editors available to the user (paid and unpaid, both). The following is the list of some popular editors:
1. Notepad
2. TextEdit
3. Notepad++
4. Sublime
5. Visual Studio Code
6. Atom
7. Brackets
8. Adobe Dreamweaver CC
9. CoffeeCup
1. Notepad

Notepad is a basic free text editor which is preinstalled in Windows systems. Notepad can be used as an HTML Editor.

Steps to Create and Run HTML Code in Notepad

The following are the steps to create and run an HTML document in Notepad:
- Open notepad application.
- Write your HTML code.
- Save the file with an extension “.htm” or “.html” and set the encoding to UTF-8.
- Now, you can open this HTML document in any web browser.
2. TextEdit

TextEdit is a default text editor and an open-source word processor that comes with MacOS. You can use TextEdit as an HTML editor to create, edit, and manage your HTML code. You can also use it to display HTML documents like you see them in a browser or in code-editing mode.

The only limitation in TextEdit is that it doesn’t display images when you use it to browse webpages.

Steps to Create and Run HTML Code in TextEdit

The following are the steps to create and run an HTML document in TextEdit:
- Open TextEdit
- Create a new file
- Go to the “format” then Make Plain Text
- Write your HTML code
- Save the with an extension “.htm” or “.html”
3. Notepad++

Notepad++ is a free source code editor. It is written in C++ and supports features like, syntax highlighting, limited auto completion for programming, scripting, etc. Notepad++ is one of the best HTML code editors where you can create and manage HTML documents.

Notepad++ does not come with preinstallation, you need to download it manually from the different devices from its official website: notepad-plus-plus.org

Steps to Create and Run HTML Code in Notepad++

To create an HTML document in Notepad++:
- Open Notepad++
- Open a new file, write your HTML code, and save the file as “.html”or “.htm”
- Click on the file and select the browser in which you want to view the results.
4. Sublime Editor

Subline editor is a cross-platform source code editor. It is used to write Codes, markup, and prose. It is written in C++ and Python.

Sublime editor provides features like quick navigation to files, symbols, or lines. It allows you to simultaneously edit multiple selected area.

Sublime editor can be downloaded from this link: Sublime Text

5. Visual Studio Code

Visual Studio Code (VS Code) is also a source-code editor developed by Microsoft. It supports Windows, Linux, and macOS. VS code is widely used for creating and managing HTML documents due to its amazing features like debugging support, syntax highlighting, code refactoring, intelligent code completion, etc.

VS Code is not preinstalled software; you need to download it from code.visualstudio.com/download

6. Atom Editor

Atom is an open-source text and source code editor for MacOS. Atom can also be used in Windows systems after downloading and installing. Atom is also a free editor and can be used as an HTML editor where you can create and manage HTML documents. It provides various features such as syntax highlighting, code completion, find and replace, auto detect indentation, and different themes.

The steps to write and run HTML in the Atom editor are:

Steps to Create and Run HTML Code in Atom
- Create/open a file
- Write or paste HTML code.
- Save file with “.htm” or “.html” extension.
- And, press “CTRL + Shift + B” (in Windows) to run and see the preview.
7. Brackets Editor

Brackets is a source code editor that can be used for creating and managing HTML documents. Brackets is created by Adobe, and it is useful for web development. Brackets features include auto saving, code beautification, live preview, and many more.

Steps to Create and Run HTML Code in Brackets

The steps to create an HTML document in brackets editors are:
- Download & Install Bracket Editor
- Create a new file.
- Write HTML code and save the files with the extension “.htm” or “.html“.
8. Adobe Dreamweaver CC

Adobe Dreamweaver CC is a premium IDE application for web development and source code editing, like HTML editors. It offers toolkits for designing and creating websites that combine a visual design interface with a code editor.

It supports many programming languages like Python and HTML, enabling efficient coding for both beginners and advanced users, and also provides Git support. It is a subscription-based model as it ensures access to regular updates and customer support for assistance.

9. CoffeeCup

CoffeeCup is a paid HTML editor software known for its user-friendly interface and powerful features. It offers a range of tools for web development, including code editing, site management, and responsive design support.

With CoffeeCup, users can create and edit HTML, CSS, and JavaScript code efficiently. It provides live previews, code validation, and an integrated FTP client for seamless website management.

How HTML Editors can benefit you?

There are several advantages to using HTML editors to write and manage your HTML codes. Some of the main advantages are as follows:
- Error Reduction: HTML editors are useful to identify and correct the syntax errors during writing the HTML codes.
- Syntax Highlighting: Most of the HTML editors come with the syntax highlighting features that enable color-coding to distinguish HTML tags, attributes, and content that makes the code clear and readable.
- Code Autocompletion: Most of the HTML editors autocomplete the tags or attributes while writing the code. For example, if you start writing a paragraph and type <p>, editors will automatically insert a closing tag </p>. The editors also suggest the syntax of the elements.
- Code Validation: Most of the HTML editors have code validating features; you don’t need any other tool to validate your code. This feature helps to validate the errors.
- Collaboration Tools: Some of the HTML editors come with version control systems that make it easier for teams to collaborate and track changes.
Chapter Summary
- HTML editors are used to write, edit, and manage HTML codes.
- There are various types of HTML editors, such as text editors, WYSIWYG editors, online HTML editors, and integrated development environments (IDEs).
- The popular and widely used HTML editors are Notepad, TextEdit, Notepad++, Sublime, Visual Studio Code, Atom, Brackets, Adobe Dreamweaver CC, and CoffeeCup.
- These HTML editors provide many features, such as error reduction, syntax highlighting, code completion, code validation, collaboration tools, and more.
August 16, 2025

History and Evolution

HyperText Markup Language (HTML) was initially developed by Sir Tim Berners-Lee in late 1991. It was designed as a standard language for creating and formatting documents on the World Wide Web. All the web pages on the internet are made from HTML.

From 1990 to 1995, HTML underwent changes and extensions, initially at CERN and then at the IETF. The World Wide Web Consortium (W3C) became the new home for HTML development.

The Idea of Hypertext Before HTML

We must first examine the idea of hypertext in order to comprehend the origins of HTML. Early 20th-century pioneers like Vannevar Bush proposed the concept of tying information together through hypertext, envisioning a “memex” machine that could organize enormous volumes of information using linked microfilm.

However, Ted Nelson, an American philosopher and sociologist, first used the word “hypertext” in the 1960s. Nelson’s idea of hypertext was to develop a network of connected text and multimedia that permitted non-linear information navigation.

The Timeline of HTML’s Evolution

Here you will see the evolution of HTML over the past couple of decades. The major upgrade was done in HTML5 in 2012.

Year	Progress
1991	Tim Berners-Lee created HyperText Markup Language but it was not officially released.
1993	Tim Berners-Lee created the first version of HTML that was published and available to the public.
1995	HTML 2.0 was released with a few additional features along with the existing features.
1997	There was an attempt to extend HTML with HTML 3.0, but it was replaced by the more practical HTML 3.2.
1998	The W3C (World Wide Web Consortium) decided to shift focus to an XML-based HTML equivalent called XHTML.
1999	HTML 4.01, which became an official standard in December 1999, was the most widely used version in the early 2000s.
2000	XHTML 1.0, completed in 2000, was a combination of HTML4 in XML.
2003	The introduction of XForms reignited interest in evolving HTML itself rather than replacing it with new technologies. This new theory recognized that XML was better suited for new technologies like RSS and Atom, while HTML remained the cornerstone of the web.
2004	A W3C workshop took place to explore reopening HTML’s evolution. Mozilla and Opera jointly presented the principles that later influenced HTML5.
2006	The W3C expressed interest in HTML5 development and formed a working group to collaborate with the WHATWG. The W3C aimed to publish a “finished” HTML5 version, whereas the WHATWG focused on a Living Standard, continuously evolving HTML.
2012	HTML5 can be seen as an extended version of HTML 4.01, which was officially published in 2012.

From HTML 1.2 to HTML 5 to – How HTML’s Features Evolved Over Time

With the introduction of new versions of HTML, support for additional features was added, and the user experience was enhanced. The following table shows the features introduced in later versions of HTML:

Type of Content	HTML 1.2	HTML 4.01	HTML 5	Description
Image	Yes	Yes	Yes	The img tag allows to add images to HTML document
Paragraph	Yes	Yes	Yes	Paragraph element in HTML is used to represent a paragraph of text on a webpage.
Heading	Yes	Yes	Yes	Heading are used in HTML to define variable length headings. (h1 to h6)
Address	Yes	Yes	Yes	Address element in HTML is used to contain contact information of user.
Anchor	Yes	Yes	Yes	Anchor tag is used to define hyperlink in webpage.
List	Yes	Yes	Yes	List is used in HTML to display list of related items.
Table	No	Yes	Yes	Table is used to organize data into rows and columns
Style	No	Yes	Yes	Style is used to add CSS styling to webpage
Script	No	Yes	Yes	Script is used to add JavaScript to HTML.
Audio	No	No	Yes	Enables introduction of audio to webpage
Video	No	No	Yes	Enables introduction of video to webpage.
Canvas	No	No	Yes	Enables introduction of graphics elements to webpage.

August 16, 2025

Introduction
HTML stands for HyperText Markup Language. It is used to structure the content on the web by using various elements (commonly known as tags). These HTML elements define the different sections of a web page, such as headings, paragraphs, links to other webpages, listings, images, tables, etc. These elements tell the browser about the content and formatting to display.

HTML is HyperText + Markup Language. Where,
- HyperText refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called “HyperText”.
- Markup Language, which means you use HTML to simply “mark up” a text document with tags that tell a Web browser how to structure it to display.
What is an HTML Element?

An HTML element is a basic building block to create a webpage, and It is created by a start tag, content, and end tag. In an HTML element, the content is placed between a start and end tag.

The basic syntax of an HTML element is −
```
<tag_name>content</tag_name>
```
Consider the following example demonstrates an HTML element −
```
<h1>It is top-level heading</h1>
```
Here,
- <h1> is the start tag.
- “It is top-level heading” is the content, which is placed inside the start and end tags.
- </h1> is the closing tag.
HTML Page Structure

HTML page structure (or, HTML basic structure) consists of the essential elements that are required to create an HTML document that can be displayed on the browser.

The following image shows the page structure of an HTML document −

HTML page structure contains <!DOCTYPE html>, <html>, <head>, <title>, <body>, and other tags that will be shown on the homepage.

Where,
- <!DOCTYPE html> − It defines the document type as HTML.
- <html> − It is a root element for an HTML document. All elements are placed inside this element.
- <head> − The head tag may contain scripts and styles that are useful page functionalities. Meta tags are also placed inside this tag.
- <title> − It defines the webpage’s title.
- <body> − It defines the body of the webpage, all elements that are used to display content on the browser placed inside the body tag.
- <h1> and <p> − The h1 tag defines page heading, and p tag defines paragraph.
Web Browser Role

The role of a web browser is to read HTML documents from the given path (either from the server or from a local device) and display it on the webpages. All web browsers, such as Google Chrome, Safari, Firefox, etc., are compatible with reading HTML documents. You can use any of the web browsers to display your HTML document in web format.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. The current version of HTML is 5 and it makes use of the following declaration −
```
<!DOCTYPE html>
```
There are many other declaration types that can be used in HTML documents, depending on what version of HTML is being used. We will see more details on this while discussing the <!DOCTYPE…> tag along with other HTML tags.

HTML Tags Vs. Elements Vs. Attributes

HTML tags are the keywords that can be used for a specific purpose to display and format the content on the webpage.

HTML elements are the basic building blocks that are made with the help of tags and content. An HTML element is created with a start tag, a content, and an end tag.

And, HTML attributes provide additional information about HTML elements; in order to define or change their behavior. Attributes are used with an opening tag.

HTML Tags Case Sensitivity

HTML tags are not case-sensitive. They can be written in uppercase or in lowercase. But the World Wide Web Consortium (W3C) recommends using lowercase tags starting from HTML 4.

Importance of HTML

HTML is the fundamental building blocks of the World Wide Web. Any page that you visit on the web contains HTML tags. HTML is important for the various reasons −
- HTML defines webpage structure and helps to design websites.
- With the help of CSS and JavaScript, HTML helps to create beautiful and interactive websites.
- HTML helps in search engine optimization by optimizing the tags based on the targeted keywords.
- HTML helps to navigate (or browse) different pages and websites from anywhere on the internet.
- HTML supports user input and forms; you can easily get information from anywhere in the world (you may need background database support for it).
- HTML follows an open standard by W3C. Thus, HTML supports all browsers on any type of device. You do not need to change the HTML for the different browsers or devices.
To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple, as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.
August 16, 2025

Category: Basic

Attributes

Rules and Characteristics

Example of HTML Attributes

Core Attributes Every Element Can Use

The id Attribute

Example

The title Attribute

Example

The class Attribute

Example

The style Attribute

Example

Internationalization (i18n) Attributes

The dir Attribute

Example

The lang Attribute

Example

Boolean Attributes

Example

The xml:lang Attribute

Generic Attributes

Best Practices for Using HTML Attributes

1. Write Values in Quotes

2. Use Lowercase

3. Use of Single and Double Quotes Together

Elements

What is an HTML Element?

Example of HTML Elements

HTML Element Structure

Elements vs. Tags: What’s the Real Difference?

Understanding Nested Elements

Example

Special Case: Empty (Void) Elements

Example

Attributes With HTML Elements

Mandatory Closing HTML Elements

Example

Are HTML Elements Case-sensitive?

Example

Basic Tags

Heading Tags

Example

Paragraph Tag

Example

Line Break Tag

Example

Center Tag

Example

Horizonal Rule Tag

Example

Preserve Formatting Tag

Example

Non-breaking Spaces

Example

Listing Tags

Example

Learn about Editor

What are HTML Editors?

Types of HTML Editors

Popular HTML Editors in 2025

1. Notepad

Steps to Create and Run HTML Code in Notepad

2. TextEdit

Steps to Create and Run HTML Code in TextEdit

3. Notepad++

Steps to Create and Run HTML Code in Notepad++

4. Sublime Editor

5. Visual Studio Code

6. Atom Editor

Steps to Create and Run HTML Code in Atom

7. Brackets Editor

Steps to Create and Run HTML Code in Brackets

8. Adobe Dreamweaver CC

9. CoffeeCup

How HTML Editors can benefit you?

Chapter Summary

History and Evolution

The Idea of Hypertext Before HTML

The Timeline of HTML’s Evolution