🏖️ 🎑 ⏰ HTMHell - marcado del infierno 👨‍🎓 🤟🏻 🧘🏿

Saludos. Les presento a su atención la traducción de notas del sitio HTMHell , una colección de malos ejemplos de código HTML tomados de proyectos reales.

Cada nota incluye un fragmento de código incorrecto, que se complementa con explicaciones de exactamente cuáles son los errores y por qué es mejor no hacer esto. Y en conclusión, se propone una opción que se considera más correcta.

Como he combinado en un solo artículo notas que inicialmente son independientes y autosuficientes, durante la traducción a veces me permití desviarme un poco del estilo de las formulaciones originales, tratando de hacer el texto menos "seco" y más consistente.

1. Botón disfrazado de enlace

Código incorrecto

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

Errores y que corregir

Un ejemplo de uso incorrecto de un elemento <button>

. Utilice el elemento para vincular a otra página o sitio <a>

. No descuide la semántica de las etiquetas HTML a menos que exista una clara necesidad de hacerlo.
Gracias a los elementos <a>

, las páginas pueden ser referenciadas sin JavaScript.
El atributo title

describe el contenido del elemento en forma de información sobre herramientas y para los elementos <button>

no es necesario especificarlo.
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 - marcado del infierno