🤖 🥖 👩🏿‍⚕️ HTMHell - markup neraka 🤳 🚶🏽 👩🏾‍🤝‍👨🏿

Salam pembuka. Saya mempersembahkan untuk perhatian Anda terjemahan catatan dari situs HTMHell - kumpulan contoh buruk kode HTML yang diambil dari proyek nyata.

Setiap catatan menyertakan sepotong kode buruk itu sendiri, yang dilengkapi dengan penjelasan tentang apa sebenarnya kesalahan itu dan mengapa lebih baik tidak melakukan ini. Dan sebagai kesimpulan, sebuah opsi yang diusulkan dianggap lebih tepat.

Karena saya telah menggabungkan menjadi satu catatan artikel yang awalnya independen dan mandiri, selama penerjemahan terkadang saya membiarkan diri saya sedikit menyimpang dari gaya formulasi aslinya, mencoba membuat teks tidak terlalu "kering" dan lebih konsisten.

1. Tombol menyamar sebagai link

Kode buruk

<button role="link" title="Name of website" tabindex="0">
  <img alt="Name of website" src="logo.jpg" title="Name of website">
</button>

Kesalahan dan apa yang harus diperbaiki

Contoh penggunaan elemen yang salah <button>

. Gunakan elemen untuk menautkan ke halaman atau situs lain <a>

. Jangan mengabaikan semantik tag HTML kecuali jika ada kebutuhan yang jelas untuk melakukannya.
Berkat elemen <a>

, halaman dapat direferensikan tanpa JavaScript
Atribut title

mendeskripsikan konten elemen dalam bentuk tooltip dan elemen <button>

tidak perlu ditentukan
tabindex

,

<a href="https://">
  <img alt="Name of website" src="logo.jpg">
</a>

2. role="button"

<div tabindex="-1">
  <div role="button">
    <svg width="28" height="24"> … </svg>
  </div>
</div>

<div>

- role

, <button>
<button>

tabindex

. HTML-
<div>

- . <button>

Enter

Space
SVG-, , SVG

, , .

<button>
  <span class="sr-only">Send</span>
  <svg width="28" height="24" aria-hidden="true"> … </svg>
</button>

.sr-only

,

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

3. -

<img src="/images/edit.gif" onclick="openEditDialog(123)">
<img src="/images/delete.gif" onclick="openDeleteDialog(123)">

<img>

JavaScript,
<div>

, img>

. <button>

, Enter

Space
( alt

). - ,

№1: , alt

<button onclick="openEditDialog(123)">
  <img src="/images/edit.gif" alt="Edit product XY">
</button>
<button onclick="openDeleteDialog(123)">
  <img src="/images/delete.gif" alt="Delete product XY">
</button>

№2: alt

,

<button onclick="openEditDialog(123)">
  <span class="sr-only">Edit product XY</span>
  <img src="/images/edit.gif" alt="">
</button>
<button onclick="openDeleteDialog(123)">
  <span class="sr-only">Delete product XY</span>
  <img src="/images/delete.gif" alt="">
</button>

alt

, , , .sr-only

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

4.

<a href="https://example.com">
  <button>Example</button>
</a>

, : ,
, <a>

, <button>

, "The Links vs. Buttons Showdown" Marcy Sutton

.button {
  /*  CSS,      */
}

<a href="https://example.com" class="button">Example</a>

5.

: , . ,

<a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp; </a>

role="button"

, , , . ,
aria-haspopup="true"

, ,
padding

CSS,

.button {
  /*   CSS      */
}

<a class="button" href="#form"> Register </a>

6. void- "href"

<a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a>

JavaScript- ,
JavaScript. href

, 100%
. /

<a href="index.html">Link</a>

7. "id"

 <table>
   <tr id="body">
     <td id="body">
       <table id="body">
         <tr id="body_row">
           <td id="body_left">…</td>
           <td id="body_middle">…</td>
           <td id="body_right">…</td>
         </tr>
       </table>
     </td>
   </tr>
 </table>

id

, ,
, ( , 2016 ). ,
HTML5-.
Flexbox CSS Grid,
ID

<main id="body">
   <aside id="secondary_content"> </aside>
   <article id="primary_content"> </article>
   <aside id="tertiary_content"> </aside>
 </main>

8.

<a href="#" onclick="modal.open()">Login</a>

<a>

: PDF-
– JavaScript- . <button>

type="button"

,
, , JavaScript,

№1: <button>

<button type="button" onclick="modal.open()">Login</button>

, , <button>

.

№2:

<a href="/login" onclick="modal.open()">Login</a>

- <a>

, href

, , . , , JavaScript

, , JavaScript -

9. Cookie

<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>

  <div class="cookie_consent modal">
    <p>We use cookies…</p>
    <div class="cookie_consent__close">
      <i class="fa fa-times"></i>
    </div>
    <div class="cookie_consent__ok">OK</div>
  </div>
</body>

Cookie . , .
, <div>

,
<div>

- . ,
, , <div>

. <button>

, Enter

Space
,
Font Awesome , <i>

aria-hidden="true"
Font Awesome Unicode- ::before

. . "" (times), fa-times - "", " ". : Talkback VoiceOver
, Escape

<body>
  <div class="cookie_consent modal">
    <h2 class="sr-only">Cookie notice</h2>
    <p>We use cookies…</p>
    <button class="cookie_consent__ok">OK</button>
    <button class="cookie_consent__close">
      <span class="sr-only">Close notification</span>
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
  </div>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

, .sr-only

, ,

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

Screen readers and cookie consents

10.

<section id="page-top">
  <section data-section-id="page-top" style="display: none;"></section>
</section>
<main>
  <section id="main-content">
    <header id="main-header">
      <h1>...</h1>
      <section class="container-fluid">
        <section class="row">
          <article class="content col-sm-12">
            <section class="content-inner">
              <div class="content__body">
                <article class="slider">
                  <section class="slide"> … </section>
                </article>
              </div>
            </section>
          </article>
        </section>
      </section>
    </header>
  </section>
</main>

(<article>

, <aside>

, <nav>

, <section>

) – , -
, ,
, , . <div>

,
<section>

, – region. . <section>

( , )
, – <section>

<div>
- <header>

. <main>

. <header>

,
() aria-labelledby

<div id="page-top">
  <div data-section-id="page-top" style="display: none;"></div>
</div>
<main>
  <section id="main-content">
    <header id="main-header">
      <h1>...</h1>
    </header>
    <div class="container-fluid">
      <div class="row">
        <div class="content col-sm-12">
          <div class="content-inner">
            <section aria-labelledby="sliderheading" class="content__body">
              <h2 id="sliderheading" hidden>New Products</h2>
              <ul class="slider">
                <li class="slide"> … </li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

Accessibility Support - section element (html)

11.

<span class="nav-toggle"> ☰ Menu </span>

, " ". "☰", unicode
- , . CSS- background
, <div>

, <img>

, <span>

. <button>

, Enter

Space

.
<span>

, . ,
aria-expanded

. true

– , false

–

<button class="nav-toggle" aria-expanded="false">
  <span aria-hidden="true">☰</span> Menu
</button>

12. "/"

<form role="form">
  <h2>Poll title</h2>
  <div id="pollQuestion">Is this accessible?</div>
  <div name="pollGroup" role="radiogroup">
    <div role="radiogroup" aria-label="Poll title">
      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Yes</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>No</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Maybe</span>

      <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
      <span>Can you repeat the question?</span>
    </div>

    <button type="submit">Vote</button>
  </div>
</form>

<form>

, role="form"
– . , <form>

aria-labeledby

, .
role="radiogroup"

, . , <fieldset>
aria-labelledby

. . <legend>
, <span>

<label>

for
<fieldset>

<form aria-labelledby="poll-title">
  <h2 id="poll-title">Poll title</h2>
  <fieldset>
    <legend>Is this accessible?</legend>

    <input type="radio" id="radio1" name="poll" value="yes">
    <label for="radio1">Yes</label>

    <input type="radio" id="radio2" name="poll" value="no">
    <label for="radio2">No</label>

    <input type="radio" id="radio3" name="poll" value="maybe">
    <label for="radio3">Maybe</label>

    <input type="radio" id="radio4" name="poll" value="repeat">
    <label for="radio4">Can you repeat the question?</label>

    <button type="submit">Vote</button>
  </fieldset>
</form>

13.

<input type="checkbox" id="accept" required>
<label for="accept">
  <a href="/legal"> I accept the confidentiality policy and data… </a>
</label>

( )
( )
,
<label>

<input type="checkbox" id="accept" required>
<label for="accept"> I accept the confidentiality policy and data… </label>
(read <a href="/legal">Terms and conditions</a>)

14. "type"

<a type="button" class="button" href="/signup" tabindex="-1">Sign up</a>

<a>

type

, ,
, , MIME-. ,
, href

- ( ), <a>

, <button>

, , :
tabindex

, . , JavaScript
, ,
, <button>

<a href="/signup" class="button">Sign up</a>

15.

: <div>

JavaScript

<h3>
  <div style="display: block; text-align: start; position: relative;" class="title">
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">H</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">e</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">a</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">d</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">i</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">n</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">g</div>
  </div>
</h3>

, ,

DOM. DOM-
DOM- ,
. , , CSS-

№1

<h3> Heading </h3>

№2

, , , , , aria-hidden="true"

<h3 class="title">
  <span class="sr-only">Heading</span>
  <div aria-hidden="true">
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">H</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">e</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">a</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">d</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">i</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">n</div>
    <div style="transform-origin: 50% 50% -30.8917px;" class="char">g</div>
  </div>
</h3>

, . CSS-, .sr-only

, , .

.title {
  display: block;
  text-align: start;
  position: relative;
}
.char {
  position: relative;
  display: inline-block;
  transform: rotateX(90deg);
}
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

16. alt, ..., aria-label, ..., alt

: ,

<a tabindex="0">
  <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine">
    <div>
      <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
    </div>
  </div>
</a>

<a>

href

, , (HTML )
-, , , , , href

<button>

, ,
href

. tabindex

, ,
alt

div
ARIA. aria-label

div

, img

( alt

)

href

alt

<a href="detail.html">
  <div>
    <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
  </div>
</a>

17.

: , ,

<section>
  <section>
    <h2>Overview</h2>
    <figure class="card" data-url="image1.html" style="background: url(image1.jpg)">
      <figcaption>
        <h4>My heading</h4>
        <article>Teasertext...</article>
      </figcaption>
    </figure>
    <figure class="card" data-url="image2.html" style="background: url(image2.jpg)"> … </figure>
  </section>
</section>

, <section>

. , "Why You Should Choose HTML5 <article> Over <section>" Bruce Lawson
. ,
, HTML5- <figure>

, . ,
, - HTML- , CSS- background

.
JavaScript. (<a href="path/to/page">

), .
<h1>

- <h6>

<section>

. <h4>

, , <figcaption>

,
<article>

. , , . <p>
, , . ""

<div>
  <section>
    <h2>Overview</h2>
    <article class="card">
      <h3>
        <a href="image1.html"> My heading </a>
      </h3>
      <img src="image1.jpg" alt="Description of image1" />
      <p>Teasertext...</p>
    </article>
    <article class="card"> … </article>
  </section>
</div>

18. div-

<div class="nav">
  <div>
    <div>about</div>
    <div>thoughts</div>
  </div>
</div>

<div>

- , - . <div>
<nav>

. , .
<ul>

<ol>

, . ,
, <ol>

<ul>
<a>

<div>

, . ,

<nav>
  <ul class="nav">
    <li>
      <a href="/about">about</a>
    </li>
    <li>
      <a href="/thoughts">thoughts</a>
    </li>
  </ul>
</nav>

19.

: ,

<h1>Product Status</h1>
<h2>Is the product available?</h2>
<div>
  <h3>
    <div>
      <div>
        <i>
          <h3 class="message is-success">
            It‘s <a>available</a>.
          </h3>
        </i>
      </div>
    </div>
  </h3>
</div>

<h1>

- <h6>

, ,
<div>

. , , - . Fragments in React ,
DOM. DOM-
DOM- ,
<h1>

- <h6>

. <h3>

<div>
<i>

, , . , CSS- font-style: italic
<a>

href

, ,
-, , , , href

<button>

, ,

 <h1>Product Status</h1>
 <p>Is the product available?</p>
 <p class="message is-success">
   It‘s <a href="/product.html">available</a>.
 </p>

20. HTMHell: ""

- – "".

, , , , , , . , - .

, 2 , HTMHell 11

1:

<div class="close"></div>

close::after {
  background: url("close.png");
  content: "";
}

<div>

- , . <div>
<div>

. <button>

Enter

Space
<div>
:

2:

<div class="close">
  ✕
</div>

"✕" - "" "", . , 2 ✕ 2 ( ). ""
, <div>
: - " " "" (times)

3: Font Awesome

<div class="close">
  <i class="fas fa-times"></i>
</div>

.fa-times::before {
  content: '\f00d';
}

, CSS
Font Awesome aria-hidden="true"

<i>
Font Awesome Unicode- ::before

. Unicode-, "" (times), fa-times - , . : Talkback VoiceOver
<i>

, , . , CSS- font-style: italic
, <div>
: "" (times)

4:

<a href="#" class="close">
</a>

a::after {
  font-size: 28px;
  display: block;
  content: "×";
}

<a>

href

, : PDF-
– JavaScript- . <button>

type="button"

,
, <a>

, <button>

, "The Links vs. Buttons Showdown" Marcy Sutton
, CSS
"✕" - "" "", . , 2 ✕ 2 ( ). ""
: ", " (link, times)

5:

<a href="#" class="close">
  Close
</a>

.close::before {
  content: "\e028";
}

, ,
<a>

CSS
: ", " (link, times close)

6: href

<a class="close" onclick="close()">×</a>

, href
<a>

href

, ,
-, , , , , href

<button>

, ,
-
, <a>

, <button>

, "The Links vs. Buttons Showdown" Marcy Sutton
: ", " (times, clickable)

7: -

<a onclick="close();">
   <img src="close.png">
 </a>

.
6 -
: "close.png, " (close.png, image)

8: -

<label class="close" for="close">
   <svg> … </svg>
 </label>
 <input id="close" type="radio">

[type="radio"] {
  display: none;
}

" ", <button>

, -
- , ()
SVG . SVG, "Creating Accessible SVGs" Carie Fisher
, display: none

<input>

<label>
:

9:

<button class="close" type="button">
  ×
</button>

"✕" - "" "", . , 2 ✕ 2 ( ). ""
: ", " (times, button)

10: svg

<button class="close">
  <svg> … </svg>
</button>

SVG . SVG, "Creating Accessible SVGs" Carie Fisher
: "" (button)

11: "X"

<div role="button" tabindex="0">X</div>

role

, <button
<button>

tabindex

. HTML-
1 , <div>
"X" ""
: ", " (X, button)

" "X" "" – , , "

Max Böck

<button type="button">
  Close
</button>

:
: ", " (Close, button)

<button type="button">
  Close
  <span aria-hidden="true">×</span>
</button>

"", , <span>

aria-hidden="true"
: ", " (Close, button)

<button type="button">
  <span class="sr-only">Close</span>
  <span aria-hidden="true">×</span>
</button>

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

, . CSS-, .sr-only

, , .
: ", " (Close, button)

<button type="button" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

, SVG , aria-label
: ", " (Close, button)

5: Font Awesome

, Font Awesome

<button type="button" class="close" aria-label="Close">
  <span class="fa fa-times" aria-hidden="true"></span>
</button>

" ", " ", " ".

, , , . .

21. legend

: ,

<button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true">
  <legend> Industries Served </legend>
</button>

<legend>

- , <fieldset>

(HTML legend)
<button>

tabindex

. HTML- .
href

<button>

(HTML button)

<button class="panel-heading" aria-expanded="true">
  Industries Served
</button>

22. div-

<div>About us</div>

<div onClick="location.href='about.html'">
  About us
</div>

<div data-page="aboutus" data-url="index.php">
  About us
</div>

... , <a>

<div>

- , . <div>
<div>

. <a>

Enter

.
<div>
" /" " "
<div>

(, " "). <a>

(, " , ")
aria-label

<div>
. <div>

- , role="link"

<a href="aboutus.html">
  About us
</a>

23.

<article>
  <div>
    <div class="sr-only">Image</div>
    <img src="/feature-teaser.png" alt="Feature teaser" />
  </div>
</article>
<div>
  <span>
    <span>Exciting feature!</span>
  </span>
  <div> This text describes what the feature does! </div>
  <a href="/blog/feature">
    <span>Read more</span>
    <svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
      <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path>
    </svg>
  </a>
</div>

<article>

. , . - , . <section>
<div>

"Image". , <img>

. HTML- . ""
<span>

, , , . . , . – <h4>
<div>

. <p>
"Read more" – . , . ,
<svg>

<section>
  <div>
    <img src="/feature-teaser.png" alt="" />
  </div>
  <div>
    <h4>Exciting feature!</h4>
    <p>This text describes what the feature does!</p>
    <a href="/blog/feature">
      <span>Read more about our exciting feature </span>
      <svg aria-hidden="true" viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
        <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path>
      </svg>
    </a>
  </div>
</section>

The Generic Section element

24. Placeholder - label

<input type="text" placeholder="First name">

<input>

<label>

. , <label>

(, ", "). , ,
placeholder

,
, placeholder

- .
::placeholder

. ,
<label>

, ,
placeholder

, , . , .
, , , .
, , ,
placeholder

,
Google Translate
, ,

 <label for="firstname">First name</label>
 <input type="text" id="firstname">

HTMHell - markup neraka