DI-322 Web Technologies Lecture 04: SGML context, semantic HTML and responsive CSS
DI-322 Web Technologies
0% Completed

Lecture 04: SGML context, semantic HTML and responsive CSS

Outcomes and readiness

You can explain SGML’s historical role, build a semantic HTML document, and apply the cascade and responsive layout. Readiness: what is the difference between data structure and visual presentation?

Motivation

A course card built from nested generic containers may look correct but give poor structure to keyboard users, screen readers, search systems, and future maintainers. HTML communicates meaning; CSS controls presentation.

From SGML to today’s HTML

SGML is a metalanguage for defining markup languages and provides historical context for earlier HTML. Modern HTML is defined by the WHATWG Living Standard and has its own parsing rules; it is not useful to treat a browser as a strict generic SGML parser. “HTML5” commonly means the modern HTML platform. CSS after Level 2 is modular, so “CSS3” is a convenient course label rather than one single current specification.

<article class="course-card">
  <h2>Web Technologies</h2>
  <p>Build and explain web applications.</p>
  <a href="/courses/di-322">Open course</a>
</article>
.course-card { max-width: 34rem; padding: 1rem; border: 1px solid #64748b; }
.course-card a { display: inline-block; min-height: 44px; padding: .75rem 1rem; }
@media (min-width: 48rem) { .course-card { padding: 1.5rem; } }

Worked cascade

If p { color: navy; }, .warning { color: darkred; }, and <p class="warning">, the class selector wins because it has greater specificity, assuming equal origin/importance and later cascade layers do not change the result. Inheritance alone is not the reason.

Faded example

Replace <div onclick="openCourse()">Open</div> with semantic, keyboard-ready markup. Hint: navigation already has a native element. Solution: <a href="/courses/di-322">Open course</a>; style the anchor rather than recreating link behavior.

Common mistakes

  • Heading level is document structure, not a font-size control.
  • alt text describes the image’s purpose in context; decorative images can use empty alt.
  • Fixed-width layouts are not “desktop first and mobile later”; design for narrow content from the start.

Practical – DI322-LAB04

Build a one-page course overview with header, nav, main, article, and footer. Add a skip link, visible focus, a 44px minimum action target, and a layout that works at 320px without page-wide horizontal scrolling. Validate markup and test keyboard order.

Independent check

  • Q1: What did SGML provide historically? Answer: a way to define markup languages.
  • Q2: Best element for primary page navigation? Answer: nav containing real links.
  • Q3: Why can a class rule override an element rule? Answer: greater specificity within the cascade conditions.

Homework – DI322-A04-H1

Repair a deliberately non-semantic page: choose meaningful elements, write a mobile CSS rule set, and explain five changes. Rubric: semantics 3, responsive behavior 2, accessibility 2, cascade explanation 2, validation evidence 1.

Revision

HTML describes; CSS presents; JavaScript behaves. Semantic defaults usually produce less code and better interoperability.

PreviousNext