Semantic markup
Semantic markup is the practice of using HTML elements according to the meaning and structural or interactive role of their content.
D3.js in Action, Third Edition
Semantic HTML is the practice of using HTML elements according to their intended structural or interactive meaning.
- How it is used
- Improves visualization accessibility by giving page structure, controls, lists, and graphics meanings that assistive technology can interpret.
- How deep it goes
- Demonstrates element choices and accessible visualization code, but defers broader accessibility topics such as contrast and keyboard focus.
- Examples
- Uses a cetacean scatterplot, legends, filter buttons, semantic layout, SVG descriptions, and an alternative downloadable data table.
- What you can do after
- Build accessible visualization interfaces with meaningful HTML, labeled SVG graphics, stateful buttons, and alternative tabular data.
Read how D3.js in Action, Third Edition explains semantic markup →
Web Design Playground, Second Edition
An HTML5 page layout tag is a semantic HTML element that identifies a major structural area of a web page.
- How it is used
- Organizes major web-page areas so automated readers can identify important content and visitors can scan the layout.
- How deep it goes
- Defines seven HTML5 layout tags and their roles, then applies them in complete page structures without detailing rendering internals.
- Examples
- Uses a holy-grail-style page and a portfolio page with logos, navigation links, content sections, and copyright footers.
- What you can do after
- Build it from scratch by assigning header, nav, main, section, and footer roles to a portfolio page structure.
Read how Web Design Playground, Second Edition explains semantic markup →
Design for Developers
Semantic HTML is the practice of structuring a document with HTML elements that accurately express the meaning and hierarchy of its content.
- How it is used
- Improves accessibility, code maintainability, search visibility, and baseline user experience through meaningful HTML structure.
- How deep it goes
- Explains structural and typographic choices with examples, then connects them to progressive enhancement without detailing HTML parsing internals.
- Examples
- Uses header, article, section, headings, div, b, and strong to contrast structural meaning, textual importance, and visual styling.
- What you can do after
- Apply semantic HTML by choosing meaningful elements, heading levels, and emphasis tags before layering CSS or JavaScript.
Web Design Playground
An HTML5 structural element used to organize page content into semantic sections such as header, navigation, main content, article, aside, section, and footer.
- How it is used
- Organizes page content into recognizable regions that improve interpretation by browsers, search crawlers, screen readers, and developers.
- How deep it goes
- Defines seven core HTML5 layout elements and demonstrates their nesting, while leaving detailed styling and layout strategies to CSS.
- Examples
- Uses holy-grail layouts, photo galleries, portfolio pages, navigation lists, article sections, sidebars, logos, and footers.
- What you can do after
- Apply it via HTML5 elements to build page structures that communicate the meaning and organization of their content.
Related concepts
- HTMLuses · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
- screen readeruses · A screen reader is assistive software that presents digital content and interface information through synthesized speech, refreshable braille, or other nonvisual output.
- HTML elementuses · An HTML element is a component of an HTML document, defined by markup and represented in the document structure, with permitted attributes, content, and semantics.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.