HTML Tutorial

HTML Home
HTML Introduction
HTML Editors
HTML Basics
HTML Elements

HTML Basics – Learn by Example with HQLEduTech

Welcome to your first step into the world of web development. In this section, we’ll explore some simple and essential HTML examples to help you get started.

Don’t worry if you see tags that are new to you—we’ll explain everything along the way!

Structure of an HTML Document

Every HTML file begins with a document type declaration, followed by the actual HTML code.

HTML
<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to HQLEduTech!</h1>
    <p>This is your first web page.</p>
  </body>
</html>

What is <!DOCTYPE html>?

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

  • It should appear at the very top of your file.
  • It is not case-sensitive.
  • It ensures your webpage displays consistently across different browsers.

HTML Headings

Headings help structure your content.
HTML offers six levels of headings, from <h1> (most important) to <h6> (least important).

HTML
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a smaller heading</h3>

Use headings to give hierarchy and meaning to your content.

Creating Links with <a>

You can create hyperlinks using the <a> tag and the href attribute.

HTML
<a href="https://www.hqledutech.com">Visit HQLEduTech!</a>

The href defines the destination URL.

Clicking the link will take you to that page.

Adding Images with <img>

Display images using the <img> tag. You must define:

  • src (image path)
  • alt (alternative text for accessibility)
  • width and height (optional)
HTML
<img src="hqledutech-logo.png" alt="HQLEduTech Logo" width="120" height="60">

View the Source Code

Ever wondered how a webpage was made?

Here’s how you can peek behind the scenes:

  • View Source: Press Ctrl + U or right-click > “View Page Source”
  • Inspect Element: Right-click > “Inspect” to see HTML + CSS and even make live edits

Keep Practicing!
Learning HTML is all about exploring. The more you test, the more confident you’ll become. Try using the HQLEduTech Code Playground to edit and run your HTML live.

Ready to Practice?

Click the button below and try your first HTML snippet now!

HTML Example:
<!DOCTYPE html> <html>
<head> <title>HTML Tutorial</title> </head>
<body> <h1>This is a heading</h1>
<p>This is a paragraph.</p> </body> </html>
Try it Yourself
Scroll to Top