path: root/files/pt-br/mdn/guidelines/writing_style_guide/index.html

---
title: Guia de estilo de escrita
slug: MDN/Guidelines/Writing_style_guide
translation_of: MDN/Guidelines/Writing_style_guide
original_slug: MDN/Guidelines/Style_guide
---
<div>{{MDNSidebar}}</div>

<p><span class="seoSummary">Em um esforço para apresentar a documentação de maneira organizada, padronizada e fácil de ler a guia de estilo MDN Web Docs descreve como o texto deve ser organizado, escrito, formatado, e assim por diante.</span> Estas sao orientações mais do que regras estritas. Nos estamos mais interessados em conteúdo do que em formatação, então não se sinta obrigado a aprender a guia de estilo antes de contribuir. Não fique chateado/a ou surpreso/a caso algum/a voluntário/a trabalhador/a edite o seu trabalho de acordo com esta guia.</p>

<p>Se você esta procurando por coisas específicas sobre como determinado tipo de página deve ser estruturado, veja a <a href="/en-US/docs/MDN/Contribute/Content/Layout">página sobre guia de layout MDN</a>.</p>

<p>Os aspetos relacionado a linguagem desta guia aplicam-se principalmente a documentação em Inglês. Outras idiomas devem ter (e são bem-vindos a criar) seu próprio guia de estilo. Estes devem ser publicados como sub-páginas da página do time de localização.</p>

<p>Para os estilos padrão que se aplicam ao conteúdo escrito por outros sites que não sejam a MDN, referir-se a <a href="http://www.mozilla.org/en-US/styleguide/">guia de estilo Única Mozilla</a>.</p>

<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Básico</h2>

<p>O melhor lugar para começar em qualquer publicação extensa sobre guia de estilo é com padrões de texto muito simples para ajudar a manter a consistência da documentação. As seguintes seções esboçam alguns destes padrões básicos para ajudar você.</p>

<h3 id="Título_das_Páginas">Título das Páginas</h3>

<p>Títulos de páginas são usados em resultados de pesquisa e também usados para estruturar a hierarquia da página na lista de breadcrumb(literalmente migalhas de pão) na parte superior da página. O título da página (que é exibido na parte superior da página e nos resultados de pesquisa) pode ser diferente da página "slug", que é a parte do URL da página que segue <em>"&lt;local&gt;/docs/".</em></p>

<h4 id="Maisuculização_de_títulos_e_cabeçalhos">Maisuculização de títulos e cabeçalhos</h4>

<p>Títulos de páginas e seções de cabeçalho devem usar letras maiúsculas no estilo da frase (Maiúsculas so na primeira palavra e nomes próprios) em vez de letras maiúsculas no estilo de título:</p>

<ul>
 <li><span class="correct"><strong>Correto</strong></span>: "Um novo método para criar sobreposições Javascript"</li>
 <li><span class="incorrect"><strong>Incorreto</strong></span>: "Um Novo Método para Criar Sobreposições Javascript"</li>
</ul>

<p>Nós temos muitas páginas antigas que foram escritas antes que essa regra de estilo fosse estabelecida. Sinta-se livre para atualizá-las se achar necessário. Estamos atualizando-as gradualmente.</p>

<h4 id="Escolhendo_títulos_e_slugs">Escolhendo títulos e slugs</h4>

<p>Slugs de página devem ser mantidas curtas; quando criar um novo nível de hierarquia, o componente do novo nível no slug, geralmente, deve ser só uma ou duas palavras.</p>

<p>Títulos de páginas, por outro lado, podem ser grandes o quanto quiser, sendo razoável, e devem ser descritivos.</p>

<h4 id="Criando_novas_subárvores">Criando novas subárvores</h4>

<p>Quando você precisar adicionar vários artigos sobre um tópico ou um assunto do tópico, você normalmente fará isso criando uma página de destino e adicionando subpáginas para cada um dos artigos individuais. A página de destino deve abrir com um ou dois parágrafos descrevendo o tópico ou a técnologia e, em seguida, fornecer uma lista de subpáginas com descrições de cada página. Você pode automatizar a inserção de páginas na lista usando algumas macros que criamos.</p>

<p>Por exemplo, considere a guia <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, que é estruturada da seguinte forma:</p>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Página principal do sumário.</li>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li>
 <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li>
 <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li>
</ul>

<p>Tente evitar colocar seu artigo no topo da hierarquia, o que torna lento o site e menos eficiente a pesquisa e a navegação.</p>

<h3 id="Orientações_gerais_do_conteúdo_do_artigo">Orientações gerais do conteúdo do artigo</h3>

<p>Quando estiver escrevendo qualquer documento é importante conhecer o quanto falar. Se ficar divagando muito o artigo fica tedioso de ler e ninguém ira usa-lo. Escolher a quantidade certa a falar sobre o assunto é muito importante por diversas razões. Entre essas razões: assegurar que o leitor encontre a informação que eles precisam, prover suficiente material de qualidade para os engines de pesquisa poderem analizar e classificar o artigo de maneira adequada. Iremos discutir ao respeito disso aqui. Para aprender um pouco mais sobre como fazer as páginas são classificadas pelos engines de pesquisa, vejam o artigo <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_for_SEO">Como escrever SEO para MDN</a>.</p>

<div class="hidden">
<pre class="notranslate">Daqui para baixo.</pre>
</div>

<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Seções, parágrafos e novas linhas</h3>

<p>Use os níveis de cabeçalho em ordem decrescente na hierarquia: {{HTMLElement("h2")}} depois {{HTMLElement("h3")}} depois {{HTMLElement("h4")}}, sem pular níveis. {{HTMLElement("h2")}} é o maior nível permitido, pois {{HTMLElement("h1")}} está reservado para o título da página. Se perceber que precisará de mais de 3 ou 4 níveis de cabeçalho, considere fragmentar seu artigo em artigos menores, ou colocando uma landing page, linkando estes com o {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, e {{TemplateLink("PreviousNext")}} macros.</p>

<p>O Enter (ou Return) do seu teclado inicia um novo parágrafo. Para inserir uma nova linha sem espaço, faça Shift + Enter.</p>

<h4 id="Algumas_regras">Algumas regras</h4>

<ul>
 <li>Não crie listas com apenas um item. Não divida um tópico em um. No mínimo dois, ou nenhum.</li>
 <li>Não crie cabeçalhos em sequência. É visualmente feio, e é importante para os leitores apresentar algum texto antes de iniciar outras seções.</li>
 <li>Evite usar macros de cabeçalhos, com exceção de algumas macros específicas para tal.</li>
 <li>Não use estilos e classes nos cabeçalhos; especificamente falando do elemento &lt;code&gt;. Portanto, não faça um cabeçalho "Usando a interface <code>SuperAmazingThing</code>". Em vez disso, escreva "Usando a interface SuperAmazingThing".</li>
</ul>

<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3>

<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p>

<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div>

<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div>

<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">Matrix</a> and ask for help.</p>

<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3>

<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4>

<p>Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p>

<pre class="brush: js notranslate">if (condition) {
  /* handle the condition */
} else {
  /* handle the "else" case */
}
</pre>

<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p>

<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
       || class.YET_ANOTHER_CONDITION ) {
  /* something */
}

var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
                           .createInstance(Components.interfaces.nsIToolkitProfileService);
</pre>

<h4 id="Inline_code_formatting">Inline code formatting</h4>

<p>Use the "Code" button (labeled with two angle brackets "&lt;&gt;") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p>

<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p>

<h4 id="Syntax_highlighting">Syntax highlighting</h4>

<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:</p>

<div class="line number2 index1 alt1">
<pre class="brush: js notranslate">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre>
</div>

<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p>

<pre class="notranslate">x = 42;</pre>

<h4 id="Styling_HTML_element_references">Styling HTML element references</h4>

<p>There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.</p>

<dl>
 <dt>Element names</dt>
 <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code>&lt;title&gt;</code>).</dd>
 <dt>Attribute names</dt>
 <dd>Use <strong>bold face</strong>.</dd>
 <dt>Attribute definitions</dt>
 <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd>
 <dt>Attribute values</dt>
 <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the <strong>type</strong> attribute of an <code>&lt;input&gt;</code> element is set to <code>email</code> or <code>tel</code> ...</dd>
 <dt>Labeling attributes</dt>
 <dd>Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.</dd>
</dl>

<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3>

<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4>

<ul>
 <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations.
  <ul>
   <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li>
   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li>
   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li>
   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li>
  </ul>
 </li>
</ul>

<h4 id="In_running_text" name="In_running_text">In running text</h4>

<ul>
 <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation.
  <ul>
   <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li>
   <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li>
   <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li>
   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li>
  </ul>
 </li>
</ul>

<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Abbrev</th>
   <th>Latin</th>
   <th>English</th>
  </tr>
  <tr>
   <td>cf.</td>
   <td><em>confer</em></td>
   <td>compare</td>
  </tr>
  <tr>
   <td>e.g.</td>
   <td><em>exempli gratia</em></td>
   <td>for example</td>
  </tr>
  <tr>
   <td>et al.</td>
   <td><em>et alii</em></td>
   <td>and others</td>
  </tr>
  <tr>
   <td>etc.</td>
   <td><em>et cetera</em></td>
   <td>and so forth, and so on</td>
  </tr>
  <tr>
   <td>i.e.</td>
   <td><em>id est</em></td>
   <td>that is, in other words</td>
  </tr>
  <tr>
   <td>N.B.</td>
   <td><em>nota bene</em></td>
   <td>note well</td>
  </tr>
  <tr>
   <td>P.S.</td>
   <td><em>post scriptum</em></td>
   <td>postscript</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note:</strong> Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p>
</div>

<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3>

<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4>

<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: XUL</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li>
</ul>

<h4 id="Expansion" name="Expansion">Expansion</h4>

<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li>
</ul>

<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4>

<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li>
</ul>

<h3 id="Contractions" name="Contractions">Capitalization</h3>

<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p>

<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."</p>

<h3 id="Contractions" name="Contractions">Contractions</h3>

<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p>

<h3 id="Pluralization" name="Pluralization">Pluralization</h3>

<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li>
</ul>

<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3>

<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p>

<ul>
 <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li>
 <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li>
</ul>

<h3 id="Gender-neutral_language">Gender-neutral language</h3>

<p>It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.<br>
 <br>
 Let's take the following example:</p>

<blockquote>
<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p>
</blockquote>

<blockquote>
<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p>
</blockquote>

<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p>

<blockquote>
<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p>
</blockquote>

<div class="note">
<p><strong>Note:</strong> MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p>
</div>

<p>You can use both genders:</p>

<blockquote>
<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p>
</blockquote>

<p>making the users plural:</p>

<blockquote>
<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p>
</blockquote>

<p>The best solution, of course, is to rewrite and eliminate the pronouns completely:</p>

<blockquote>
<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p>
</blockquote>

<blockquote>
<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p>
</blockquote>

<p>The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.</p>

<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3>

<h4 id="Dates">Dates</h4>

<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li>
</ul>

<p>Alternately, you can use the YYYY/MM/DD format.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li>
</ul>

<h4 id="Decades" name="Decades">Decades</h4>

<p>For decades, use the format "1990s". Don't use an apostrophe.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: 1990s</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li>
</ul>

<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4>

<p>For plurals of numerals add "s". Don't use an apostrophe.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: 486s</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li>
</ul>

<h4 id="Commas" name="Commas">Commas</h4>

<p>In running text, use commas only in five-digit and larger numbers.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li>
</ul>

<h3 id="Punctuation" name="Punctuation">Punctuation</h3>

<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4>

<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li>
</ul>

<div class="note">
<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p>
</div>

<h3 id="Spelling" name="Spelling">Spelling</h3>

<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li>
</ul>

<h3 id="Terminology">Terminology</h3>

<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4>

<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p>

<dl>
 <dt>Obsolete:</dt>
 <dd>On MDN, the term <strong>obsolete</strong> marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.</dd>
 <dt>Deprecated:</dt>
 <dd>On MDN, the term <strong>deprecated</strong> marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become <em>obsolete</em> and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.</dd>
</dl>

<h4 id="HTML_elements">HTML elements</h4>

<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "&lt;&gt;", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li>
</ul>

<h4 id="User_interface_actions">User interface actions</h4>

<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p>

<ul>
 <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li>
 <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li>
</ul>

<h3 id="Voice">Voice</h3>

<p>While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p>

<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2>

<h3 id="External_links">External links</h3>

<p>To automatically create a link to a Bugzilla bug, use this template:</p>

<pre class="notranslate">\{{Bug(322603)}}
</pre>

<p>This results in:</p>

<p>{{Bug(322603)}}</p>

<p>For WebKit bugs, you can use this template:</p>

<pre class="notranslate">\{{Webkitbug("322603")}}
</pre>

<p>This results in:</p>

<p>{{Webkitbug("322603")}}</p>

<h3 id="Page_tags">Page tags</h3>

<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p>

<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p>

<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p>

<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p>

<p>To remove a tag, simply click the little "X" icon in the tag.</p>

<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4>

<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p>

<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4>

<p>Use the following tags for pages that are not current:</p>

<ul>
 <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li>
 <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li>
 <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li>
</ul>

<h3 id="SEO_summary">SEO summary</h3>

<p>The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p>

<p>By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p>

<h3 id="Landing_pages">Landing pages</h3>

<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p>

<ol>
 <li>A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.</li>
 <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li>
 <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li>
</ol>

<h4 id="Creating_a_page_link_list">Creating a page link list</h4>

<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p>

<pre class="brush: html notranslate">&lt;div class="row topicpage-table"&gt;
  &lt;div class="section"&gt;
    ... left column contents ...
  &lt;/div&gt;
  &lt;div class="section"&gt;
    ... right column contents ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

<p>The left column should be a list of articles, with an <code>&lt;h2&gt;</code> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code>&lt;dl&gt;</code> list of articles with each article's link in a <code>&lt;dt&gt;</code> block and a brief one-or-two sentence summary of the article in the corresponding <code>&lt;dd&gt;</code> block.</p>

<p>The right column should contain one or more of the following sections, in order:</p>

<dl>
 <dt>Getting help from the community</dt>
 <dd>This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".</dd>
 <dt>Tools</dt>
 <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd>
 <dt>Related topics</dt>
 <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd>
</dl>

<p><strong>&lt;&lt;&lt;finish this once we finalize the landing page standards&gt;&gt;&gt;</strong></p>

<h2 id="Using_inserting_images">Using, inserting images</h2>

<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p>

<ol>
 <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li>
 <li>Create an image in the WYSIWYG editor</li>
 <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li>
 <li>Press OK.</li>
</ol>

<h2 id="Other_References">Other References</h2>

<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3>

<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p>

<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3>

<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p>

<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p>

<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3>

<ul>
 <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li>
 <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li>
</ul>

<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3>

<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p>

<ul>
 <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li>
 <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li>
 <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li>
 <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li>
 <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li>
 <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li>
 <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li>
</ul>