new repository

1 files changed, 113 insertions, 0 deletions

diff --git a/devdocs/html/element%2Fbr.html b/devdocs/html/element%2Fbr.html
new file mode 100644
index 00000000..c18df512
--- /dev/null
+++ b/devdocs/html/element%2Fbr.html
@@ -0,0 +1,113 @@
+<header><h1>&lt;br&gt;: The Line Break element</h1></header><div class="section-content"><p>The <code>&lt;br&gt;</code> <a href="../index">HTML</a> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.</p></div>
+<h2 id="try_it">Try it</h2>
+<div class="section-content">
+<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/br.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>As you can see from the above example, a <code>&lt;br&gt;</code> element is included at each point where we want the text to break. The text after the <code>&lt;br&gt;</code> begins again at the start of the next line of the text block.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Do not use <code>&lt;br&gt;</code> to create margins between paragraphs; wrap them in <a href="p"><code>&lt;p&gt;</code></a> elements and use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property to control their size.</p> </div>
+</div>
+<h2 id="attributes">Attributes</h2>
+<div class="section-content"><p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p></div>
+<h3 id="deprecated_attributes">Deprecated attributes</h3>
+<div class="section-content"><dl> <dt id="clear">
+<a href="#clear"><code>clear</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>
+</dt> <dd> <p>Indicates where to begin the next line after the break.</p> </dd> </dl></div>
+<h2 id="styling_with_css">Styling with CSS</h2>
+<div class="section-content">
+<p>The <code>&lt;br&gt;</code> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.</p> <p>You can set a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> on <code>&lt;br&gt;</code> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> property that was designed for that purpose.</p>
+</div>
+<h2 id="examples">Examples</h2>
+
+<h3 id="simple_br">Simple br</h3>
+<div class="section-content">
+<p>In the following example we use <code>&lt;br&gt;</code> elements to create line breaks between the different lines of a postal address:</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="1OurpK+QdBD1DLJH1DTGuzsqsxsxAaITfhCr2n3azkA=" data-language="html">Mozilla<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
+331 E. Evelyn Avenue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
+Mountain View, CA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
+94041<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
+USA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
+</pre>
+</div> <h4 id="result">Result</h4>
+<div class="code-example" id="sect2">
+
+<iframe class="sample-code-frame" title="Simple br sample" id="frame_simple_br" width="640" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/br/runner.html?id=simple_br" loading="lazy"></iframe>
+</div>
+</div>
+<h2 id="accessibility_concerns">Accessibility concerns</h2>
+<div class="section-content">
+<p>Creating separate paragraphs of text using <code>&lt;br&gt;</code> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within <code>&lt;br&gt;</code>s. This can be a confusing and frustrating experience for the person using the screen reader.</p> <p>Use <code>&lt;p&gt;</code> elements, and use CSS properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> to control their spacing.</p>
+</div>
+<h2 id="technical_summary">Technical summary</h2>
+<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> Must have a start tag, and must not have an end tag. In XHTML documents, write this element as <code>&lt;br /&gt;</code>. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>
+<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>
+</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></td> </tr> </tbody> </table></div></figure></div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element">HTML Standard <br><small># the-br-element</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<th><code>br</code></th>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">15</td>
+<td class="bc-supports-yes">≤4</td>
+<td class="bc-supports-yes">4.4</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">4</td>
+<td class="bc-supports-yes">14</td>
+<td class="bc-supports-yes">≤3.2</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>clear</code></th>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">15</td>
+<td class="bc-supports-yes">≤4</td>
+<td class="bc-supports-yes">4.4</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">4</td>
+<td class="bc-supports-yes">14</td>
+<td class="bc-supports-yes">≤3.2</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+</tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>
+<a href="address"><code>&lt;address&gt;</code></a> element</li> <li>
+<a href="p"><code>&lt;p&gt;</code></a> element</li> <li>
+<a href="wbr"><code>&lt;wbr&gt;</code></a> element</li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br</a>
+  </p>
+</div>