HTML for Beginners: Your First Step Into Web Development.

HTML is the starting point for every webpage. It defines structure — headings, paragraphs, links, images, and forms — so the browser knows what to display and in what order. This guide covers the essentials you need before moving on to CSS and JavaScript.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for web content. Think of it as the skeleton of a page: it describes sections and elements, not visual styling.

Why learn HTML first?

• It is the foundation of every website.
• The syntax is approachable — tags wrap content in angle brackets.
• It works naturally with CSS for styling and JavaScript for interactivity.

Set up a simple editor

You do not need advanced software to begin. Any plain-text editor works:

• Windows: Notepad or VS Code
• macOS: TextEdit (plain text mode) or VS Code
• Linux: gedit, nano, or VS Code

Save files with an .html extension, for example my-first-page.html, then open them in your browser.

Online editors such as W3Schools Tryit or CodePen are also useful for quick experiments.

Basic HTML structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

What each part does

• <!DOCTYPE html> — tells the browser the document uses HTML5.
• <html> — root element of the page.
• <head> — metadata such as the page title shown in the browser tab.
• <body> — visible content: text, images, links, and other elements.

Essential tags

Headings

Use <h1> through <h6> for headings. Use one main <h1> per page when possible.

<h1>Welcome to HTML</h1>
<h2>Subheading</h2>

Paragraphs and emphasis

<p>This is a paragraph.</p>
<strong>Important text</strong>
<em>Emphasised text</em>
<br />

<br /> inserts a line break inside a paragraph.

Links

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

Images

<img src="photo.jpg" alt="Description of the image" />

Always include meaningful alt text for accessibility.

Lists

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Next steps

Once you can structure a page confidently, move on to CSS for layout and styling, then JavaScript for dynamic behaviour. HTML remains the foundation throughout.