What HTML Does: A Small Web Page Explained - Yenra

Separate structure, appearance, and behavior

HTML supplies document structure. CSS supplies presentation rules such as spacing, color, and layout. JavaScript supplies programmable behavior. Many pages combine all three, while a useful text page can work with HTML alone. Choose a heading because it introduces a section, then use CSS to control its size.

The HTML Standard's element definitions explain the meanings and permitted use of these building blocks. A browser constructs a document tree from the markup; developer tools can show the resulting elements, which may differ from malformed source after the parser repairs it.

Open a small working page

This fictional garden note uses no scripts or external images. Open the practice page, or download the HTML practice ZIP, extract it, and open garden.html in a browser. Edit the extracted file in a plain-text editor.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Garden observation</title>
<body>
<main>
  <h1>Garden observation</h1>
  <p>A fictional practice page about a small garden.</p>
  <h2>What I noticed</h2>
  <ul>
    <li>The shaded soil stayed damp.</li>
    <li>Bees visited the lavender.</li>
  </ul>
  <p><a href="https://yenra.com/definitions/html.html">Read the HTML guide</a></p>
</main>
</body>
</html>

The doctype selects modern standards-mode rendering. The language is English; the character encoding is UTF-8. The title appears in the browser tab, while the h1 is the visible main heading. The viewport declaration helps the page use a mobile device's layout width.

The main element contains the primary content. The list groups two observations, each in a list item. The link's href attribute supplies its destination. An element commonly includes a start tag, content, and an end tag; some, such as img and meta, are void elements with no end tag. See the HTML syntax rules.

Make changes and check the result

1. Change “Garden observation” inside h1. Save the file and reload. The page heading changes; the tab title stays the same until you edit title too.
2. Add a third li inside ul. The browser should display a third list item.
3. Change the link text to explain its destination. Keep its href pointed at the guide.
4. Use the Tab key to reach the link and Enter to activate it. Check the page at a narrow window width.

If the browser displays source text instead of the page, check that the file ends in .html rather than .html.txt. If changes are missing, confirm you edited the same file you opened and saved it before reloading. A text editor should save ordinary UTF-8 text, without word-processor formatting.

Use < when you want a literal less-than sign in page text, and & for a literal ampersand where escaping is needed. Keeping text and markup distinct avoids accidental tags.

Add images and meaningful structure

For a real garden photograph, a useful image element could look like this. Supply the actual file and its dimensions before using it:

<img src="lavender.jpg" width="800" height="450"
     alt="A bee rests on a purple lavender flower.">

The alternative describes the relevant information for someone who cannot see the picture. A purely decorative image can use alt="". The W3C alternative-text decision tree helps choose wording according to the image's purpose. Size attributes should match the image's proportions; responsive CSS can scale its displayed size.

Use h2 for the next section level under h1, and choose link text that still makes sense outside its sentence. A button is appropriate for an action; a link is appropriate for navigation. These choices give readers predictable controls.

Before publishing, check links, heading order, keyboard use, image alternatives, and mobile layout. The Nu HTML Checker can identify markup errors; human review establishes whether the document is understandable and usable. Use a public or sanitized sample when sending markup to an external checker.