Created
July 26, 2022 22:56
-
-
Save briansteeleca/9c0f226df199bc0a70806f3399f1bbf0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>In HTML, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">block-level elements</a> such as headers, paragraphs, and DIVs, occupy 100% of the width of their parent element. Their height depends on how much content they have inside.</p> | |
| <h2 id="headings" tabindex="-1">Headings</h2> | |
| <p>Heading font weights have been set to <code>normal</code> (default). You can override this for all headings in the SCSS default variables, or add a bold weight yourself on a per-heading or per-word basis, for emphasis.</p> | |
| <p>Same as with paragraphs, headings have zero top margin while the bottom margin is set as equal to 3 <a href="/codebase-5/docs/1-getting-started/element-grid">element grid</a> units, or <em>one line-height of the default text size</em> (1.5rem) – thereby leaving an “empty line” gap between paragraphs and headings.</p> | |
| <p>Heading sizes, weights and line heights are set using three SCSS maps in the default variables file – you can control the rhythm of each from there.</p> | |
| <p>Below the <code>sm</code> small media query breakpoint (768px, default), all headings are size reduced to 87.5%, so that they do not look too big on small devices.</p> | |
| <p><strong>Note:</strong> The demo headings below are actually faked using <code>h1</code> to <code>h6</code> <a href="/codebase-5/docs/6-typographic-utilities/inline-text">text utility classes</a> – so that they are not included in the generated “Contents” list on this page.</p> | |
| <p class="h1"><code>h1</code> heading</p> | |
| <p class="h2"><code>h2</code> heading</p> | |
| <p class="h3"><code>h3</code> heading</p> | |
| <p class="h4"><code>h4</code> heading</p> | |
| <p class="h5"><code>h5</code> heading</p> | |
| <p class="h6"><code>h6</code> heading</p> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>h2 heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>h1 heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>h3 heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>h4 heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>h5 heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>h6 heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span></code></pre> | |
| <h2 id="paragraphs" tabindex="-1">Paragraphs</h2> | |
| <p>A simple paragraph:</p> | |
| <p>Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.</p> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> | |
| <p>Same as with headings, paragraphs have zero top margin while the bottom margin is set as equal to <em>one line-height of the default text size</em>, i.e. 1.5rem – thereby leaving an “empty line” gap between paragraphs and headings.</p> | |
| <h2 id="lists" tabindex="-1">Lists</h2> | |
| <h3 id="ordered-lists-(numbered)" tabindex="-1">Ordered lists (numbered)</h3> | |
| <ol> | |
| <li>List item</li> | |
| <li>List item | |
| <ol> | |
| <li>List item</li> | |
| <li>List item | |
| <ol> | |
| <li>List item</li> | |
| </ol> | |
| </li> | |
| </ol> | |
| </li> | |
| <li>List item</li> | |
| </ol> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre> | |
| <p>See <a href="https://www.w3schools.com/html/html_lists_ordered.asp">W3schools</a> for more on ordered lists.</p> | |
| <h3 id="unordered-lists-(bullet-pointed)" tabindex="-1">Unordered lists (bullet pointed)</h3> | |
| <ul> | |
| <li>List item</li> | |
| <li>List item | |
| <ul> | |
| <li>List item</li> | |
| <li>List item | |
| <ul> | |
| <li>List item</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li>List item</li> | |
| </ul> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> | |
| <h3 id="definition-lists" tabindex="-1">Definition lists</h3> | |
| <dl> | |
| <dt>Title 1</dt> | |
| <dd>Data 1 Lorem ipsum dolor sit amet</dd> | |
| <dt>Title 2</dt> | |
| <dd>Data 2 Lorem ipsum dolor sit amet</dd> | |
| <dt>Title 3</dt> | |
| <dd>Data 3 Lorem ipsum dolor sit amet</dd> | |
| </dl> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Title 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Data 1 Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Title 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Data 2 Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Title 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Data 3 Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span></code></pre> | |
| <h2 id="collapsible-details" tabindex="-1">Collapsible details</h2> | |
| <p>HTML5 has a simple show/hide component, with functionality provided by the browser (no JavaScript required).</p> | |
| <p>Clicking the (bold) <code><summary></code> will trigger the functionality of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">HTML details element</a>. When the main content of the <code><details></code> element is “open” (revealed), the indicator triangle (automatically supplied by the browser) is rotated to point downwards.</p> | |
| <details> | |
| <summary>Summary/title</summary> | |
| Here are the details – an extended discussion of what is summarised in the associated <code><summary></code> above. Hidden by default, this content becomes visible when the visitor clicks or taps the summary. | |
| </details> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Summary/title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span><br> Here are the details...<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span></code></pre> | |
| <p>The Codebase basic (classless) styling is only supplying an empty line space (by bottom margin) below the <code><details></code> tag, bold rendering for the <code><summary></code> tag, and <code>cursor: pointer</code> for when the visitor hovers their mouse (or other pointing device) over the summary.</p> | |
| <p>The HTML5 <code><details></code> is an interactive element, so it will recieve focus (and a focus ring) when keyboard tabbed onto, and it will open and close in response to <code>enter</code> or <code>space</code>.</p> | |
| <h3 id="starting-%E2%80%9Cdetails%E2%80%9D-in-the-open-state" tabindex="-1">Starting “details” in the open state</h3> | |
| <p>What if you want the a set of <code><details></code> to start in the “open” state? Simply add the <code>open</code> attribute to the (opening) <code><details></code> tag:</p> | |
| <details open=""> | |
| <summary>Summary/title</summary> | |
| Here are the details (starting in the open state) ... | |
| </details> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Summary/title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span><br> Here are the details (starting in the open state) ...<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span></code></pre> | |
| <h2 id="horizontal-rules" tabindex="-1">Horizontal rules</h2> | |
| <p>The horizontal rule <code><hr></code> tag is simply styled with a thin <em>top border</em>, so that it looks the same as <a href="/docs/5-decoration-utilities/borders">border utilities</a> and the <a href="/docs/7-simple-components/tables">table component</a> cell borders.</p> | |
| <p>Example:</p> | |
| <hr> | |
| <p>(That was it, above.)</p> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span></code></pre> | |
| <h2 id="block-quotes" tabindex="-1">Block quotes</h2> | |
| <p>In Codebase, blockquotes receive some padding right and left – to give the effect of indentation. This side padding is set based upon the viewport width (i.e. it is set in <code>vw</code> units in a CSS <code>clamp()</code>), so that it is narrower on narrower viewports.</p> | |
| <p>Otherwise, blockquotes have the same as paragraph styling.</p> | |
| <blockquote> | |
| <p>Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. Nullam ridens deterruisset an duo. Cum harum insolens ei, cum probo placerat praesent et.</p> | |
| </blockquote> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span><br> Lorem ipsum dolor sit amet...<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span></code></pre> | |
| <h2 id="tables" tabindex="-1">Tables</h2> | |
| <p>This is what a classless table looks like in Codebase:</p> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Table Header 1</th> | |
| <th>Table Header 2</th> | |
| <th>Table Header 3</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Table content 1.1</td> | |
| <td>Table content 2.1</td> | |
| <td>Table content 3.1</td> | |
| </tr> | |
| <tr> | |
| <td>Table content 1.2</td> | |
| <td>Table content 2.2</td> | |
| <td>Table content 3.2</td> | |
| </tr> | |
| <tr> | |
| <td>Table content 1.3</td> | |
| <td>Table content 2.3</td> | |
| <td>Table content 3.3</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table Header 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table Header 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table Header 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 1.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 2.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 3.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 1.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 2.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 3.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 1.3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 2.3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table content 3.3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre> | |
| <p>For special table styling, see the Codebase <a href="/codebase-5/docs/7-simple-components/tables/">table component</a>.</p> | |
| <h2 id="pre-formatted-text" tabindex="-1">Pre-formatted text</h2> | |
| <p>Use <code><pre></code> tags around any text that you want to remain in the same position in the webpage (as viewed in the browser) as you have put it in the source code. <code><pre></code> tags prevent browsers doing what they normally do to text – multiple spaces will not be collapsed into one, and long lines will not be wrapped.</p> | |
| <pre>Here is some preformatted text | |
| with some extra spaces | |
| and line | |
| breaks.</pre> | |
| <p>In other framewords (and in the browser default), <code><pre></code> is assigned a <em>monospace</em> typeface. Codebase, however, assigned <code><pre></code> the main text typeface (defaults to a sans-serif font stack.). This is done so that you can easily use <code><pre></code> for setting up poetry stanzas, song lyrics, etc.</p> | |
| <p>If you want a block of preformatted monospace, combine with the inline <code><code></code> tag too. Codebase willl render renders <code><code></code> as a block (with no wrapping, and x-axis overflow, same as <code><pre></code>), if it is the immediate child of a <code><pre></code> tag. Example:</p> | |
| <pre><code>10 print "Hello world"; | |
| 20 goto 10. | |
| Run</code></pre> | |
| <p>In the HTML source code, the example above above looks like this:</p> | |
| <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>10 print "Hello world";<br>20 goto 10.<br>Run<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span></code></pre> | |
| <h2 id="divs-and-other-html5-semantic-block-emements" tabindex="-1">DIVs and other HTML5 semantic block emements</h2> | |
| <p>All other block elements such as <code><div></code>,<code><section></code>, <code><article></code>, and <code><aside></code> have no style applied to them by Codebase. They are still just blocks.</p> | |
| <p>In HTML, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">inline-level elements</a> such as tags for bold text, italics, and hyperlinks, span only the width of their content, and they can wrap on to new lines.</p> | |
| <h2 id="list-of-inline-elements" tabindex="-1">List of inline elements</h2> | |
| <div class="xs:flex flex-gap flex-grow-auto mb-3"> | |
| <div> | |
| <i>italics</i><br><em>emphasis</em><br> | |
| <b>bold</b><br><strong>strong</strong><br> | |
| <u>underlined</u><br> | |
| <cite>citation</cite><br> | |
| <del>deleted text (strikethough)</del><br> | |
| <dfn title="title">definition</dfn><br> | |
| <abbr title="This stands for something">abbreviation</abbr><br> | |
| <ins>inserted text (underlined)</ins><br> | |
| <kbd>user input</kbd><br> | |
| <samp>sample output</samp><br> | |
| </div> | |
| <div> | |
| <mark>marked (highlighted) text</mark><br> | |
| <small>small</small><br> | |
| Superscript: e.g. E = mc<sup>2</sup><br> | |
| Subscript: e.g. H<sub>2</sub>O<br> | |
| <var>variable or placeholder text</var><br> | |
| ndash –<br> | |
| mdash —<br> | |
| <a href="#/">hyperlink</a><br> | |
| <address>Address</address><br> | |
| <code>inline code</code><br> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment