HTML Tutorial for Beginners

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

HTML tells a web browser which parts of a page are headings, paragraphs, links, images, lists, tables, forms, and other types of content. A browser reads the HTML document, builds a representation of its elements, and renders the resulting page on the screen.

This HTML tutorial begins with document structure and common tags, then covers links, images, lists, tables, forms, semantic elements, and other concepts needed to create well-structured web pages.

What HTML Does on a Web Page

HTML describes the structure and meaning of page content. It does not normally control the complete visual design or application behavior.

  • HTML structures the content.
  • CSS controls presentation, including colors, spacing, fonts, and layouts.
  • JavaScript adds behavior and interactivity.

For example, HTML can identify a piece of text as a heading, CSS can make that heading blue, and JavaScript can change it after a button is clicked.

Basic HTML Page Example

The following is a basic example of HTML page with a heading and paragraph.

index.html

</>
Copy
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: grey;
      }
    </style>
  </head>
  <body> 
    <h1>Heading 1</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Save the document as index.html, and then open it in a web browser. The browser displays the heading and paragraph instead of showing the HTML tags.

Parts of the Basic HTML Document

  • <!DOCTYPE html> declares that the document uses modern HTML.
  • <html> is the root element that contains the complete HTML document.
  • <head> contains document metadata and resources that are not part of the main visible content.
  • <style> contains CSS rules in this example.
  • <body> contains the content displayed in the browser window.
  • <h1> defines the main heading.
  • <p> defines a paragraph.

HTML Elements, Tags, and Attributes

An HTML element usually consists of an opening tag, content, and a closing tag.

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

In this example, <p> is the opening tag, This is a paragraph. is the content, and </p> is the closing tag.

Attributes provide additional information or settings for an element. They are written inside the opening tag.

</>
Copy
<a href="https://example.com">Visit Example</a>

Here, href is an attribute that specifies the destination of the link.

Seven Basic HTML Tags for Beginners

There is no official list limited to exactly seven basic tags, but beginners commonly start with the following elements:

  1. <html> contains the whole HTML document.
  2. <head> contains metadata and linked resources.
  3. <title> sets the title displayed on the browser tab.
  4. <body> contains the visible page content.
  5. <h1> defines the main page heading.
  6. <p> defines a paragraph.
  7. <a> creates a hyperlink.

Other frequently used beginner elements include <img>, <ul>, <ol>, <li>, <div>, and <span>.

HTML Headings and Paragraphs

HTML provides six heading levels, from <h1> through <h6>. Use them to create a logical content hierarchy rather than selecting a heading level only because of its default size.

</>
Copy
<h1>HTML Tutorial</h1>
<h2>HTML Elements</h2>
<h3>Paragraph Element</h3>

<p>A paragraph contains one or more sentences.</p>

A page normally has one clear main heading, followed by appropriately nested subheadings. This structure helps readers, search engines, and assistive technologies understand the organization of the content.

HTML Links and Images

The anchor element creates a link. The image element embeds an image in the page.

</>
Copy
<a href="about.html">About Us</a>

<img src="office.jpg" alt="Employees working in an office">
  • The href attribute contains the link destination.
  • The src attribute contains the image file location.
  • The alt attribute provides a text alternative that describes the purpose or content of the image.

Use meaningful link text rather than vague wording such as “click here.” For informative images, write concise alternative text that communicates the relevant information.

HTML Lists for Grouped Information

Use an unordered list when the sequence does not matter and an ordered list when the items follow a meaningful order.

</>
Copy
<h2>Shopping List</h2>
<ul>
  <li>Bread</li>
  <li>Milk</li>
  <li>Fruit</li>
</ul>

<h2>Setup Steps</h2>
<ol>
  <li>Create an HTML file.</li>
  <li>Add the document structure.</li>
  <li>Open the file in a browser.</li>
</ol>

HTML Tables for Tabular Data

HTML tables are intended for information arranged in rows and columns, such as schedules, reports, price lists, and account statements. They should not be used simply to position page content.

</>
Copy
<table>
  <caption>Monthly Expenses</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Internet</td>
      <td>$60</td>
    </tr>
    <tr>
      <td>Electricity</td>
      <td>$95</td>
    </tr>
  </tbody>
</table>

The <caption> element identifies the table, while table headings marked with <th> describe the corresponding rows or columns.

HTML Forms and User Input

Forms collect information from users. Common controls include text fields, email fields, checkboxes, radio buttons, select menus, and submit buttons.

</>
Copy
<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Subscribe</button>
</form>

The label’s for value matches the input’s id. This association makes the field easier to understand and operate, including for users of assistive technology.

Semantic HTML Page Structure

Semantic HTML elements communicate the purpose of different page regions. They provide more meaning than using generic containers for every section.

</>
Copy
<header>
  <h1>Company News</h1>
</header>

<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/news">News</a>
</nav>

<main>
  <article>
    <h2>New Office Opens</h2>
    <p>The company opened a new regional office.</p>
  </article>
</main>

<footer>
  <p>Copyright 2026 Example Company</p>
</footer>

Common semantic elements include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. Choose each element according to the role of its content.

Block-Level and Inline HTML Elements

Some HTML elements commonly form sections or blocks of content, while others are used within a line of text.

  • Common block elements: <div>, <p>, <section>, <article>, and headings.
  • Common inline elements: <span>, <a>, <strong>, <em>, and <code>.

CSS can change how an element is displayed, so block and inline behavior should not be treated as a substitute for understanding an element’s semantic purpose.

HTML Comments and Special Characters

Comments let developers leave notes in a document without displaying those notes as page content.

</>
Copy
<!-- This note is not displayed on the page. -->

Character references are used when a character has a special role in HTML or cannot be entered conveniently.

</>
Copy
<p>Use &lt;p&gt; to create a paragraph.</p>
<p>Research &amp; Development</p>

In the rendered page, &lt; becomes <, &gt; becomes >, and &amp; becomes an ampersand.

How to Create and Run an HTML File

  1. Open a plain-text or code editor.
  2. Create a new file and add a basic HTML document.
  3. Save the file with the .html extension, such as index.html.
  4. Open the saved file in a web browser.
  5. Edit the HTML, save the file, and refresh the browser to view the changes.

A basic HTML file does not require a compiler. For larger projects, developers often use a local development server because it provides behavior closer to a hosted website and avoids some browser restrictions associated with directly opened files.

Recommended HTML Learning Order

  1. Learn the HTML document structure.
  2. Practice headings, paragraphs, text-level elements, and comments.
  3. Create links and add images with useful alternative text.
  4. Organize information with ordered and unordered lists.
  5. Learn tables for genuinely tabular data.
  6. Create forms with correctly associated labels and controls.
  7. Use semantic elements to structure complete pages.
  8. Add audio, video, and embedded content where appropriate.
  9. Learn basic accessibility practices and validate your markup.
  10. Study CSS after you can create a meaningful HTML structure.

A beginner can understand basic HTML syntax in a few focused study sessions, but using HTML correctly requires continued practice. The time needed depends on whether the goal is to recognize common tags, build complete pages, or create accessible and maintainable websites.

HTML Practice Page for Beginners

The following example combines headings, navigation, an image, a list, and semantic page elements.

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>City Guide</title>
</head>
<body>
  <header>
    <h1>City Guide</h1>
    <nav aria-label="Main navigation">
      <a href="#places">Places</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="places">
      <h2>Places to Visit</h2>
      <img src="city-park.jpg" alt="Walking path through the city park">
      <ul>
        <li>Central Library</li>
        <li>City Museum</li>
        <li>Riverside Park</li>
      </ul>
    </section>

    <section id="contact">
      <h2>Contact the Guide Team</h2>
      <p>Email <a href="mailto:guide@example.com">guide@example.com</a>.</p>
    </section>
  </main>

  <footer>
    <p>City Guide Information Service</p>
  </footer>
</body>
</html>

HTML Page Quality Checklist

  • Confirm that the document begins with <!DOCTYPE html>.
  • Add an appropriate lang attribute to the root <html> element.
  • Provide a descriptive and unique <title> for the page.
  • Use headings in a logical hierarchy without skipping levels unnecessarily.
  • Use semantic elements that match the purpose of the content.
  • Write useful alternative text for informative images.
  • Associate every form control with an appropriate label.
  • Use tables only for row-and-column data and include meaningful headers.
  • Check that links have clear text and valid destinations.
  • Review element nesting, closing tags, and duplicate id values.
  • Test the page using keyboard navigation and different viewport sizes.
  • Validate the HTML and correct errors that affect structure or accessibility.

Frequently Asked Questions About Learning HTML

Can I learn basic HTML in seven days?

You can learn basic document structure, headings, paragraphs, links, images, lists, and simple forms in seven days with regular practice. Building accessible, well-structured pages consistently takes more time and experience.

Can I learn HTML in three hours?

Three hours may be enough to understand the basic syntax and create a small page. It is not usually enough to become comfortable with tables, forms, semantic structure, accessibility, media, and reliable page authoring.

Does HTML require programming knowledge?

No. HTML is a markup language rather than a programming language. You can begin learning it without prior programming experience.

How do I display “I love you” in HTML?

Place the text inside an HTML element such as a paragraph or heading.

</>
Copy
<p>I love you</p>

Should I learn HTML before CSS and JavaScript?

Learning HTML first provides a useful foundation because CSS styles HTML elements and JavaScript frequently reads or changes them. After understanding basic HTML structure, you can study CSS alongside further HTML practice.

Start by creating small pages and checking the result in a browser. Add one topic at a time, such as links, images, lists, tables, forms, and semantic layout elements.