Write your HTML like this to make your code more compatible

For example, users who need screen reading software. As a front-end developer, how could we bear to do that? I have always wanted to write an article like this to share how to create a more accessible page. One of today's plans is to combine HTML Tags with WCAG standards. I recommend you write your HTML this way to make someone's life easier.

What I want to share today is how to use our HTML tags to embody the WCAG standards and the goals of the semantic web in code:

1. Document declaration: <!Doctype>

In fact, this has nothing to do with WCAG, but for a more compatible page, especially backward compatible pages, I recommend you write it like this:

 <!Doctype html>

2. Link: <a>

The Internet connection can almost be said to be realized with <a>, which is the most common tag for a page. How should we deal with it?

Add accesskey for key links
Unless absolutely necessary, do not remove the dotted box during focus

 <a href="" title="" accesskey="M" rel="" hidefocus >Link</a>

3. Abbreviation: <abbr>

The correct use of HTML tags is also very important, as it helps screen reader users understand the page structure. Especially when using tags such as H1, H2, H3, etc., misuse can easily lead to confusing structures. Of course, using common tags and then using CSS to create visual contrast is also something that ordinary people can recognize. But what about screen reader users? Of course, I just mentioned here that you need to pay attention to the use of page tags, and the most important thing about abbr is that you should add a title attribute to describe the abbreviation. for example:

 <abbr title="Web Developer" >WD</abbr>

4. Block quote: <blockquote>, general quote: <cite>

When you have a long quote, use <blockquote>, and use <cite> for inline citations, making your structure easier to read:

 <blockquote>
    I have always wanted to write an article like this to share how to create a more accessible page. One of today's plans is to combine HTML Tags with WCAG standards. I recommend you write your HTML this way to make someone's life easier.
</blockquote>
<p>The sentence that impressed me the most was, <cite>"Being a front-end developer requires love. Don't use the roaring style to attack all kinds of people at every turn."</cite> </p>

5. Delete: <del>

Writing on paper is not like writing on a computer, where you can use the undo key, but what if we want to emphasize that something is deleted? That is using the <del> tag. For example:

 <del>To emphasize in HTML, use the &lt;b&gt; tag.</del>
To emphasize in HTML, use the &lt;strong&gt; tag.

The effect is this:

~~To emphasize in HTML, use the <b> tag.~~
To emphasize in HTML, use the <strong> tag.

6. Definition List: <dl>

Last year, when I was leading new people to work on the Alipay front-end blog, what impressed me most was that they loved using <dl>. At that time, I thought these students were pretty good and had a good understanding of semantics. We still rarely use definition lists. Instead, use the normal <ul> <ol> tags. <dl> should also be used with caution. It is best to use it only in some entries that have a "definition" meaning, such as this example from w3school, which defines coffee and milk:

 <dl>
  <dt>Coffee</dt>
    <dd>- black hot drink</dd>
  <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

7. Unordered/Ordered Lists <ul>/<ol>

List, this is familiar to every front-end developer. Because the structure can be applied very flexibly, it is often used in navigation, lists, tabs, etc. There is no need to say more about this. But one thing you still need to understand is, don't believe that <ul>/<ol> is a substitute for <table>. In the HTML tags we commonly use, each tag has its own function, and none of them is a substitute for the other.

 <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

8. Table: <table>

If it's a table, then don't use a paragraph instead, let alone a list. Unless absolutely necessary, and they are convertible. In addition, there are some points to note in the table:

Add a summary attribute to <table>. Some tables are very large and do not need to be read in their entirety.
Add <tbody>, if I remember correctly, if you don't add it, the browser will automatically add it for you
Use <col> <colgroup> to control the columns displayed when necessary

 <table summary="sofish's blog status">
    <thead>
        <tr>
            <th>DATE</th>
            <th>IP</th>
            <th>PV</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2011.3.11</td>
            <td>3000</td>
            <td>8000</td>
        </tr>
    </tbody>
</table>

9. Formatting snippets <code>/<pre>

<code> refers to computer code text, and <pre> refers to preformatted text. <pre> is broader in scope and is a block element that may be used to format various texts, especially code. There is nothing special to pay attention to when using it, the main thing is to use it semantically correctly, such as not using <pre> instead of the general <p>.

 <code>text-align:center</code>
<pre>
{ ( 1 * 10 ² ) + ( 9 * 10 ¹ ) + ( 3 * 10 ⁰ ) }
</pre>

10. Line breaks: <br>

In modern web pages, the use of <br> is very rare. The blank space in web pages is generally achieved using CSS padding and margin. This is more precise and easier to control. The recommended usage now is to use it in general paragraphs <p> for simple line breaks, rather than to control page margins.

 <p>I am a paragraph. <br />
Poetry uses line breaks.
</p>

11. Dividing line: <hr>

<hr> has a very good semantic effect. But his visuals are hard to control. I have written an article about the problems of <hr /> in various browsers before. Generally, it is rarely used. If a separate page were provided specifically for screen reader users, perhaps <hr> would be more useful.

 <h3>Title 1</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>Title 2</h3>
<p>This is the entry of... </p>

12. Non-semantic tags: <div>/<span>

In fact, the two tags <div>/<span> are semantic and both define a section in a document. Yes, it is actually the same as <section> in HTML5. It’s just that, because of search engines, search engines think they are non-semantic tags, so they become “non-semantic” tags. The recommended usage is to use other containers as page frames, such as layouts, to add additional visual effects, rather than as substitutes for paragraphs.

 <div id="container">
    <div id="content">
    </div>
    <div id="sidebar">
        <ul>
            <li><span>God</span>, oh my zsh</span></li>
        </ul>
    </div>
</div>

13. Paragraph/heading: <p>,<h1>/<h2>/<h3>…

These tags can almost be said to be the most important tags in a page tag hierarchy. We can use the structure of a book to illustrate these tags, and when we build a page, we should also have this idea in mind:

Book Name: H1
Chapter title of the book: H2
Article title within section: H3
Chapter paragraph: P
Subtitle/subtitle: H4/H5/H6

Yes, of course there are also citations <blockquoute>, code provided in technical books <pre class="code">, lists of some points to note <ul>, some tables for convenient comparison <table>, etc.

 <h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
    <h3>Summary:</h3>
    <p>lorem ipsum is ...<em>emphasize</em></p>
</div>

14. Emphasis: <em>/<strong>

Abbreviation of <em>emphasize. And <strong> is strong emphasize. Many students who have just started front-end development may not be sure about the use of tags such as <em>, <strong>, <cite>, <i>, and <b>. <i> and <b> are basically obsolete, equivalent to the current <em> and <strong>. Generally speaking, their order of content importance is as follows: strong > em ≈ cite.

 <strong>Note:</strong> Don't use old-fashioned tags, such as <cite>FONT, CENTER</cite>, etc., especially <em>FONT</em>.

15. Form items: <input>/<textarea>/<select>

Form items are relatively complex tags in HTML, and there are many points to pay attention to:

You need to add a <label> to each form item to describe it. If a label cannot be used, add a title attribute to the form item.
When a form field is required, use the “ * ” symbol to mark it.
Flash usually does not generate a <label> for form items. Please check the auto label option.

 <form method="post" action="http://sofish.de">
    <fieldset><legend>My Form</legend>
      <label for="firstname">* First name:</label> <input type="text" id="firstname" />
      <label for="speech">Say something:</label>
      <textarea id="speech" />
      </textare>
      <input type="submit" value="submit" title="submit button" />
    </fieldset>
</form>

16. Image: <img>

Blind people cannot see pictures. Provide alt to indicate alternative text. Tell them what kind of picture it is.

 <img src="http://sofish.de/favicon.ico" alt="Favicon of Happy Favorites" />

17. Frame: <iframe>

Try to avoid using <iframe> frames, but when you need to use one, it is best to provide a title attribute to describe it.

 <iframe src="http://sofish.de" title="Happy Favorites" /></iframe>

18. Streaming media: <video>/<audio>/<object>/<embed>

The media is also in a more complex format and is more difficult to handle. Usually we can do this:

Provide corresponding texts for audio-visual media, including corresponding scenes. For example, applause during a speech, which helps readers perceive the current atmosphere, should be reflected in the speech text. And so on for the rest.
If you can't provide a specific description like a symphony, you can give a brief explanation
If the text is too long to fit on the current page, you can provide a link to the corresponding alternative text after the media.
If the media contains content that may cause epileptic seizures, this should be indicated accordingly.

 <audio src="mozart.mp4">Mozart Symphony No. 39</audio>

19. Page title: <title>

Be sure to include a title on your web page, and each tag should be distinctive. For example, this is reflected in Alipay:

alipay web page title

 <title>Contact me-- Happy Favorites</title>

20. Conclusion

All right. I’ll stop here for now. WCAG is not just about the usage of these simple HTML tags, and semantic web pages cannot be written in just one or two articles. Take your time. Start with the most common ones and develop good habits. Back to the previous sentence in the article, can you bear to make the page so difficult to use?

<<: Full steps to create a high-performance index in MySQL

>>: Detailed explanation of flex and position compatibility mining notes