NSWSoftware EngineeringSyllabus dot point

Inquiry Question 2: How can data be better visualised using a web browser?

Construct front-end pages using HTML for structure and CSS for presentation, including semantic markup and responsive design

A focused answer to the HSC Software Engineering Module 2 dot point on HTML and CSS. Semantic markup, the box model, responsive design with media queries, the worked example, and the traps markers look for.

Generated by Claude OpusReviewed by Better Tuition Academy5 min answerUpdated 2026-05-20

Have a quick question? Jump to the Q&A page

What this dot point is asking

NESA wants you to construct a basic front-end with HTML for structure and CSS for presentation. Use semantic elements, the box model, and at least one media query for responsive design.

The answer

HTML: structure

HTML marks up content with elements. Semantic elements describe what the content is, not what it looks like:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HSC study portal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/subjects">Subjects</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>How to study Physics</h1>
      <p>Start with the syllabus dot points...</p>
    </article>
    <aside>
      <h2>Related</h2>
      <ul>
        <li><a href="/chemistry">Chemistry guide</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>(c) 2026 ExamExplained</p>
  </footer>
</body>
</html>

Key semantic elements: <header>, <nav>, <main>, <article>, <aside>, <section>, <footer>, <figure>, <figcaption>. Use these instead of generic <div> whenever the meaning is clear. Screen readers, search engines and reader-mode browsers use the semantic tree.

CSS: presentation

CSS targets HTML elements with selectors and applies declarations:

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: #1f2937;
  background: #f9fafb;
  margin: 0;
}

header {
  background: #1e3a8a;
  color: white;
  padding: 1rem 2rem;
}

header nav a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

main {
  max-width: 70ch;
  margin: 2rem auto;
  padding: 0 1rem;
}

article h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

The box model

Every element is a rectangular box made of content, padding, border and margin. Setting box-sizing: border-box makes width and height include padding and border, which is almost always what you want:

*, *::before, *::after {
  box-sizing: border-box;
}

Responsive design

Phones, tablets and desktops have very different viewports. Three tools:

The viewport meta tag (in HTML head) tells mobile browsers to use device width:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Relative units (rem, em, %, vw, vh) scale with the viewport and user preferences. Avoid hard-coded px for layout dimensions.

Media queries apply rules conditionally:

@media (max-width: 600px) {
  main { padding: 0 0.5rem; }
  h1 { font-size: 1.5rem; }
  nav { display: flex; flex-direction: column; }
}

Modern layout

Flexbox for one-dimensional layout (rows or columns):

header nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Grid for two-dimensional layout:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Accessibility

Semantic markup is the first step. Also:

Use alt text on every image.
Pair every form input with a <label>.
Ensure colour contrast meets WCAG AA (4.5:1 for body text).
Make focus styles visible.

Worked example

Convert the following non-semantic markup to semantic HTML and explain why each change helps.

<div class="top">
  <div class="logo">ExamExplained</div>
</div>
<div class="content">
  <div class="post">
    <div class="title">How to study Physics</div>
    <div class="body">Start with the syllabus...</div>
  </div>
</div>
<div class="bottom">(c) 2026</div>

Semantic version:

<header>
  <h1>ExamExplained</h1>
</header>
<main>
  <article>
    <h2>How to study Physics</h2>
    <p>Start with the syllabus...</p>
  </article>
</main>
<footer>(c) 2026</footer>

Each change is meaningful: <header> and <footer> create landmark regions for screen readers, <main> lets users skip to the main content, <article> indicates a self-contained piece, and the headings produce an outline.

Past exam questions, worked

Real questions from past NESA papers on this dot point, with our answer explainer.

2024 HSC5 marksWrite HTML and CSS for a simple article page with a header, main article body and footer. Apply at least one media query so the layout adapts to a phone-sized viewport.

Show worked answer →

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>School newsletter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Year 12 newsletter</h1>
  </header>
  <main>
    <article>
      <h2>Term 2 highlights</h2>
      <p>Software Engineering students built a study portal.</p>
    </article>
  </main>
  <footer><p>(c) 2026 the school</p></footer>
</body>
</html>

body { font-family: system-ui; margin: 0; }
header, main, footer { padding: 1rem 2rem; }
main { max-width: 70ch; margin: 0 auto; }
@media (max-width: 600px) {
  header, main, footer { padding: 1rem; }
  h1 { font-size: 1.5rem; }
}

The HTML uses semantic elements (<header>, <main>, <article>, <footer>) so assistive tech and search engines understand structure. The viewport meta tag tells mobile browsers to use the device width. CSS controls colour, spacing and typography, with a media query reducing padding and shrinking the heading on narrow screens.

Markers reward a valid HTML5 skeleton, semantic elements (not just divs), the viewport meta tag, and a working media query with a sensible breakpoint.