HTML Tutorial for Beginners: Learn HTML from Scratch

If you are new to web development, HTML is the best place to start. You do not need to know programming before learning it, and you can begin with nothing more than a text editor and a web browser.

In this tutorial, we will start with the basics and gradually build a clear understanding of how HTML pages are structured. You will learn what HTML is, how elements and attributes work, how to create your first page, and how to add common content such as headings, paragraphs, links, images, lists, tables, and forms.

The goal is not to memorize hundreds of tags. Instead, you will learn the ideas behind HTML so you can read existing markup, write your own pages, and confidently move on to CSS and JavaScript.

Tip: You can practice the examples in a live HTML editor instead of creating files on your computer.

What Is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to describe the structure and meaning of content on web pages.

HTML is not a programming language. A programming language is used to write logic and instructions that perform computations or make decisions. HTML mainly describes what the content is: a heading, paragraph, link, image, list, form, article, navigation area, and so on.

Think of a web page as a building:

• HTML provides the structure and content.
• CSS controls presentation, such as colors, spacing, fonts, and layout.
• JavaScript adds behavior and interactivity.

For example:

CSS can make that heading look different, while JavaScript can change it after a user interacts with the page.

Why Should You Learn HTML?

HTML is useful whether you want to become a front-end developer, build your own website, create web pages for a business, or simply understand how websites work.

Here are a few good reasons to learn it:

• It is beginner-friendly. You can create a page with only a few lines of HTML.
• It is the foundation of the web. Modern websites rely on HTML to describe their content.
• It makes CSS easier to learn. You need to understand the elements you are styling.
• It makes JavaScript easier to understand. JavaScript often reads and changes HTML elements.
• It helps with accessibility and SEO. Correct HTML gives browsers, search engines, and assistive technologies useful information about your content.
• It is useful in many careers. Web developers, designers, content editors, marketers, and technical writers often work with HTML.

How Does HTML Work?

An HTML document is made up of elements. Most elements have an opening tag, some content, and a closing tag.

Here, <p> is the opening tag and </p> is the closing tag. Together with the text inside, they form a paragraph element.

Some elements do not wrap around content. These are called void elements. For example:

The <img> element displays an image and does not need a closing </img> tag.

Your First HTML Page

Let’s create a small but complete HTML document. Save this code as index.html and open it in a browser.

This example contains the basic pieces you will find in most HTML documents. Let’s look at them one by one.

Understanding the Basic HTML Structure

<!DOCTYPE html>

The doctype tells the browser to use the modern HTML document mode. For new pages, use the HTML5 doctype:

It is normally the first line of the document.

<html>

The <html> element is the root of the document. Everything else belongs inside it.

It is good practice to specify the language of the page:

For a Hindi page, for example, you could use lang="hi".

<head>

The <head> contains information about the document that is not normally displayed as page content. It can contain the title, character encoding, viewport settings, stylesheets, metadata, and other resources.

<title>

The <title> element defines the document title shown in the browser tab. It also helps users and search engines understand what the page is about.

<body>

The <body> contains the content visitors see and interact with, such as headings, paragraphs, images, links, buttons, lists, forms, and articles.

HTML Elements and Tags

The words tag and element are often used interchangeably by beginners, but they are not exactly the same thing.

A tag is the markup itself, such as <p> or </p>. An element is the complete structure, including its content:

Here, <p> and </p> are tags, while the complete paragraph is the element.

Understanding this distinction becomes useful when you start working with the DOM and JavaScript.

HTML Attributes

Attributes provide additional information about an element. They are written inside the opening tag.

For example:

Here, href is an attribute that tells the browser where the link should go.

Another common example is the src and alt attributes of an image:

The alt text is especially important for accessibility because screen readers can use it to describe the image.

Common HTML Elements You Should Learn First

You do not need to learn every HTML element on your first day. Start with the elements you will use most often.

Headings: <h1> to <h6>

HTML has six heading levels, from <h1> through <h6>.

Use headings to organize the content of a page. Choose a heading level based on the structure of the content, not simply because it looks bigger or smaller.

Paragraphs: <p>

Use <p> for normal paragraphs of text.

Links: <a>

The anchor element creates links to other pages, files, sections of the same page, email addresses, and more.

For links that open in a new tab, you will often see:

The rel="noopener" value is a good security practice when using target="_blank".

Images: <img>

Use <img> to display an image.

The alt attribute should describe the image when it conveys useful information. For a purely decorative image, an empty alt="" can be appropriate.

Lists

An unordered list uses <ul> and an ordered list uses <ol>.

An ordered list is useful when the sequence matters:

Buttons: <button>

Use <button> for actions that a user can perform, such as submitting a form or opening a menu.

A button is different from a link: use a link when the user is navigating somewhere, and a button when the user is performing an action.

Semantic HTML

Semantic elements describe the purpose of different parts of a page. Common examples include:

Some useful semantic elements are:

• <header> for introductory content or a page or section header.
• <nav> for a group of navigation links.
• <main> for the main content of the page.
• <article> for self-contained content such as an article or post.
• <section> for a thematic section of content.
• <aside> for related or supplementary content.
• <footer> for footer information.

Semantic HTML makes your markup easier to understand and helps browsers and assistive technologies understand the structure of your page.

HTML Comments

Comments are useful for leaving notes in your code. Browsers do not display them as page content.

Comments are helpful while learning and maintaining projects, but never put passwords, API keys, or other secrets inside them. HTML sent to a browser is visible to the user.

HTML Forms

Forms allow users to enter and submit information.

Here is a simple example:

Notice that the <label> is connected to the input through the matching for and id values. This makes the form easier to use with keyboards and assistive technologies.

HTML provides many useful input types, including text, email, number, date, password, checkbox, and radio.

HTML Tables

Tables are designed for tabular data, such as prices, schedules, marks, or reports.

Use tables for data, not for designing the layout of a web page. CSS layout tools such as Flexbox and Grid are better suited for page layout.

HTML5 and Modern HTML

You may still hear people refer to HTML5 as if it were a completely separate language. HTML5 introduced many important capabilities and semantic elements, but today it is more useful to think of HTML as a living web standard that continues to evolve.

Modern HTML includes features for multimedia, forms, graphics, semantics, accessibility, and integration with browser APIs.

For new projects, focus on current HTML practices rather than outdated elements such as <font>, <center>, or <frameset>.

HTML and Accessibility

Good HTML is not only about making a page look correct. It should also make the page usable by as many people as possible.

A few beginner-friendly accessibility habits are:

• Use meaningful heading levels to organize content.
• Add useful alt text to informative images.
• Use <button> for actions and <a> for navigation.
• Associate form labels with their inputs.
• Use semantic elements such as <main>, <nav>, and <footer> where appropriate.
• Make sure interactive elements can be used with a keyboard.
• Do not rely on color alone to communicate important information.

These habits are useful from your first project; accessibility should not be something you add only after a website is finished.

How to Practice HTML

The fastest way to learn HTML is to write small examples and change them yourself.

Try this simple exercise:

Change the heading, paragraph, hobbies, and link. Then add an image, a second section, and a contact form. Small experiments like these help you understand HTML much faster than memorizing tag lists.

HTML Editor: Practice Without Installing Anything

If you do not want to create files on your computer, use the free HTML editor on CodesCompiler to write HTML and see the result while you learn.

The important part is to practice. Type the examples yourself, change them, break them, and fix them. That is how HTML starts to feel natural.

What Should You Learn After HTML?

Once you are comfortable creating HTML pages, the next step is CSS. CSS lets you control colors, fonts, spacing, responsive layouts, animations, and the overall visual design of a page.

After CSS, learn JavaScript to add behavior and interactivity such as menus, form validation, dynamic content, calculators, games, and other browser-based features.

A simple learning path is:

HTML → CSS → JavaScript → Front-End Projects → Advanced Web Development

You can also continue exploring the HTML tutorials on CodesCompiler to learn individual topics in more detail, including attributes, forms, tables, images, links, semantic elements, multimedia, and browser APIs.

Frequently Asked Questions About HTML

Is HTML a programming language?

No. HTML is a markup language. It describes the structure and meaning of web content. Programming languages such as JavaScript, Python, Java, and PHP are used to write logic and perform computations.

Is HTML difficult to learn?

HTML is one of the easiest technologies for beginners to start with. You can create a working page with only a few elements. The bigger challenge is learning how to structure real-world pages cleanly and accessibly, which comes with practice.

Do I need to install software to learn HTML?

No. A text editor and a modern web browser are enough. You can also practice directly in an online HTML editor.

What is the latest version of HTML?

HTML is no longer released as a sequence of numbered versions such as HTML4, HTML5, and HTML6. The current standard is maintained as the HTML Living Standard, which is continuously updated as the web platform evolves.

What is the difference between <head> and <header>?

<head> contains document metadata and resources that are not normally displayed as page content. <header> is a visible semantic element inside the page body and is commonly used for introductory content, branding, or navigation.

What is an HTML attribute?

An attribute provides additional information about an HTML element. For example, href tells an <a> element where its link points, while alt provides alternative text for an image.

How do you save an HTML file?

Save the file with the .html extension. For example, index.html. You can then open the file directly in a modern web browser to see the page.

Can HTML create a complete website by itself?

HTML can create the structure and content of a website, but most modern websites also use CSS for presentation and JavaScript or server-side technologies for richer behavior and functionality.

Start Learning HTML Today

You do not need to understand the whole language before building your first page. Start with a heading, add a paragraph, create a link, and keep experimenting.

The most important thing is to write HTML regularly. Once the basic structure becomes familiar, CSS and JavaScript will make much more sense because you will already understand the document they work with.

Ready to practice? Open the free HTML editor and start building your first page.

HTML → Structure → CSS → Design → JavaScript → Interactivity