📘 🎤 👮 HTMHell - hell markup ☪️ ♊️ 🚶🏽

Greetings. I present to your attention the translation of notes from the HTMHell site - a collection of bad examples of HTML code taken from real projects.

Each note includes a piece of bad code itself, which is supplemented with explanations of exactly what the mistakes are and why it is better not to do this. And in conclusion, an option is proposed that is considered more correct.

Since I have combined into a single article notes that are initially independent and self-sufficient, during translation I sometimes allowed myself to deviate a little from the style of the original formulations, trying to make the text less "dry" and more consistent.

1. Button disguised as a link

Bad code

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

Errors and what to fix

An example of incorrect use of an element <button>

. Use the element to link to another page or site <a>

. Don't neglect the semantics of HTML tags unless there is a clear need to do so.
Thanks to elements <a>

, pages can be referenced without JavaScript
The attribute title

describes the content of the element in the form of a tooltip and for elements <button>

it is unnecessary to specify it
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 - hell markup