For AI agents: the complete documentation index is available at https://nhanbe.id.vn/llms.txt, the full documentation bundle is available at https://nhanbe.id.vn/llms-full.txt, and this page is available as Markdown at https://nhanbe.id.vn/building-for-the-web/web-content/overview.md.
Nhan AEM Notes

How to structure and write web content for readability, clear focus, solid UX, and accessible color and typography, with do and do-not examples in HTML, CSS, and copy.

Website Content and Presentation

This section is about what visitors see and read: wording, layout of ideas, visual emphasis, and color choices that support comprehension. It complements Content Modeling (schema and CMS structure) and Semantic HTML (meaningful markup). Strong content modeling and markup still fail if paragraphs are dense, calls to action compete with each other, or contrast is too low to read comfortably.

Throughout this section, Do blocks show patterns worth copying; Don't blocks show common failures (sometimes simplified for clarity).

Goals for web content

GoalWhat it means in practice
ScannableHeadings, lists, and short paragraphs let people orient themselves before reading in depth.
FocusedEach view has a clear primary purpose; secondary paths stay visible but subordinate.
ConsistentPatterns for titles, buttons, and terminology repeat across the site so users learn the interface once.
InclusiveColor contrast, typography, and structure work for low vision, zoom users, and keyboard navigation - not only mouse users with ideal monitors.

Chapters in this section

  1. Readability and typography - plain language, microcopy basics, line measure, body type sizing.
  2. Structure and hierarchy - headings, landmarks, lists, page hierarchy, visual focus, calls to action, whitespace.
  3. Forms and interactions - link text, navigation, form field labels and errors, mobile-first DOM order.
  4. Microcopy and error states - buttons, validation messages, empty states, loading, success, 404 pages.
  5. Color and contrast - WCAG targets, design tokens, dark mode, identifying links beyond colour.
  6. Images and media - meaningful alt text, decorative images, captions, video, audio.
  7. Information architecture - site navigation, breadcrumbs, taxonomies, search UX, URL design.

Page-level checklist

Use this before shipping or when auditing an existing page.

AreaChecks
CopyFirst sentence answers the user's question; jargon defined or linked; errors say how to fix.
StructureOne h1; heading levels do not skip; sections titled descriptively.
Measure & typeComfortable line length; body ~16px+; line-height ~1.4--1.6.
FocusOne clear primary action per major region; secondary actions visually subordinate.
ColorText and UI meet contrast targets; focus visible; dark theme re-checked.
Links & mediaLinks identifiable without colour alone; meaningful alt; captions when needed.