<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using semantic elements to mark up structure</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using semantic elements to mark up structure</h1><section class="meta"><p class="id">ID: G115</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
      <p>Markup languages, including HTML 4.01, XHTML 1.x</p>
   </section><section id="description"><h2>Description</h2>
      <p>The objective of this technique is to mark up the structure of the Web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.</p>
      <p>Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.</p>
      <p>In HTML, for example, phrase-level elements such as
            
              em
            ,
            
              abbr
            , and
            
              cite
            
            add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.</p>
   </section><section id="examples"><h2>Examples</h2>
      <section class="example">
         
            <p>A paragraph contains a hyperlink to another page. The hyperlink is marked up using the
                
                  a
                
                element.</p>
         
         <pre xml:space="preserve">
              &lt;p&gt;Do you want to try our new tool yourself? A free 
                demonstration version is available in our 
                &lt;a href="download.html"&gt;download section&lt;/a&gt;&lt;/p&gt;
            </pre>
      </section>
      <section class="example">
         
            <p>A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the
                
                  cite
                
                element and the quotation itself is marked up using the
                
                  blockquote
                
                element.</p>
         
         <pre xml:space="preserve">
              &lt;p&gt;Marriage was considered a logical step for a bachelor, 
                as can be seen in the first chapter of the novel 
                &lt;cite&gt;Pride and Prejudice&lt;/cite&gt;:&lt;/p&gt;
                &lt;blockquote&gt;
                &lt;p&gt;It is a truth universally acknowledged, that a single man in
                possession of a good fortune, must be in want of a wife.&lt;/p&gt;
                &lt;p&gt;However little known the feelings or views of such a man may
                be on his first entering a neighbourhood, this truth is so well
                fixed in the minds of the surrounding families, that he is considered
                the rightful property of some one or other of their daughters.&lt;/p&gt;
                &lt;/blockquote&gt;
            </pre>
      </section>
      <section class="example">
         
            <p>A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the
                
                  strong
                
                element.</p>
         
         <pre xml:space="preserve">
              &lt;h1&gt;How to start the engine&lt;/h1&gt;
                &lt;p&gt;Before starting the engine, &lt;strong&gt;make sure the gear 
                is in neutral&lt;/strong&gt;. Next, turn the key in the ignition. 
                The engine should start.&lt;/p&gt;
            </pre>
      </section>
      <section class="example">
         
            <p>This example shows how to use the
                
                  em
                
                and
                
                  strong
                
                elements to emphasize text.</p>
         
         <pre xml:space="preserve">
              &lt;p&gt;What she &lt;em&gt;really&lt;/em&gt; meant to say was, 
                "This is not ok, it is &lt;strong&gt;excellent&lt;/strong&gt;!"&lt;/p&gt;
            </pre>
      </section>
      <section class="example">
         <h3>Using highlighting and background color to visually and semantically identify important information.</h3>
         <pre xml:space="preserve">
              &lt;style type="text/css"&gt;
                .vocab {
                background-color:cyan;
                font-style:normal;
                }
                &lt;/style&gt;
                ...
                &lt;p&gt;New vocabulary words are emphasized and highlighted 
                with a cyan background&lt;/p&gt;
                &lt;p&gt;The &lt;em class="vocab"&gt;scathing&lt;/em&gt; review of the play 
                seemed a bit too harsh... &lt;/p&gt;
            </pre>
      </section>
   </section><section id="tests"><h2>Tests</h2>
      <section class="procedure"><h3>Procedure</h3>
         <ol>
            <li>Check if there are parts of the content that have a semantic function.</li>
            <li>For each part that has a semantic function, if corresponding semantic markup exists in the technology, check that the content has been marked up using that semantic markup.</li>
         </ol>
      </section>
      <section class="results"><h3>Expected Results</h3>
         <ul>
            <li>Check #2 is true.</li>
         </ul>
      </section>
   </section><section id="related"><h2>Related Techniques</h2><ul>
      <li><a href="../html/H39">H39</a></li>
      <li><a href="../html/H42">H42</a></li>
      <li><a href="../html/H44">H44</a></li>
      <li><a href="../html/H48">H48</a></li>
      <li><a href="../html/H49">H49</a></li>
      <li><a href="../html/H51">H51</a></li>
      <li><a href="../html/H71">H71</a></li>
   </ul></section><section id="resources"><h2>Resources</h2>
      
         <ul>
            <li>
                  <a href="https://www.w3.org/TR/html4/">HTML 4.01 specification</a>
                </li>
            <li>
                  <a href="https://www.w3.org/TR/html4/struct/text.html#h-9.2">HTML 4.01 specification, using phrase elements</a>
                </li>
            <li>
                  <a href="https://www.w3.org/TR/MathML3/">Mathematical Markup Language (MathML) Version 3.0 2nd Edition</a>
                </li>
            <li>Jeffrey Zeldman's book
                  <a href="https://en.wikipedia.org/wiki/Designing_with_Web_Standards">"Designing with Web standards"</a>
                </li>
            <li>Web Design Group's article
                  <a href="http://www.htmlhelp.com/design/style/docstyle-tags.html">"Document style: Use the right tag for the job"</a>
                </li>
         </ul>
      
   </section></body></html>