​
What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure and content of a webpage, telling browsers how to display text, images, and other media. HTML uses a series of elements, represented by tags, to mark up different parts of content.
HTML is not a programming language; it’s a markup language that defines the structure of your content.

​
How HTML Works

HTML documents are plain text files with a .html extension. They consist of elements that are defined by tags. Browsers read HTML documents and render them into visible or audible web pages. 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

​
HTML Document Structure

Every HTML document follows a basic structure:
1

DOCTYPE Declaration

<!DOCTYPE html> tells the browser that this is an HTML5 document.
2

HTML Element

The <html> element is the root element that contains all other elements.
3

Head Section

The <head> element contains meta-information about the document, such as its title, character encoding, and links to external resources.
4

Body Section

The <body> element contains all the content that is visible on the webpage.

​
Basic HTML Elements

HTML provides a wide range of elements to structure content. Here are some of the most common ones:

​
Headings

HTML offers six levels of headings, from <h1> (most important) to <h6> (least important). 
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>

​
Paragraphs

The <p> element defines a paragraph of text. 
<p>
  This is a paragraph of text. HTML will automatically wrap the text and adjust
  it to the screen size.
</p>
The <a> (anchor) element creates hyperlinks to other web pages or resources. 
<a href="https://example.com">Visit Example.com</a>

​
Images

The <img> element embeds images in your webpage. 
<img src="image.jpg" alt="Description of the image" />
Always include the alt attribute in your image tags. It provides a text description for screen readers and displays if the image fails to load.

​
Lists

HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). 
<!-- Unordered list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

​
HTML Attributes

Attributes provide additional information about HTML elements and are always specified in the start tag. 
<element attribute="value">Content</element>
Common attributes include:
  • id: Specifies a unique identifier for an element
  • class: Specifies one or more class names for styling with CSS
  • style: Contains inline CSS styling
  • src: Specifies the URL of external resources like images
  • href: Specifies the URL of a linked resource

​
HTML5 Features

HTML5 introduced many new features and elements that make it easier to create modern web applications:

Semantic Elements

Elements like <header>, <footer>, <article>, and <section> that clearly describe their meaning.

Audio and Video

Native support for multimedia with <audio> and <video> elements.

Canvas

The <canvas> element for drawing graphics via JavaScript.

Form Enhancements

New input types like email, date, range, and more.

​
Best Practices

  • Use semantic HTML elements to improve accessibility and SEO
  • Keep your HTML structure clean and well-organized
  • Validate your HTML using tools like the W3C Validator
  • Ensure your pages are accessible to all users
  • Separate structure (HTML), presentation (CSS), and behavior (JavaScript)

​
Next Steps

Now that you understand the basics of HTML, you can: