Learn / Programming / HTML & CSS / HTML Fundamentals

HTML & CSS · Lesson 1 of 5

HTML Fundamentals

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

  • Beginner
  • 14 min read
  • 3 objectives

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.

What is HTML?

Every web page you have ever seen, from a simple blog to a huge web app, is built from HTML: HyperText Markup Language. HTML does not make things pretty or interactive; it describes what things are. This is a heading, this is a paragraph, this is a link, this is an image. The browser reads that description and draws the page. CSS then styles it and JavaScript makes it behave.

The good news: HTML is not a programming language, so there are no variables or loops to learn. It is a set of labels you attach to content. You can be productive within an hour.

Your first page in two minutes

You need only a text editor (Notepad, TextEdit in plain-text mode, or VS Code) and a browser. Create a file called index.html, paste the code below, save it and double-click the file. The browser opens it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
    <p>This is my <strong>first</strong> page.</p>
  </body>
</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">

A page skeleton

<!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.

Text, lists and links

<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.

Tables

<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.

Reading that page, line by line

  • <!DOCTYPE html> tells the browser to use modern HTML.
  • <html lang="en"> wraps everything and declares the language (helps screen readers and translation).
  • <head> holds information about the page that is not shown in the window: the title in the browser tab, the character set, links to stylesheets.
  • <body> holds everything visible.
  • <h1> is the main heading, <p> a paragraph and <strong> marks important text (shown bold).

Tags come in pairs

Most elements have an opening tag, some content and a closing tag with a slash: <p>text</p>. A few elements have no content and no closing tag, such as <img> and <br>. Elements nest like boxes inside boxes, so always close the innermost one first.

<!-- correct nesting -->
<p>This is <em>very <strong>important</strong></em> text.</p>

<!-- wrong: tags overlap -->
<p>This is <em>very <strong>important</em></strong> text.</p>

Headings create an outline

Use <h1> once for the page title, then <h2> for main sections and <h3> for subsections beneath them. Do not pick a heading because of its size; pick it for its meaning. Search engines and screen-reader users navigate by this outline, and you can restyle sizes with CSS later.

Links and images, the two things that make it the Web

<p>Read the <a href="https://developer.mozilla.org/">MDN docs</a>.</p>
<p><a href="about.html">About us</a> (another page in the same folder)</p>
<p><a href="#contact">Jump to the contact section</a></p>

<img src="cat.jpg" alt="A grey cat asleep on a sofa" width="300">

The href attribute says where a link goes; src says where an image lives; alt describes the image for people who cannot see it and appears if it fails to load. Never leave alt out.

Lists: the workhorse of page structure

<ul>          <!-- unordered: bullet points -->
  <li>Milk</li>
  <li>Eggs</li>
</ul>

<ol>          <!-- ordered: numbered steps -->
  <li>Open the file</li>
  <li>Edit it</li>
  <li>Save it</li>
</ol>

Troubleshooting checklist

  • Nothing changes when you refresh? Make sure you saved the file, and that you edited the file the browser has open.
  • Text looks wrong or shows odd symbols? Add <meta charset="UTF-8"> in the <head>.
  • Image is missing? Check the spelling and case of the file name and that the path matches where the file really is.
  • Right-click the page and choose Inspect to see exactly how the browser understood your HTML.

Key takeaways

  • HTML labels what content is; CSS styles it; JavaScript adds behaviour.
  • A page has a <head> (information about the page) and a <body> (what people see).
  • Elements nest; attributes such as href, src and alt add details.
  • Choose headings by meaning, and always write useful alt text.
// Write your solution here
Up next · Lesson 2Forms and Semantic HTMLInputs, labels, validation and landmarks that make pages accessible.