Free Computer Courses

HTML Skeleton

Updated September 2026 · Project part 1 of 4

View saved

Goal for this step

Your only job in Part 1 is to build a valid HTML page that looks like a calculator on paper. You need a place that shows the current number, and buttons for digits, operators, clear, backspace, a decimal point, and equals.

Do not worry about colors, spacing, or click behavior yet. Skipping style and scripts on purpose keeps the markup easy to read. Later parts layer CSS and JavaScript onto this same structure.

When you finish, opening the page in a browser should show plain, unstyled buttons and a display that starts at zero. That boring look is a success for this step.

What you should already know

You should be comfortable creating an HTML file with <!doctype html>, an html element with a language, a head, and a body. You should also know how to open a local file or serve a folder with a simple static server.

If button tags and attributes are new, that is fine. We will introduce them carefully. You do not need CSS or JavaScript for Part 1.

Concepts in plain language

A calculator on a web page is just HTML describing regions and controls. The display is where the current number appears. Each key is a button the user can activate with a mouse or keyboard later.

We use data-action and data-value attributes as tiny labels for JavaScript. For example, a digit seven button can say its action is digit and its value is 7. Script code can read those labels without caring what text the user sees on the button face.

Choosing type="button" matters. Inside forms, a bare button can submit the form by default. Our calculator is not a form submit flow, so we spell out the type so browsers never surprise us.

Walk through the document shell

Start with a normal HTML5 document. Put the calculator inside main so the page has a clear primary region. An output element is a good semantic choice for the live display value because it represents a result, not just decorative text.

Give the calculator wrapper and the display stable id values. Later JavaScript will find those nodes by id. Starting the display text at 0 matches what people expect when they first open a calculator.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MiniCalc — HTML Skeleton</title>
  </head>
  <body>
    <main>
      <h1>MiniCalc</h1>
      <div class="calculator" id="calculator">
        <output class="display" id="display">0</output>
        <!-- keys go here -->
      </div>
    </main>
  </body>
</html>

Describe each button with data attributes

Group the keys in a container such as div.keys. For every interactive control, use a real button element—not a clickable div. Buttons are keyboard-friendly by default and tell assistive technology that the control is actionable.

Put the action type on data-action and numeric or operator values on data-value. Digits use digit, operators use operator, and special keys use actions like clear, backspace, decimal, and equals.

You need buttons for digits 0–9, operators +, -, *, and /, plus clear, backspace, decimal, and equals. The visible label can use familiar symbols such as ÷ even when data-value stores a slash for the math code.

<div class="keys" id="keys">
  <button type="button" data-action="digit" data-value="7">7</button>
  <button type="button" data-action="operator" data-value="+">+</button>
  <button type="button" data-action="clear">C</button>
  <button type="button" data-action="equals">=</button>
</div>

Run the snapshot and verify

Clone the repository, change into the Part 1 folder, and start a simple static server. Then open http://localhost:8000 in your browser.

You should see the MiniCalc heading, a display showing 0, and a full set of unstyled buttons. Clicking does nothing yet. That is expected. Confirm every key is present and that the page source validates as ordinary HTML.

git clone https://github.com/michaeldunga1/fcc-js-calculator.git
cd fcc-js-calculator/01-HTML-Skeleton
python3 -m http.server 8000
# Then visit http://localhost:8000

Common mistakes

Using div elements with click handlers later is harder for keyboard and screen-reader users. Prefer real buttons from the start.

Forgetting type="button" is harmless on a bare page today, but it becomes a bug if the markup ever sits inside a form. Set the type now.

Leaving out data-action or misspelling it means Part 3 will have nothing useful to read. Double-check attribute names before you move on.

Putting JavaScript or CSS in this snapshot muddies the lesson. Keep Part 1 about structure only.

  • Every interactive control is a button type="button"
  • Digits, operators, clear, backspace, decimal, and equals are present
  • The display starts at 0
  • Open the snapshot folder and confirm the unstyled page loads
  • Data attributes are consistent and ready for scripting

Next: Styles

Related tutorials

Comments

One comment per signed-in account. Comments are saved with this page’s URL.