Beginner 14 min

HTML Fundamentals

Elements, attributes, headings, links, images and a valid page skeleton.

What you will learn

Write a valid HTML5 page
Use links and images with alt text
Choose semantic elements

HTML (HyperText Markup Language) describes the structure and meaning of a web page: what is a heading, a paragraph, a link, an image. It does not control appearance (that is CSS) or behavior (that is JavaScript). Every web page you have ever seen starts as HTML.

Elements and attributes

An element is a pair of tags around content: <p>Hello</p>. The opening tag can carry attributes, name/value pairs that configure it. A few elements are void and have no closing tag, such as <img> and <br>.

<a href="https://stackcone.com" target="_blank" rel="noopener">Visit stackcone</a>
<img src="logo.png" alt="stackcone logo" width="120">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, web</h1>
  <p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
</body>
</html>

<!DOCTYPE html> tells the browser to use modern standards.
lang helps screen readers and translation tools.
<head> holds information about the page (title, character set, styles). <body> holds what people see.
The viewport meta tag is essential for pages to display properly on phones.

<h1>Main title</h1>       <!-- one per page -->
<h2>Section</h2>
<p>Some text.</p>

<ul>
  <li>Unordered item</li>
  <li>Another</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<a href="/about/">Relative link</a>
<a href="#contact">Jump to a section</a>

Use headings in order (h1, then h2, then h3) to outline the page. Do not choose a heading level because of its size; that is CSS's job.

Images and alt text

Every <img> needs an alt attribute describing it. Screen readers read it aloud, and it shows if the image fails to load. Use an empty alt="" for purely decorative images. Setting width and height prevents layout jumps while the image loads, and loading="lazy" defers off-screen images.

<table>
  <thead><tr><th>Language</th><th>Year</th></tr></thead>
  <tbody>
    <tr><td>Python</td><td>1991</td></tr>
    <tr><td>Java</td><td>1995</td></tr>
  </tbody>
</table>

Tables are for tabular data only, never for page layout.

Validate

Paste your page into validator.w3.org to catch unclosed tags and other mistakes. Browsers forgive errors silently, which hides bugs.

Try it yourself

Create a page about yourself with a title, a photo (with alt text), a list of three skills and a link to a site you like.

Show solution

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>About Amar</title></head>
<body>
  <h1>About Amar</h1>
  <img src="me.jpg" alt="Portrait of Amar" width="160">
  <h2>Skills</h2>
  <ul><li>Python</li><li>SQL</li><li>React</li></ul>
  <p>Favorite site: <a href="https://developer.mozilla.org">MDN</a></p>
</body>
</html>