HTML and semantic tagging
Stay organized with collections
Save and categorize content based on your preferences.
Use HTML elements for the purposes that they were designed for. For example, when
you give the title of a standalone work (such as a book or a movie), mark it
with a cite
element. For more information about semantic tagging, see Semantics in HTML
on the MDN web documents site.
In situations where there are no semantically relevant HTML elements, use CSS
or the few HTML elements that convey visual style without semantics.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-10-15 UTC.
[null,null,["Last updated 2024-10-15 UTC."],[[["\u003cp\u003eUtilize HTML elements for their intended semantic purposes, such as using the \u003ccode\u003ecite\u003c/code\u003e element for titles of standalone works and referring to MDN's Semantics in HTML for further guidance.\u003c/p\u003e\n"],["\u003cp\u003eWhen specific visual effects are desired and no semantically appropriate HTML elements exist, leverage CSS or HTML elements with inherent visual styling but without semantic implications.\u003c/p\u003e\n"],["\u003cp\u003eStructure content with CSS for layout purposes, employ heading elements (like \u003ccode\u003eh1\u003c/code\u003e, \u003ccode\u003eh2\u003c/code\u003e) exclusively for hierarchical headings and use CSS for visual styling, and utilize semantic elements like \u003ccode\u003eem\u003c/code\u003e, \u003ccode\u003estrong\u003c/code\u003e, \u003ccode\u003ei\u003c/code\u003e, \u003ccode\u003eb\u003c/code\u003e, and \u003ccode\u003ebr\u003c/code\u003e according to their intended meanings, using CSS for spacing adjustments.\u003c/p\u003e\n"]]],["HTML elements should be used for their intended semantic purposes. Use the `cite` element for titles of works. For styling, avoid using elements like `h1` for visual formatting. Instead, rely on CSS. Use `em` for emphasis, and `i` for italics. Employ `strong` for importance, and `b` for bolding. The `br` element is solely for content-based line breaks. Avoid using frames or tables for layout and rely on CSS instead.\n"],null,["# HTML and semantic tagging\n\nUse HTML elements for the purposes that they were designed for. For example, when\nyou give the title of a standalone work (such as a book or a movie), mark it\nwith a [`cite`\nelement](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-cite-element). For more information about semantic tagging, see [Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)\non the MDN web documents site.\n\nIn situations where there are no semantically relevant HTML elements, use CSS\nor the few HTML elements that convey visual style without semantics.\n\nVisual formatting\n-----------------\n\nIf you want to achieve specific visual results, don't use HTML elements that\nconvey different semantics.\n\nIn particular, follow these guidelines:\n\n- Don't use frames or tables for layout; instead, use your site's CSS to lay out the page.\n- Don't use the heading elements (such as `h1` and `h2`) to visually style text; instead, use those elements only for hierarchically structured headings, and use CSS for visual style.\n- The [`em`\n element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element) indicates emphasis, not italics as such. Don't use it to italicize\n something that isn't meant to be emphasized; instead, use the [`i`\n element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element) for non-emphasis italics.\n\n\n- The [`strong`\n element](https://html.spec.whatwg.org/multipage/semantics.html#the-strong-element) indicates strong importance, not bold as such. To bold a word that doesn't merit strong importance, use the [`b`\n element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element).\n- The [`br`\n element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element) is intended \"only for line breaks that are actually part of the content, as in poems or addresses.\" Don't use it to adjust the spacing between lines. Instead, use elements like `p` to semantically mark the text, and use CSS to adjust line spacing."]]
