HTML for Beginners: Build a Semantic Page You Can Navigate

What should your first HTML page achieve?

This guide focuses on document structure. CSS controls presentation, and more advanced behaviour may require other technology. Gammal Tech offers HTML and CSS as separate subjects you can use together.

Start with a small complete document

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My study plan</title>
</head>
<body>
  <main>
    <h1>My study plan</h1>
    <p>Practise one small programming problem today.</p>
    <h2>Next steps</h2>
    <ol>
      <li>Write the expected result.</li>
      <li>Build and test a solution.</li>
    </ol>
    <a href="https://new.gammal.tech/courses">Explore Gammal Tech courses</a>
  </main>
</body>
</html>

Save the example as an HTML file and open it in a browser. The title appears in the browser's page title, while h1 is the visible main heading. The language attribute identifies the document language.

The example is a fictional study page. It needs no account, database or JavaScript to display its content.

Choose elements by meaning

Do not choose a heading merely because you like its default size. Use CSS for appearance and preserve the logical hierarchy.

Think about language and direction

For an Arabic page, declare Arabic as the document language and set right-to-left direction. These are different pieces of information: language describes the text, while direction affects layout and reading order.

Technical terms or code may need an isolated left-to-right segment inside Arabic content. Check the result in the browser instead of assuming that punctuation and numbers will always appear as intended.

Make links and images understandable

Use descriptive link text such as “Browse programming courses” instead of repeating “click here.” For images, provide an appropriate text alternative when the image conveys information. An image used only as decoration can have an empty alternative.

A link navigates; a button triggers an action. Do not create a fake button with a link that goes nowhere just because it looks attractive.

Review the page without relying on appearance

Read the headings in order, follow the links using the keyboard and confirm that focus is visible. Check the page at a narrow width and with enlarged text.

Your practice task is a one-page study plan with one h1, two h2 sections and a short ordered list. Keep the information meaningful, then move to the CSS guide to style the same structure. A clear document is a better foundation than a large collection of tags used without purpose.