HTML and CSS: the foundation of a web interface

HTML describes a web page’s meaning and structure. CSS describes its presentation. JavaScript adds behaviour. React later creates HTML structures from components. First, we build a small page without React. A well-chosen HTML element already provides important keyboard and accessibility behaviour.

Example files

index.html

01Open an HTML file

Save index.html and open it in your browser. doctype selects modern HTML mode. html lang specifies the language. head contains metadata. body contains visible content. The viewport meta element supports small screens.

index.html · htmlOpen file

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>House notes</title>
  <style>
    body { font-family: system-ui; margin: 24px; color: #23483b; }
    main { max-width: 600px; margin: auto; }
    label, input, button { display: block; margin-bottom: 12px; }
    input, button { padding: 10px; font: inherit; }
  </style>
</head>
<body>
  <main>
    <h1>House notes</h1>
    <label for="title">Title</label>
    <input id="title" name="title">
    <button type="button">Save later</button>
  </main>
</body>
</html>

02Use semantics

main marks the main content. h1 is the main heading. label connects a field title to an input through its ID. button is focusable by default. A clickable div would not automatically provide those functions.

03Read CSS rules

A selector such as main chooses affected elements. Declarations inside curly braces set properties. max-width limits text width. margin: auto centres the content. Check the page with the Tab key and in a narrow browser window.

Expected result

A heading, a labelled input and a keyboard-accessible button. The button does not save anything yet.

Your exercise

Add a paragraph beneath the heading and a visible focus rule for the button.

Show the solution and explanation

Use a p element for the paragraph. button:focus-visible { outline: 3px solid orange } makes keyboard focus visible. Do not remove default focus without an equally visible replacement.

Project context and sources

The example is simplified for learning. The linked source version shows its use in the project and the checks applied there.

Hausakte