As part of our ongoing work to update MDN for our new design, and to get our content better organized, we need to do a lot of tagging work. This document provides specific details above and beyond the general guidelines provided in our tagging standards.
Note: These are not all-inclusive lists; if, for example, a page in the HTML developer guide also serves as a good example of how to use CSS, you might add the "CSS" tag as well.
We are (and will be increasingly) using tags for everything from implementing search filters to implementing automatically-generated categorized landing lists and indexes. So accurate tagging of content is crucial!
CSS
The bulk of the CSS documentation lies in the CSS reference; there is other material as well.
CSS reference
The CSS reference is extensive and needs a lot of tagging done.
All pages in the CSS reference should have these tags:
- CSS
- Web
- Layout
- Reference
CSS guide
Any CSS documentation that's not specifically reference material may be considered guide content, and should be tagged accordingly:
- Web
- CSS
- Guide (for tutorial/how-to type documentation)
- Example (pages that have a substantial example; 2-3 liners don't typically count)
Common tags for all CSS content
In addition, there are a number of tags that should be applied, depending on the type of content:
- CSS At-rule
- Add to css @-rules.
- CSS Data Type
- Add this tag for CSS data types.
- CSS Function
- Add this tag for CSS functions/expressions.
- CSS Keyword
- Add this tag for CSS keywords (<initial>, etc.)
- CSS Property
- Add this tag for CSS properties.
- CSS Pseudo-class
- Add this to CSS pseudo-classes.
- CSS Pseudo-element
- Add to pseudo-elements.
- CSS Selector
- Add this tag to CSS selectors.
- CSS Unit
- Add this tag for CSS units of measure (distance, time, frequency, etc.)
- CSS Value
- Add this tag for CSS values (<inherit>, <none>, etc.)
There are also a number of tags that should be applied depending on the nature of the content (in addition to content type):
- CSS Animations
-
Add this tag for
animationrelated content. - CSS Background
- Add this tag for CSS related to background images.
- CSS Borders
- Add this tag for CSS related to borders.
- CSS Flexible Boxes
- Add this tag for CSS related to flexible boxes.
- CSS Fonts
- Add this tag for CSS related to fonts.
- Graphics
- Add this tag for CSS that's used for drawing or presenting images or drawings.
- CSS Image
- Add this tag for CSS related to gradient image creation.
- CSS Multi-Columns
- Add this tag for CSS related to multi-column layouts.
- CSS Outline
- Add this tag for CSS related to outlines.
- CSS Padding
- Add this tag for CSS related to padding.
- CSS Tables
- Add this tag for CSS related to tables.
- CSS Transforms
- Add this tag for CSS related to transforms.
- CSS Transitions
- Add this tag for CSS related to transitions.
Odds are you'll need to come up with new tags for specific topic areas; be sure to ask in #devmo if you have questions.
HTML
The primary HTML documentation consists of the HTML reference and the HTML developer's guide.
HTML reference
The HTML reference is composed of two parts, each of which has specific tagging needs:
Element reference
Pages in the HTML element reference should all have these additional tags:
- HTML
- Web
- Reference
- Element
Attribute reference
Pages in the HTML attribute reference need these additional tags:
- HTML
- Web
- Reference
- Attribute
HTML developer guide
The HTML developer guide is an assortment of articles providing additional how-to style information about HTML.
Each page in the developer guide should be tagged with:
- HTML
- Web
- Guide
- Example (if the page provides one or more significant examples; one-or-two line snippets don't count)
- Beginner / Intermediate / Advanced -- You should feel free to add one of these to indicate the skill level needed to understand and make use of the article.
Topic tags
Many elements have specific types of usage that should be represented in tags. The list below is not exhaustive, but should give you some idea what to do:
- Forms
- Pages providing information about forms, form elements, form-related attributes, etc.
- Graphics
- Pages providing information about graphics -- canvas and related content, WebGL, and so forth.
- Layout
-
Pages that provide layout-related information; for instance,
<div>and other block elements may be commonly used in tandem with CSS to do layout. - Overview
- Pages that provide general information about a topic should have this tag. They typically don't dive deeply into anything, but are useful introductions or the like.
Quick links tags
- Tag: "HTML root element"
- <html>
- Tag: "HTML document metadata"
- <head>, <title>, <base>, <link>, <meta>, <style>
- Tag: "HTML sections"
- <body>, <article>, <section>, <nav>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <header>, <footer>, <address>
- Tag: "HTML grouping content"
- <p>, <hr>, <pre>, <blockquote>, <ol>, <ul>, <li>, <dl>, <dt>, <dd>, <figure>, <figcaption>, <main>, <div>
- Tag: "HTML text-level semantics"
- <a>, <em>, <strong>, <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <data>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <bdo>, <span>, <br>, <wbr>
- Tag: "HTML edits"
- <ins>, <del>
- Tag: "HTML embedded content"
- <img>, <iframe>, <embed>, <object>, <param>, <video>, <audio>, <source>, <track>, <map>, <area>
- Tag: "HTML tabular data"
- <table>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td>, <th>
- Tag: "HTML forms"
- <form>, <label>, <input>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <keygen>, <output>, <progress>, <meter>, <fieldset>, <legend>
- Tag: "HTML interactive elements"
- <details>, <summary>, <menu>, <menuitem>, <dialog>
- Tag: "HTML scripting"
- <script>, <noscript>, <template>, <canvas>
If you have ideas for more tags that we might want to use for categorization of HTML, please bring them up in #devmo!
Metadata tags
Also, you should feel free to add any of the metadata tags listed in "Document metadata" in MDN tagging standards that could help people find pages that need more work, and should use the "Skill level" in MDN tagging standards tags as well, on tutorials and how-to pages.