mirror of
https://github.com/standardebooks/web.git
synced 2025-07-21 14:55:13 -04:00
Add links to section identifiers
This commit is contained in:
Alex Cabal
parent
fe2d83461f
commit
6fa548f57f
11 changed files with 718 additions and 713 deletions
|
|
@ -7,14 +7,14 @@ require_once('Core.php');
|
|||
<section id="5"><aside class="number">5</aside>
|
||||
<h1>General XHTML Patterns</h1>
|
||||
<p>This section covers general patterns used when producing XHTML that are not specific to ebooks.</p>
|
||||
<section id="5.1"><aside class="number">5.1</aside>
|
||||
<section id="5.1"><aside class="number"><a href="#5.1">5.1</a></aside>
|
||||
<h2><code class="html"><span class="na">id</span></code> attributes</h2>
|
||||
<section id="5.1.1"><aside class="number">5.1.1</aside>
|
||||
<section id="5.1.1"><aside class="number"><a href="#5.1.1">5.1.1</a></aside>
|
||||
<h3><code class="html"><span class="na">id</span></code> attributes of <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> and <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements</h3>
|
||||
<ol type="1">
|
||||
<li id="5.1.1.1"><aside class="number">5.1.1.1</aside><p>Each <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> has an <code class="html"><span class="na">id</span></code> attribute.</p></li>
|
||||
<li id="5.1.1.2"><aside class="number">5.1.1.2</aside><p><code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements that are direct children of the <code class="html"><span class="p"><</span><span class="nt">body</span><span class="p">></span></code> element have an <code class="html"><span class="na">id</span></code> attribute identical to the filename containing that <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code>, without the trailing extension.</p></li>
|
||||
<li id="5.1.1.3"><aside class="number">5.1.1.3</aside><p>In files containing multiple <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements, each of those elements has an <code class="html"><span class="na">id</span></code> attribute identical to what the filename <em>would</em> be if the section was in an individual file, without the trailing extension.
|
||||
<li id="5.1.1.1"><aside class="number"><a href="#5.1.1.1">5.1.1.1</a></aside><p>Each <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> has an <code class="html"><span class="na">id</span></code> attribute.</p></li>
|
||||
<li id="5.1.1.2"><aside class="number"><a href="#5.1.1.2">5.1.1.2</a></aside><p><code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements that are direct children of the <code class="html"><span class="p"><</span><span class="nt">body</span><span class="p">></span></code> element have an <code class="html"><span class="na">id</span></code> attribute identical to the filename containing that <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code>, without the trailing extension.</p></li>
|
||||
<li id="5.1.1.3"><aside class="number"><a href="#5.1.1.3">5.1.1.3</a></aside><p>In files containing multiple <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements, each of those elements has an <code class="html"><span class="na">id</span></code> attribute identical to what the filename <em>would</em> be if the section was in an individual file, without the trailing extension.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">body</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"bodymatter z3998:fiction"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">article</span> <span class="na">id</span><span class="o">=</span><span class="s">"the-fox-and-the-grapes"</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"se:short-story"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title"</span><span class="p">></span>The Fox and the Grapes<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||
|
|
@ -28,12 +28,12 @@ require_once('Core.php');
|
|||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="5.1.2"><aside class="number">5.1.2</aside>
|
||||
<section id="5.1.2"><aside class="number"><a href="#5.1.2">5.1.2</a></aside>
|
||||
<h3><code class="html"><span class="na">id</span></code> attributes of other elements</h3>
|
||||
<ol type="1">
|
||||
<li id="5.1.2.1"><aside class="number">5.1.2.1</aside><p><code class="html"><span class="na">id</span></code> attributes are generally used to identify parts of the document that a reader may wish to navigate to using a hash in the URL. That generally means major structural divisions. Therefore, elements that are not <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements do not have an <code class="html"><span class="na">id</span></code> attribute, unless a part of the ebook, like an endnote, refers to a specific point in the book, and a direct link is desirable.</p></li>
|
||||
<li id="5.1.2.2"><aside class="number">5.1.2.2</aside><p><code class="html"><span class="na">id</span></code> attributes are not used as hooks for CSS styling.</p></li>
|
||||
<li id="5.1.2.3"><aside class="number">5.1.2.3</aside><p>If an element that is not a <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> requires an <code class="html"><span class="na">id</span></code> attribute, the attribute’s value is the name of the element followed by <code class="bash"><span class="s">-N</span></code>, where <code class="bash"><span class="s">N</span></code> is the sequence number of the element start at <code class="bash"><span class="s">1</span></code>.
|
||||
<li id="5.1.2.1"><aside class="number"><a href="#5.1.2.1">5.1.2.1</a></aside><p><code class="html"><span class="na">id</span></code> attributes are generally used to identify parts of the document that a reader may wish to navigate to using a hash in the URL. That generally means major structural divisions. Therefore, elements that are not <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> elements do not have an <code class="html"><span class="na">id</span></code> attribute, unless a part of the ebook, like an endnote, refers to a specific point in the book, and a direct link is desirable.</p></li>
|
||||
<li id="5.1.2.2"><aside class="number"><a href="#5.1.2.2">5.1.2.2</a></aside><p><code class="html"><span class="na">id</span></code> attributes are not used as hooks for CSS styling.</p></li>
|
||||
<li id="5.1.2.3"><aside class="number"><a href="#5.1.2.3">5.1.2.3</a></aside><p>If an element that is not a <code class="html"><span class="p"><</span><span class="nt">section</span><span class="p">></span></code> or <code class="html"><span class="p"><</span><span class="nt">article</span><span class="p">></span></code> requires an <code class="html"><span class="na">id</span></code> attribute, the attribute’s value is the name of the element followed by <code class="bash"><span class="s">-N</span></code>, where <code class="bash"><span class="s">N</span></code> is the sequence number of the element start at <code class="bash"><span class="s">1</span></code>.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">p</span><span class="p">></span>See <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#p-4"</span><span class="p">></span>this paragraph<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more details.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
|
|
@ -43,11 +43,11 @@ require_once('Core.php');
|
|||
</ol>
|
||||
</section>
|
||||
</section>
|
||||
<section id="5.2"><aside class="number">5.2</aside>
|
||||
<section id="5.2"><aside class="number"><a href="#5.2">5.2</a></aside>
|
||||
<h2><code class="html"><span class="na">class</span></code> attributes</h2>
|
||||
<p>Classes denote a group of elements sharing a similar style.</p>
|
||||
<ol type="1">
|
||||
<li id="5.2.1"><aside class="number">5.2.1</aside><p>Classes are <em>not</em> used as single-use style hooks. There is almost always a way to compose a CSS selector to select a single element without the use of a one-off class.
|
||||
<li id="5.2.1"><aside class="number"><a href="#5.2.1">5.2.1</a></aside><p>Classes are <em>not</em> used as single-use style hooks. There is almost always a way to compose a CSS selector to select a single element without the use of a one-off class.
|
||||
</p><figure class="wrong"><code class="css full"><span class="p">.</span><span class="nc">business-card</span><span class="p">{</span>
|
||||
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
|
||||
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
|
@ -79,7 +79,7 @@ require_once('Core.php');
|
|||
<span class="p"></</span><span class="nt">section</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">body</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
<li id="5.2.2"><aside class="number">5.2.2</aside><p>Classes are used to style a recurring <em>class</em> of elements, i.e. a class of element that appears more than once in an ebook.
|
||||
<li id="5.2.2"><aside class="number"><a href="#5.2.2">5.2.2</a></aside><p>Classes are used to style a recurring <em>class</em> of elements, i.e. a class of element that appears more than once in an ebook.
|
||||
</p><figure class="corrected"><code class="css full"><span class="p">.</span><span class="nc">business-card</span><span class="p">{</span>
|
||||
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
|
||||
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
|
@ -99,7 +99,7 @@ require_once('Core.php');
|
|||
<span class="p"></</span><span class="nt">section</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">body</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
<li id="5.2.3"><aside class="number">5.2.3</aside><p>Class names describe <em>what</em> they are styling semantically, <em>not</em> the actual style the class is applying.
|
||||
<li id="5.2.3"><aside class="number"><a href="#5.2.3">5.2.3</a></aside><p>Class names describe <em>what</em> they are styling semantically, <em>not</em> the actual style the class is applying.
|
||||
</p><figure class="wrong"><code class="css full"><span class="p">.</span><span class="nc">black-border</span><span class="p">{</span>
|
||||
<span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span><span class="p">;</span>
|
||||
<span class="k">padding</span><span class="p">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
|
@ -111,17 +111,17 @@ require_once('Core.php');
|
|||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="5.3"><aside class="number">5.3</aside>
|
||||
<section id="5.3"><aside class="number"><a href="#5.3">5.3</a></aside>
|
||||
<h2><code class="html"><span class="na">xml:lang</span></code> attributes</h2>
|
||||
<ol type="1">
|
||||
<li id="5.3.1"><aside class="number">5.3.1</aside><p>When words are required to be pronounced in a language other than English, the <code class="html"><span class="na">xml:lang</span></code> attribute is used to indicate the IETF language tag in use.
|
||||
<li id="5.3.1"><aside class="number"><a href="#5.3.1">5.3.1</a></aside><p>When words are required to be pronounced in a language other than English, the <code class="html"><span class="na">xml:lang</span></code> attribute is used to indicate the IETF language tag in use.
|
||||
</p><ol type="1">
|
||||
<li id="5.3.1.1"><aside class="number">5.3.1.1</aside><p>The <code class="html"><span class="na">xml:lang</span></code> attribute is used even if a word is not required to be italicized. This allows screen readers to understand that a particular word or phrase should be pronounced in a certain way. A <code class="html"><span class="p"><</span><span class="nt">span</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">"TAG"</span><span class="p">></span></code> element is used to wrap text that has non-English pronunciation but that does not need further visual styling.</p></li>
|
||||
<li id="5.3.1.2"><aside class="number">5.3.1.2</aside><p>The <code class="html"><span class="na">xml:lang</span></code> attribute is included in <em>any</em> word that requires special pronunciation, including names of places and titles of books.</p></li>
|
||||
<li id="5.3.1.1"><aside class="number"><a href="#5.3.1.1">5.3.1.1</a></aside><p>The <code class="html"><span class="na">xml:lang</span></code> attribute is used even if a word is not required to be italicized. This allows screen readers to understand that a particular word or phrase should be pronounced in a certain way. A <code class="html"><span class="p"><</span><span class="nt">span</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">"TAG"</span><span class="p">></span></code> element is used to wrap text that has non-English pronunciation but that does not need further visual styling.</p></li>
|
||||
<li id="5.3.1.2"><aside class="number"><a href="#5.3.1.2">5.3.1.2</a></aside><p>The <code class="html"><span class="na">xml:lang</span></code> attribute is included in <em>any</em> word that requires special pronunciation, including names of places and titles of books.</p></li>
|
||||
</ol>
|
||||
<figure class="corrected"><code class="html full">She opened the book titled <span class="p"><</span><span class="nt">i</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"se:name.publication.book"</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">"la"</span><span class="p">></span>Mortis Imago<span class="p"></</span><span class="nt">i</span><span class="p">></span>.</code></figure>
|
||||
<ol type="1">
|
||||
<li id="5.3.1.3"><aside class="number">5.3.1.3</aside><p>The <code class="html"><span class="na">xml:lang</span></code> attribute is applied to the highest-level element possible. If italics are required and moving the <code class="html"><span class="na">xml:lang</span></code> attribute would also remove an <code class="html"><span class="p"><</span><span class="nt">i</span><span class="p">></span></code> element, the parent element can be styled with <code class="css"><span class="nt">body</span> <span class="o">[</span><span class="nt">xml</span><span class="o">|</span><span class="nt">lang</span><span class="o">]</span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span> <span class="p">}</span></code>.</p></li>
|
||||
<li id="5.3.1.3"><aside class="number"><a href="#5.3.1.3">5.3.1.3</a></aside><p>The <code class="html"><span class="na">xml:lang</span></code> attribute is applied to the highest-level element possible. If italics are required and moving the <code class="html"><span class="na">xml:lang</span></code> attribute would also remove an <code class="html"><span class="p"><</span><span class="nt">i</span><span class="p">></span></code> element, the parent element can be styled with <code class="css"><span class="nt">body</span> <span class="o">[</span><span class="nt">xml</span><span class="o">|</span><span class="nt">lang</span><span class="o">]</span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span> <span class="p">}</span></code>.</p></li>
|
||||
</ol>
|
||||
<figure class="wrong"><code class="html full"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">i</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">"es"</span><span class="p">></span>“Como estas?” el preguntó.<span class="p"></</span><span class="nt">i</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
|
|
@ -134,25 +134,25 @@ require_once('Core.php');
|
|||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="5.4"><aside class="number">5.4</aside>
|
||||
<section id="5.4"><aside class="number"><a href="#5.4">5.4</a></aside>
|
||||
<h2>The <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element</h2>
|
||||
<ol type="1">
|
||||
<li id="5.4.1"><aside class="number">5.4.1</aside><p>The <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element contains an appropriate description of the local file only. It does not contain the book title.</p></li>
|
||||
<li id="5.4.1"><aside class="number"><a href="#5.4.1">5.4.1</a></aside><p>The <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element contains an appropriate description of the local file only. It does not contain the book title.</p></li>
|
||||
</ol>
|
||||
<section id="5.4.2"><aside class="number">5.4.2</aside>
|
||||
<section id="5.4.2"><aside class="number"><a href="#5.4.2">5.4.2</a></aside>
|
||||
<h3>Titles of files that are an individual chapter or part division</h3>
|
||||
<ol type="1">
|
||||
<li id="5.4.2.1"><aside class="number">5.4.2.1</aside><p>Convert chapter or part numbers that are in Roman numerals to decimal numbers. Do not convert other Roman numerals that may be in the chapter title.
|
||||
<li id="5.4.2.1"><aside class="number"><a href="#5.4.2.1">5.4.2.1</a></aside><p>Convert chapter or part numbers that are in Roman numerals to decimal numbers. Do not convert other Roman numerals that may be in the chapter title.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Chapter 10<span class="p"></</span><span class="nt">title</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
<li id="5.4.2.2"><aside class="number">5.4.2.2</aside><p>If a chapter or part is only an ordinal and has no title or subtitle, the <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element is <code class="string">Chapter</code> followed by the chapter number.
|
||||
<li id="5.4.2.2"><aside class="number"><a href="#5.4.2.2">5.4.2.2</a></aside><p>If a chapter or part is only an ordinal and has no title or subtitle, the <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element is <code class="string">Chapter</code> followed by the chapter number.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Chapter 4<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title z3998:roman"</span><span class="p">></span>IV<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>The chapter body...<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
<li id="5.4.2.3"><aside class="number">5.4.2.3</aside><p>If a chapter or part has a title or subtitle, the <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element is <code class="string">Chapter</code>, followed by the chapter number in decimal, followed by a colon and a single space, followed by the title or subtitle.
|
||||
<li id="5.4.2.3"><aside class="number"><a href="#5.4.2.3">5.4.2.3</a></aside><p>If a chapter or part has a title or subtitle, the <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element is <code class="string">Chapter</code>, followed by the chapter number in decimal, followed by a colon and a single space, followed by the title or subtitle.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Chapter 6: The Reign of Louis XVI<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"><</span><span class="nt">h2</span> <span class="na">epub:type</span><span class="o">=</span><span class="s">"title"</span><span class="p">></span>
|
||||
|
|
@ -163,22 +163,22 @@ require_once('Core.php');
|
|||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="5.4.3"><aside class="number">5.4.3</aside>
|
||||
<section id="5.4.3"><aside class="number"><a href="#5.4.3">5.4.3</a></aside>
|
||||
<h3>Titles of files that are not chapter or part divisions</h3>
|
||||
<ol type="1">
|
||||
<li id="5.4.3.1"><aside class="number">5.4.3.1</aside><p>Files that are not a chapter or a part division, like a preface, introduction, or epigraph, have a <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element that contains the complete title of the section.
|
||||
<li id="5.4.3.1"><aside class="number"><a href="#5.4.3.1">5.4.3.1</a></aside><p>Files that are not a chapter or a part division, like a preface, introduction, or epigraph, have a <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element that contains the complete title of the section.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Preface<span class="p"></</span><span class="nt">title</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
<li id="5.4.3.2"><aside class="number">5.4.3.2</aside><p>If a file contains a section with a title or subtitle, the <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element contains the title, followed by a colon and a single space, followed by the title or subtitle.
|
||||
<li id="5.4.3.2"><aside class="number"><a href="#5.4.3.2">5.4.3.2</a></aside><p>If a file contains a section with a title or subtitle, the <code class="html"><span class="p"><</span><span class="nt">title</span><span class="p">></span></code> element contains the title, followed by a colon and a single space, followed by the title or subtitle.
|
||||
</p><figure class="corrected"><code class="html full"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Quevedo and His Works: With an Essay on the Picaresque Novel<span class="p"></</span><span class="nt">title</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</section>
|
||||
<section id="5.5"><aside class="number">5.5</aside>
|
||||
<section id="5.5"><aside class="number"><a href="#5.5">5.5</a></aside>
|
||||
<h2>Ordered/numbered and unordered lists</h2>
|
||||
<ol type="1">
|
||||
<li id="5.5.1"><aside class="number">5.5.1</aside><p>All <code class="html"><span class="p"><</span><span class="nt">li</span><span class="p">></span></code> children of <code class="html"><span class="p"><</span><span class="nt">ol</span><span class="p">></span></code> and <code class="html"><span class="p"><</span><span class="nt">ul</span><span class="p">></span></code> elements have at least one direct child block-level element. This is usually a <code class="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span></code> element, but not necessarily; for example, a <code class="html"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span></code> element might also be appropriate.
|
||||
<li id="5.5.1"><aside class="number"><a href="#5.5.1">5.5.1</a></aside><p>All <code class="html"><span class="p"><</span><span class="nt">li</span><span class="p">></span></code> children of <code class="html"><span class="p"><</span><span class="nt">ol</span><span class="p">></span></code> and <code class="html"><span class="p"><</span><span class="nt">ul</span><span class="p">></span></code> elements have at least one direct child block-level element. This is usually a <code class="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span></code> element, but not necessarily; for example, a <code class="html"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span></code> element might also be appropriate.
|
||||
</p><figure class="wrong"><code class="html full"><span class="p"><</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>Don’t forget to feed the pigs.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></figure>
|
||||
|
|
@ -190,10 +190,10 @@ require_once('Core.php');
|
|||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section id="5.6"><aside class="number">5.6</aside>
|
||||
<section id="5.6"><aside class="number"><a href="#5.6">5.6</a></aside>
|
||||
<h2>Tables</h2>
|
||||
<ol type="1">
|
||||
<li id="5.6.1"><aside class="number">5.6.1</aside><p><code class="html"><span class="p"><</span><span class="nt">table</span><span class="p">></span></code> elements have a direct child <code class="html"><span class="p"><</span><span class="nt">tbody</span><span class="p">></span></code> element.
|
||||
<li id="5.6.1"><aside class="number"><a href="#5.6.1">5.6.1</a></aside><p><code class="html"><span class="p"><</span><span class="nt">table</span><span class="p">></span></code> elements have a direct child <code class="html"><span class="p"><</span><span class="nt">tbody</span><span class="p">></span></code> element.
|
||||
</p><figure class="wrong"><code class="html full"><span class="p"><</span><span class="nt">table</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">td</span><span class="p">></span>1<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
|
|
@ -209,8 +209,8 @@ require_once('Core.php');
|
|||
<span class="p"></</span><span class="nt">tbody</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></figure>
|
||||
</li>
|
||||
<li id="5.6.2"><aside class="number">5.6.2</aside><p><code class="html"><span class="p"><</span><span class="nt">table</span><span class="p">></span></code> elements may have an optional direct child <code class="html"><span class="p"><</span><span class="nt">thead</span><span class="p">></span></code> element, if a table heading is desired.</p></li>
|
||||
<li id="5.6.3"><aside class="number">5.6.3</aside><p><code class="html"><span class="p"><</span><span class="nt">table</span><span class="p">></span></code> elements that are used to display tabular numerical data, for example columns of sums, have CSS styling for tabular numbers: <code class="css"><span class="p">{</span> <span class="k">font-variant-numeric</span><span class="p">:</span> <span class="n">tabular-nums</span><span class="p">;</span> <span class="p">}</span></code>.
|
||||
<li id="5.6.2"><aside class="number"><a href="#5.6.2">5.6.2</a></aside><p><code class="html"><span class="p"><</span><span class="nt">table</span><span class="p">></span></code> elements may have an optional direct child <code class="html"><span class="p"><</span><span class="nt">thead</span><span class="p">></span></code> element, if a table heading is desired.</p></li>
|
||||
<li id="5.6.3"><aside class="number"><a href="#5.6.3">5.6.3</a></aside><p><code class="html"><span class="p"><</span><span class="nt">table</span><span class="p">></span></code> elements that are used to display tabular numerical data, for example columns of sums, have CSS styling for tabular numbers: <code class="css"><span class="p">{</span> <span class="k">font-variant-numeric</span><span class="p">:</span> <span class="n">tabular-nums</span><span class="p">;</span> <span class="p">}</span></code>.
|
||||
</p><figure class="corrected"><code class="css full"><span class="nt">table</span> <span class="nt">td</span><span class="p">:</span><span class="nd">last-child</span><span class="p">{</span>
|
||||
<span class="k">text-align</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
|
||||
<span class="k">font-variant-numeric</span><span class="p">:</span> <span class="n">tabular-nums</span><span class="p">;</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue