HTML Tutorial

HTML Tutorial
HTML is a standard markup language, which stands for Hyper Text Markup Language. It is widely used
language to create webpages. HTML invented by Tim Berners-Lee in late 1991, but it's first version
"HTML 1.0" was released in 1993, and "HTML 2.0" was the first standard HTML specification, which was
published in 1995.
This HTML tutorial covers everything from basic HTML fundamental concepts and tags to advanced
techniques, such as forms, modal boxes, multimedia, and HTML5. This tutorial is designed to help both
beginners and experienced designers become experts in building dynamic and responsive websites.
What is HTML?
HTML (HyperText Markup Language) is a standard markup language to design the structure of a
webpage. HTML is the combination of HyperText and Markup Language. HyperText defines the internal
links between webpages, and Markup language defines the layout and presentation of text and media.
Basic HTML Structure

The basic structure of an HTML document contains the few mandatory tags, that must be used to
create a webpage. This structure must be followed to create any type of HTML document.
Here is the basic structure of an HTML document −
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Webpage's Heading</h1>
<p>Content (Your first paragraph).</p>
</body>
</html>
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.
Elements of HTML Basic Structure

The following are the basic tags that define the basic HTML structure −
1. <!DOCTYPE html>
This element defines the document type as HTML. This element must be written before writing any
HTML document.
2. <html>...</html>
The <html> tag is the parent tag for all HTML elements. Everything related to create an HTML document
must be written inside the <html> tag. CSS, JavaScript, and jQuery must also be written inside this tag.
3. <head>...</head>
The <head> tag is a container tag for all those elements that are not directly displayed on the webpage
but required for the page functionalities. It contains meta tags (which are used for SEO purposes), title
tag, script tags, etc.
4. <title>...</title>
The <title> tag is used to define the title of the webpage that you can see in the browser's tab,
bookmarks list, and search engine results. This tag is also very important for SEO purposes to help
search engine to understand the content of the webpage.
5. <body>...<body>
The <body> tag is the container tag for all those elements, which represents the main content of a
webpage that displays on the browser.
6. <h1>...</h1>
The <h1> tag is one of the heading tags. It is the most important heading tag, which defines the main
title or headline of the webpage. Any text written inside <h1> and </h1> is a top-level heading of the
content.
7. <p>...</p>
The <p> tag defines a paragraph, anything written inside <p> and </p> displays as a paragraph on the
webpage. Use multiple <p> tags to display text in different paragraphs.
Writing Hello World in HTML

By using the above basic HTML structure, we can write an HTML document to display "Hello World" on
the webpage.
Below is the HTML code to display Hello World on the webpage in a paragraph −
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example by TutorialsPoint</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
The above example will display "Hello, World!" on the browser inside top-level heading (h1).
Comments in HTML
Just like other programming languages, you can keep any text as a comment inside an HTML
document. To create a comment in HTML, use .
Any text written inside  considers as comment and it does not display on the website.
Example
Below is the example of HTML comment −

Online HTML Editor

We offer an HTML Online Editor that enables you to edit and execute HTML code directly within your
web browser. By clicking on the "Edit & Run" button, you can check its output and edit the code as well.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>Hello World</p>
</body>
</html>
Creating an HTML Document

An HTML document is a file containing HTML code with the ".htm" or ".html" extension. To create an
HTML document, you need a text editor. And, to display it, you need a Web browser.
The steps to create an HTML document are as follows −
Open a text editor.
Write HTML code.

Save the file with the ".htm" or ".html" extension.
And, finally, open the file in the browser by typing the file name with a complete path, or just open it by
right-clicking and opening with a browser.
Why to Learn HTML?

Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in the
HTML language.
HTML is a MUST for students and working professionals to become great software engineers,
especially when they are working in the web development domain.
Advantages of Learning HTML

The following are some of the key advantages of learning HTML −
Create a web site − You can create a website or customize an existing web template if you know
HTML well.
Become a web designer − If you want to start a career as a professional web designer, HTML and
CSS designing is a must-have skill.
Understand web − If you want to optimize your website, to boost its speed and performance, it is
good to know HTML to yield the best results.
Learn other languages − Once you understand the basics of HTML, then other related
technologies like JavaScript, PHP, or Angular are easier to understand.
Applications of HTML
As mentioned before, HTML is one of the most widely used languages on the web. Here are some of the
applications of HTML −
Website development − HTML is used to create webpages (websites) that are rendered over the
web. Almost every page of the web has html tags in it to render its details in the browser.
Internet Navigation − HTML provides tags that are used to navigate from one page to another and
is heavily used in internet navigation.
Responsive UI − HTML pages now-a-days work well on all platforms, mobile, tabs, desktops, or
laptops owing to responsive design strategy.
Offline support − HTML pages, once loaded, can be made available offline on the machine
without any need of internet.
Game development − HTML5 has native support for rich experiences and is now useful in the
gaming development arena as well.
Mobile application development − HTML with CSS3 and JavaScript can be used for developing
cross-platform mobile applications.
Multimedia and video streaming − HTML5 offers support for multimedia elements like video and
audio, which enables seamless media playback directly in web browsers.
Audience: Who can Learn HTML?

This HTML tutorial is designed for aspiring web designers and developers with a need to understand
the HTML in enough detail along with its simple overview and practical examples. This tutorial will give
you enough ingredients to start with HTML, from where you can take yourself to a higher level of
expertise.
Prerequisites to Learn HTML

Before proceeding with this HTML tutorial, you should have a basic working knowledge of the Windows
or Linux operating system; additionally, you must be familiar with −
Experience with any text editor like Notepad, Notepad++, or Edit Plus etc.
How to create directories and files on your computer.

How to navigate through different directories.
How to type content in a file and save it on a computer.
Understanding about images in different formats like JPEG, PNG format.
Careers in HTML
HTML is the basics for web development. Good knowledge of HTML helps you to build your career in
the following fields −
Front-end developer
Web designer
Full stack developer
Email developer
Web design reviewer
HTML Practices and Preparation

After completing HTML tutorial, you can prepare for interview and practice HTML through our −
HTML Cheat Sheet
HTML Interview Questions

HTML Quiz
HTML Mock Test
HTML Complete Reference

Here is the complete HTML reference of elements, attributes, color name, color code, etc.
HTML Tags Reference

HTML Attributes Reference
HTML Events Reference

HTML Fonts Reference
HTML Articles
Explore our 2000+ HTML articles to find the solutions to your web design and development related
problems. Visit: HTML Articles
Frequently Asked Questions about HTML
1. What is the Full Form of HTML?

The full form of HTML is Hypertext Markup Language. It is the standard markup language for
developing web pages.
2. Why is HTML Used in Web Pages?

HTML is used in web pages for the following reasons −
It is used to provide a basic structure to web pages.
The HTML tags help search engines understand the content of the web page.
The HTML forms enable user interactions and include call-to-action buttons, text fields,
checkboxes, and many more.
Using HTML, we can embed various types of media like images, audio, video, etc., into a web
page.
It is also used in the creation of hyperlinks that can point to other web pages, different sections of
the same page, or other resources on the web.
3. How to save an HTML file?

To save an HTML file, follow these simple steps −
Open a text editor (like Notepad, Sublime Text, Atom, etc.) on your system.
Write your HTML code.
Click on the "File" menu in your text editor.

Click on "Save As".
In the dialogue box, choose the location where you want to save the file.
Type a name for your file, followed by the .html extension so that the browser interprets it as an
HTML file. For example, index.html.
Click "Save".
4. Who invented html in which year?

HTML was invented by Tim Berners-Lee, a physicist at CERN, in late 1991. However, the first standard
HTML specification was published in 1995.
5. What are the main features of HTML?

HTML has several key features as follows −
Simplicity − HTML is easy to learn and use. It has a clear and straightforward syntax which
makes it simpler for beginners also.
Flexibility − HTML allows developers to create a wide variety of web documents, from simple
static web pages to complex web applications.
Platform Independent − HTML is a standard that is supported by all modern web browsers. This
means that an HTML document can be displayed in any web browser on any operating system.
Linking − One of the key features of HTML is the ability to create links to other web pages.
Embedding Media − It also allows embedding various types of media like images, audio, video,
etc., into a web page.
Interactivity − HTML provides elements to create interactive forms that allow users to input data.
This is crucial for tasks like user registration, submitting search queries, and more.
Semantics − HTML5 introduced semantic elements that convey the meaning of the content to the
browser and developer. Examples include <header>, <footer>, <article>, and <section>.
Integration − HTML works well with other languages that are commonly used in web
development, such as CSS (Cascading Style Sheets) and JavaScript. CSS is used for styling and
layout of web pages while JavaScript is used for interactivity.
6. What is the latest version of HTML?

The latest version of HTML is HTML 5 which was drafted in 2008 and accepted in the year 2014 by
W3C.
7. Is HTML a Programming Language?

No, HTML is not a programming language. It is a markup language that structures the content on the
web. It stands for HyperText Markup Language.
8. What is HTML Web Storage?

HTML Web Storage (DOM storage) is a feature of HTML5 that allows web applications to store data
locally within the user's browser. It stores data in the form of key-value pairs.
There are two types of web storage −
localStorage − This object stores data with no expiration date. The data will not be erased when
the browser is closed and will be available in the next session.
sessionStorage − This object stores data for one session. The data is lost when the browser tab
is closed.
9. How to run an HTML file in a browser?

To run an HTML file in a browser, first, save your HTML file with a .html extension. For example,
index.html. Then, locate your file and double-click to open it in your default browser.
10. What are HTML components?

HTML components, also known as HTML elements, are the building blocks of HTML pages. They
represent parts of a webpage and are defined by HTML tags. Here are some of the main components −
DOCTYPE Declaration − An HTML document starts with a <!DOCTYPE html> declaration followed
by a <html> tag.
Headings − HTML provides six levels of headings from <h1> to <h6>, with <h1> being the highest
(or most important) level and <h6> the lowest.
Paragraphs − The <p> tag defines a paragraph.
Links − The <a> tag defines a hyperlink, which is used to link from one page to another.
Images − The <img> tag is used to embed images in an HTML page.
Lists − HTML supports ordered, unordered, and definition lists.
Tables − The <table> tag defines a table in HTML.

Forms − The <form> tag is used to create an HTML form for user input.
Divisions & Sections − The <div> tag is a container unit that encapsulates other page elements
and divides the HTML document into sections. HTML5 introduced semantic elements like
<section>, <article>, <header>, <footer>, <nav>, etc., which serve a similar purpose but provide
additional semantic information.
Media Elements − HTML5 introduced media elements like <video> and <audio> which can be
used to embed video and audio files in an HTML document.

HTML Tutorial - Learn HTML For Free

Uploaded by

Copyright:

Available Formats

HTML Tutorial - Learn HTML For Free

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial - Learn HTML For Free

Uploaded by

Copyright:

Available Formats

Basic HTML Structure

Here is the basic structure of an HTML document −

Elements of HTML Basic Structure

Writing Hello World in HTML

Online HTML Editor

Creating an HTML Document

The steps to create an HTML document are as follows −

Open a text editor.

Write HTML code.

Why to Learn HTML?

Advantages of Learning HTML

Audience: Who can Learn HTML?

Prerequisites to Learn HTML

How to create directories and files on your computer.

How to type content in a file and save it on a computer.

Understanding about images in different formats like JPEG, PNG format.

HTML Practices and Preparation

HTML Cheat Sheet

HTML Interview Questions

HTML Mock Test

HTML Complete Reference

HTML Tags Reference

HTML Events Reference

Frequently Asked Questions about HTML

1. What is the Full Form of HTML?

2. Why is HTML Used in Web Pages?

3. How to save an HTML file?

Click on the "File" menu in your text editor.

4. Who invented html in which year?

5. What are the main features of HTML?

6. What is the latest version of HTML?

7. Is HTML a Programming Language?

8. What is HTML Web Storage?

9. How to run an HTML file in a browser?

10. What are HTML components?

Images − The <img> tag is used to embed images in an HTML page.

Lists − HTML supports ordered, unordered, and definition lists.

Tables − The <table> tag defines a table in HTML.

You might also like