├── CONTRIBUTING.md
├── README.md
├── README.ru.md
└── README.ua.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Feel free to translate best practices into your language and create a pull request.
2 | You will also need to add language into the navigation of all other languages.
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   English |
  3 |   <a href="https://github.com/SilentImp/html/blob/master/README.ua.md">Українська</a> |
  4 |   <a href="https://github.com/SilentImp/html/blob/master/README.ru.md">Pусский</a>
  5 | </p>
  6 | 
  7 | # HTML recommendations and best practices
  8 | 
  9 | ## Prefer fewer elements over more elements
 10 | 
 11 | It is harder to read, understand, and maintain large HTML blocks. Another reason — large DOM can influence performance.
 12 | 
 13 | - [Avoid an excessive DOM size](https://web.dev/dom-size/)
 14 | 
 15 | ### Avoid
 16 | ```html
 17 | 
 18 | <div class="outer-margin">
 19 |   <div class="inner-padding">
 20 |     <p>We are the working dead</p>
 21 |   </div>
 22 | </div>
 23 | ```
 24 | 
 25 | ### Prefer
 26 | ```html
 27 | <div class="description">
 28 |   <p>We are the working dead</p>
 29 | </div>
 30 | ```
 31 | 
 32 | ## Prefer semantic elements over non-semantic
 33 | 
 34 | It is easier to read, understand, and maintain semantic HTML. Also, it's better for accessibility, for example, screen readers. And all kinds of robots and parsers. Including search engine spiders. 
 35 | 
 36 | - [The practical value of semantic HTML](https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/)
 37 | - [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
 38 | - [Understanding why Semantic HTML is important, as told by TypeScript.](https://medium.com/@mandy.michael/understanding-why-semantic-html-is-important-as-told-by-typescript-bd71ad41e6c4)
 39 | - [The SEO Advantages of Machine-Readable HTML5 Semantic Markup](https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455)
 40 | - [Semantics in HTML 5](https://alistapart.com/article/semanticsinhtml5/)
 41 | 
 42 | ### Avoid
 43 | ```html
 44 | <span>20 minutes ago.</span>
 45 | ```
 46 | 
 47 | ### Prefer
 48 | ```html
 49 | <time datetime="2020-09-01T20:00:00">20 minutes ago.</time>
 50 | ```
 51 | 
 52 | ## Prefer progressive enhancement and simplification over hacky or complex solutions
 53 | 
 54 | This way, we would get more stable and solid solutions while delivering the user's best possible experience.
 55 | 
 56 | - [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
 57 | - [Do websites need to look exactly the same in every browser?](http://dowebsitesneedtolookexactlythesameineverybrowser.com/)
 58 | 
 59 | ### Avoid
 60 | ```html
 61 | <p data-lines="3" class="abstract">Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 62 | <style>
 63 |   .abstract {
 64 |     width: 20rem;
 65 |     font-size: 0.75rem;
 66 |     line-height: 1rem;
 67 |   }
 68 | </style>
 69 | <script>
 70 |   const truncateElement = document.querySelector('.abstract');
 71 |   const truncateText=truncateElement.textContent;
 72 |   const lines = parseInt(truncateElement.dataset.lines);
 73 |   const getLineHeight = function(element) {
 74 |     const lineHeight = window.getComputedStyle(truncateElement)['line-height'];
 75 |     if (lineHeight === 'normal') {
 76 |       return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
 77 |     } else {
 78 |       return parseFloat(lineHeight);
 79 |     }
 80 |   }
 81 |   truncateElement.innerHTML= truncateText;
 82 |   const truncateTextParts= truncateText.split(' ');
 83 |   const lineHeight = getLineHeight(truncateElement);
 84 |   
 85 |   while(lines * lineHeight < truncateElement.clientHeight) {
 86 |     truncateTextParts.pop();
 87 |     truncateElement.innerHTML = truncateTextParts.join(' ') + '…';
 88 |   }
 89 | </script>
 90 | ```
 91 | 
 92 | ### Prefer
 93 | ```html
 94 | <p class="abstract">Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 95 | <style>
 96 |   .abstract {
 97 |     width: 20rem;
 98 |     font-size: 0.75rem;
 99 |     line-height: 1rem;
100 |     max-height: 3rem;
101 |     overflow: hidden;
102 |     display: -webkit-box;
103 |     -webkit-line-clamp: 3;
104 |     -webkit-box-orient: vertical;
105 |   }
106 | </style>
107 | ```
108 | 
109 | ## Prefer native over custom
110 | 
111 | It next to impossible deliver better UX than one, which was provided by browser vendors. You don't have vendor resources, both time and human, and rarely see all underwater rocks and aspects related to the specific problem. Also, native elements usually have much better performance.
112 | 
113 | 1. It takes significantly more time to build a custom solution than use the native one.
114 | 2. You can't integrate into system custom components in the same way native does.
115 | 3. We can't control 3rd party dependencies.
116 | 4. 3rd party libs often add size to the bundle.
117 | 5. You can't predict where 3rd party will fail and don't know to what degree it accessible or support localization and internationalization. 
118 | 6. Native components don't require to load the JS bundle to work. So they are ready for interaction as soon as HTML loaded.
119 | 7. The performance of a native component would generally be much better than a custom one.
120 | 8. New features and updates arrive with browser update.
121 | 9. Both user agents and developers would be more efficient in working with native solutions that custom one. Because it is standard, standards-based, well and widely known.
122 | 
123 | - [Do I need a custom select?](https://doineedacustomselect.com/)
124 | - [Under the spotlight: Select](https://modulz.app/blog/under-the-spotlight-select)
125 | 
126 | ### Avoid
127 | ```html
128 | <div class="details">
129 |   <h2>We are the working dead</h2>
130 |   <div class="details-content">
131 |     Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
132 |   </div>
133 | </div>
134 | <script>
135 |   const toggler = (event) => {
136 |     event.currentTarget.parentNode.classList.toggle("details-open");
137 |   }
138 |   document.querySelectorAll(".details").forEach((element) => {
139 |     element.querySelector("h2").addEventListener("click", toggler);
140 |   });
141 | </script>
142 | <style>
143 |   .details h2 {
144 |     all: unset;
145 |   }
146 |   .details h2::before {
147 |     content: "►";
148 |     margin-right: .5em;
149 |     font-size: small;
150 |     display: inline;
151 |   }
152 |   .details .details-content {
153 |     display: none;
154 |   }
155 |   .details.details-open .details-content {
156 |     display: block;
157 |   }
158 |   .details.details-open h2::before {
159 |     content: "▼";
160 |   }
161 | </style>
162 | ```
163 | 
164 | ### Prefer
165 | ```html
166 | <details>
167 |   <summary>We are the working dead</summary>
168 |   Zombie Ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
169 | </details>
170 | ```
171 | 
172 | ## Prefer valid over invalid
173 | 
174 | Even if it looks fine in your browser, it can look broken entirely in users' one because error correction can work differently in different browsers. Also, it could be misleading for developers who will maintain this code. Potentially valid HTML could be better for SEO and accessibility.
175 | 
176 | - [Why Validate?](https://validator.w3.org/docs/why.html)
177 | - [6 Reasons Why Google Says Valid HTML Matters](https://www.searchenginejournal.com/google-valid-html/)
178 | 
179 | ### Avoid
180 | ```html
181 | <dl>
182 |   <h1>Dictionary</h1>
183 | 
184 |   <dt>Beast of Bodmin</dt>
185 |   <dd>A large feline inhabiting Bodmin Moor.</dd>
186 | 
187 |   <dt>Morgawr</dt>
188 |   <dd>A sea serpent.</dd>
189 | 
190 |   <dt>Owlman</dt>
191 |   <dd>A giant owl-like creature.</dd>
192 | </dl>
193 | ```
194 | 
195 | ### Prefer
196 | ```html
197 | <h1>Dictionary</h1>
198 | 
199 | <dl>
200 |   <dt>Beast of Bodmin</dt>
201 |   <dd>A large feline inhabiting Bodmin Moor.</dd>
202 | 
203 |   <dt>Morgawr</dt>
204 |   <dd>A sea serpent.</dd>
205 | 
206 |   <dt>Owlman</dt>
207 |   <dd>A giant owl-like creature.</dd>
208 | </dl>
209 | ```
210 | 
211 | ## Prefer presentation separated from the structure
212 | 
213 | It is easier to maintain code where structure and presentation are separated. Easier to read and understand it. It is better from an accessibility perspective. Better for SEO.
214 | 
215 | - [Separation: The Web Designer’s Dilemma](https://alistapart.com/article/separationdilemma/)
216 | - [Developing With Web Standards – Recommendations and best practices](https://www.456bereastreet.com/lab/developing_with_web_standards/structure/)
217 | - [Separation of content and presentation](https://en.wikipedia.org/wiki/Separation_of_content_and_presentation)
218 | - [G140: Separating information and structure from presentation to enable different presentations](https://www.w3.org/TR/WCAG20-TECHS/G140.html#:~:text=While%20presentational%20features%20visually%20imply,%2C%20paragraphs%2C%20lists%2C%20etc.&text=Providing%20separate%20structure%2C%20functionality%2C%20and,determined%20via%20the%20structure%20layer.)
219 | 
220 | ### Avoid
221 | ```html
222 | <nav class="breadcrumbs">
223 |   <ol>
224 |     <li><a href="/home/">Home</a></li>
225 |     <li>&rarr;</li>
226 |     <li><a href="/home/cluster/">Cluster</a></li>
227 |     <li>&rarr;</li>
228 |     <li>Service</li>
229 |   </ol>
230 | </nav>
231 | 
232 | <style>
233 |   .breadcrumbs ol{
234 |     display: flex;
235 |     list-style: none;
236 |     align-items: center;
237 |   }
238 |   .breadcrumbs li{
239 |     margin: 0 5px 0 0;
240 |   }
241 | </style>
242 | ```
243 | 
244 | ### Prefer
245 | ```html
246 | <nav class="breadcrumbs">
247 |   <ol>
248 |     <li><a href="/home/">Home</a></li>
249 |     <li><a href="/home/cluster/">Cluster</a></li>
250 |     <li>Service</li>
251 |   </ol>
252 | </nav>
253 | 
254 | <style>
255 |   .breadcrumbs ol{
256 |     display: flex;
257 |     list-style: none;
258 |     align-items: center;
259 |   }
260 |   .breadcrumbs li:not(:last-child):after {
261 |     content: "→";
262 |     margin: 0 5px;
263 |     pointer-events: none;
264 |   }
265 | </style>
266 | ```
267 | 


--------------------------------------------------------------------------------
/README.ru.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://github.com/SilentImp/html/blob/master/README.md">English</a> |
  3 |   <a href="https://github.com/SilentImp/html/blob/master/README.ua.md">Українська</a> |
  4 |   Pусский
  5 | </p>
  6 | 
  7 | # HTML рекомендации и наилучшие практики
  8 | 
  9 | ## Предпочитайте меньшее количество элементов большему
 10 | 
 11 | Большие блоки HTML сложнее читать, понимать и поддерживать. Кроме того, большой DOM может негативно сказаться на производительности.
 12 | 
 13 | - [Avoid an excessive DOM size](https://web.dev/dom-size/)
 14 | 
 15 | ### Нежелательно
 16 | ```html
 17 | <div class="outer-margin">
 18 |   <div class="inner-padding">
 19 |     <p>Мы рабы на галерах.</p>
 20 |   </div>
 21 | </div>
 22 | ```
 23 | 
 24 | ### Предпочтительно
 25 | ```html
 26 | <div class="description">
 27 |   <p>Мы рабы на галерах.</p>
 28 | </div>
 29 | ```
 30 | 
 31 | ## Cемантически корректные элементы предпочтительнее элементов общего назначения
 32 | 
 33 | Семантически корректный HTML легче читать, понимать и поддерживать. Это лучше с точки зрения доступности, например для программ чтения с экрана. Не говоря уже о роботах и парсерах всевозможных мастей, включая поисковых ботов.
 34 | 
 35 | - [The practical value of semantic HTML](https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/)
 36 | - [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
 37 | - [Understanding why Semantic HTML is important, as told by TypeScript.](https://medium.com/@mandy.michael/understanding-why-semantic-html-is-important-as-told-by-typescript-bd71ad41e6c4)
 38 | - [The SEO Advantages of Machine-Readable HTML5 Semantic Markup](https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455)
 39 | - [Semantics in HTML 5](https://alistapart.com/article/semanticsinhtml5/)
 40 | 
 41 | ### Нежелательно
 42 | ```html
 43 | <span>20 минут назад.</span>
 44 | ```
 45 | 
 46 | ### Предпочтительно
 47 | ```html
 48 | <time datetime="2020-09-01T20:00:00">20 минут назад.</time>
 49 | ```
 50 | 
 51 | ## Прогрессивное улучшение и упрощение предпочтительнее, чем сложное или костыльное решение
 52 | 
 53 | Таким образом у нас будет максимально надежное решение, в то время как пользователь получит максимум от использования программного продукта.
 54 | 
 55 | - [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
 56 | - [Do websites need to look exactly the same in every browser?](http://dowebsitesneedtolookexactlythesameineverybrowser.com/)
 57 | 
 58 | ### Нежелательно
 59 | ```html
 60 | <p data-lines="3" class="abstract">Из сорока двух осужденных повстанцев, привезенных одновременно с Бладом на «Ямайском купце», двадцать пять купил Бишоп. Остальные были проданы другим плантаторам — в Спейгстаун и еще дальше на север. Какова была их судьба, Блад не знал; с рабами же Бишопа он общался все время и видел ужасные их страдания.</p>
 61 | <style>
 62 |   .abstract {
 63 |     width: 20rem;
 64 |     font-size: 0.75rem;
 65 |     line-height: 1rem;
 66 |   }
 67 | </style>
 68 | <script>
 69 |   const truncateElement = document.querySelector('.abstract');
 70 |   const truncateText=truncateElement.textContent;
 71 |   const lines = parseInt(truncateElement.dataset.lines);
 72 |   const getLineHeight = function(element) {
 73 |     const lineHeight = window.getComputedStyle(truncateElement)['line-height'];
 74 |     if (lineHeight === 'normal') {
 75 |       return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
 76 |     } else {
 77 |       return parseFloat(lineHeight);
 78 |     }
 79 |   }
 80 |   truncateElement.innerHTML= truncateText;
 81 |   const truncateTextParts= truncateText.split(' ');
 82 |   const lineHeight = getLineHeight(truncateElement);
 83 |   
 84 |   while(lines * lineHeight < truncateElement.clientHeight) {
 85 |     truncateTextParts.pop();
 86 |     truncateElement.innerHTML = truncateTextParts.join(' ') + '…';
 87 |   }
 88 | </script>
 89 | ```
 90 | 
 91 | ### Предпочтительно
 92 | ```html
 93 | <p class="abstract">Из сорока двух осужденных повстанцев, привезенных одновременно с Бладом на «Ямайском купце», двадцать пять купил Бишоп. Остальные были проданы другим плантаторам — в Спейгстаун и еще дальше на север. Какова была их судьба, Блад не знал; с рабами же Бишопа он общался все время и видел ужасные их страдания.</p>
 94 | <style>
 95 |   .abstract {
 96 |     width: 20rem;
 97 |     font-size: 0.75rem;
 98 |     line-height: 1rem;
 99 |     max-height: 3rem;
100 |     overflow: hidden;
101 |     display: -webkit-box;
102 |     -webkit-line-clamp: 3;
103 |     -webkit-box-orient: vertical;
104 |   }
105 | </style>
106 | ```
107 | 
108 | ## Предпочитайте нативное кастомному
109 | 
110 | Практически невозможно создать UX лучше, чем тот, который обеспечивают разработчики браузеров. У вас нет их ресурсов, ни временных, ни человеческих. Нет возможности найти все подводные камни, связанные с решением конкретной проблемы. Не говоря уже о том, что нативные элементы обычно обладают значительно лучшей производительностью.
111 | 
112 | 1. Создание кастомного решения требует значительно больше времени, чем использование нативного.
113 | 2. Кастомное решение нельзя так же глубоко интегрировать с системой, как нативное.
114 | 3. Мы не контролируем сторонние зависимости. 
115 | 4. Сторонние решения часто негативно сказываются на размере бандла.
116 | 5. Нельзя предсказать, где возникнут проблемы в стороннем решении, насколько оно доступно, что с локализацией и интернационализацией. 
117 | 6. Нативным элементам не нужна загрузка JS-бандлов. А это значит, что их можно использовать, как только загружен HTML.
118 | 7. Производительность нативных элементов обычно значительно лучше, чем у кастомных.
119 | 8. Новые возможности появляются с обновлением браузера.
120 | 9. Разработчикам значительно легче работать с нативным решением, чем с кастомным. Нативное решение стандартизовано, а также хорошо и широко известно.
121 | 
122 | - [Do I need a custom select?](https://doineedacustomselect.com/)
123 | - [Under the spotlight: Select](https://modulz.app/blog/under-the-spotlight-select)
124 | 
125 | ### Нежелательно
126 | ```html
127 | <div class="details">
128 |   <h2>Алчность</h2>
129 |   <div class="details-content">
130 |     Каузак равнодушным и циничным взглядом окинул корчившееся в судорогах тело своего вожака. Возможно, дело кончилось бы совсем не так, будь Левасер человеком другого склада. Но тогда, очевидно, и капитан Блад применил бы к нему другую тактику. Сейчас же люди Левасера не питали к нему ни любви, ни жалости. Единственным их побуждением была алчность. Блад искусно сыграл на этой черте их характера, обвинив капитана «Ла Фудр» в самом тяжком преступлении — в присвоении того, что могло быть обращено в золото и поделено между ними.
131 |   </div>
132 | </div>
133 | <script>
134 |   const toggler = (event) => {
135 |     event.currentTarget.parentNode.classList.toggle("details-open");
136 |   }
137 |   document.querySelectorAll(".details").forEach((element) => {
138 |     element.querySelector("h2").addEventListener("click", toggler);
139 |   });
140 | </script>
141 | <style>
142 |   .details h2 {
143 |     all: unset;
144 |   }
145 |   .details h2::before {
146 |     content: "►";
147 |     margin-right: .5em;
148 |     font-size: small;
149 |     display: inline;
150 |   }
151 |   .details .details-content {
152 |     display: none;
153 |   }
154 |   .details.details-open .details-content {
155 |     display: block;
156 |   }
157 |   .details.details-open h2::before {
158 |     content: "▼";
159 |   }
160 | </style>
161 | ```
162 | 
163 | ### Предпочтительно
164 | ```html
165 | <details>
166 |   <summary>Алчность</summary>
167 |   Каузак равнодушным и циничным взглядом окинул корчившееся в судорогах тело своего вожака. Возможно, дело кончилось бы совсем не так, будь Левасер человеком другого склада. Но тогда, очевидно, и капитан Блад применил бы к нему другую тактику. Сейчас же люди Левасера не питали к нему ни любви, ни жалости. Единственным их побуждением была алчность. Блад искусно сыграл на этой черте их характера, обвинив капитана «Ла Фудр» в самом тяжком преступлении — в присвоении того, что могло быть обращено в золото и поделено между ними.
168 | </details>
169 | ```
170 | 
171 | ## Валидный код предпочтительнее невалидного
172 | 
173 | Даже если в вашем браузере всё выглядит хорошо, в браузере пользователя страница может выглядеть сломанной, так как коррекция ошибок работает по-разному в разных браузерах. Кроме того, это может сбить с толку разработчиков, которые будут поддерживать этот код. Потенциально валидный HTML может быть лучше с точки зрения поисковой оптимизации и доступности.
174 | 
175 | - [Why Validate?](https://validator.w3.org/docs/why.html)
176 | - [6 Reasons Why Google Says Valid HTML Matters](https://www.searchenginejournal.com/google-valid-html/)
177 | 
178 | ### Нежелательно
179 | ```html
180 | <dl>
181 |   <h1>Словарь</h1>
182 | 
183 |   <dt>Секстант</dt>
184 |   <dd>Навигационный измерительный инструмент, используемый для определения высоты Солнца и других космических объектов над горизонтом</dd>
185 | 
186 |   <dt>Ванты</dt>
187 |   <dd>Снасти стоячего такелажа, которыми укрепляются мачты, стеньги и брам-стеньги с бортов судна</dd>
188 | 
189 |   <dt>Стаксель</dt>
190 |   <dd>Треугольный парус</dd>
191 | </dl>
192 | ```
193 | 
194 | ### Предпочтительно
195 | ```html
196 | <h1>Словарь</h1>
197 | 
198 | <dl>
199 |   <dt>Секстант</dt>
200 |   <dd>Навигационный измерительный инструмент, используемый для определения высоты Солнца и других космических объектов над горизонтом</dd>
201 | 
202 |   <dt>Ванты</dt>
203 |   <dd>Снасти стоячего такелажа, которыми укрепляются мачты, стеньги и брам-стеньги с бортов судна</dd>
204 | 
205 |   <dt>Стаксель</dt>
206 |   <dd>Треугольный парус</dd>
207 | </dl>
208 | ```
209 | 
210 | ## Предпочтительно разделять структуру и представление
211 | 
212 | Легче поддерживать код, в котором структура и представление разделены. Его проще читать и понимать. Это лучше с точки зрения доступности. Лучше с точки зрения поисковой оптимизации. 
213 | 
214 | - [Separation: The Web Designer’s Dilemma](https://alistapart.com/article/separationdilemma/)
215 | - [Developing With Web Standards – Recommendations and best practices](https://www.456bereastreet.com/lab/developing_with_web_standards/structure/)
216 | - [Separation of content and presentation](https://en.wikipedia.org/wiki/Separation_of_content_and_presentation)
217 | - [G140: Separating information and structure from presentation to enable different presentations](https://www.w3.org/TR/WCAG20-TECHS/G140.html#:~:text=While%20presentational%20features%20visually%20imply,%2C%20paragraphs%2C%20lists%2C%20etc.&text=Providing%20separate%20structure%2C%20functionality%2C%20and,determined%20via%20the%20structure%20layer.)
218 | 
219 | ### Нежелательно
220 | ```html
221 | <nav class="breadcrumbs">
222 |   <ol>
223 |     <li><a href="/home/">Главная</a></li>
224 |     <li>&rarr;</li>
225 |     <li><a href="/home/cluster/">Кластер</a></li>
226 |     <li>&rarr;</li>
227 |     <li>Сервис</li>
228 |   </ol>
229 | </nav>
230 | 
231 | <style>
232 |   .breadcrumbs ol{
233 |     display: flex;
234 |     list-style: none;
235 |     align-items: center;
236 |   }
237 |   .breadcrumbs li{
238 |     margin: 0 5px 0 0;
239 |   }
240 | </style>
241 | ```
242 | 
243 | ### Предпочтительно
244 | ```html
245 | <nav class="breadcrumbs">
246 |   <ol>
247 |     <li><a href="/home/">Главная</a></li>
248 |     <li><a href="/home/cluster/">Кластер</a></li>
249 |     <li>Сервис</li>
250 |   </ol>
251 | </nav>
252 | 
253 | <style>
254 |   .breadcrumbs ol{
255 |     display: flex;
256 |     list-style: none;
257 |     align-items: center;
258 |   }
259 |   .breadcrumbs li:not(:last-child):after {
260 |     content: "→";
261 |     margin: 0 5px;
262 |     pointer-events: none;
263 |   }
264 | </style>
265 | ```
266 | 


--------------------------------------------------------------------------------
/README.ua.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://github.com/SilentImp/html/blob/master/README.md">English</a> |
  3 |   Українська |
  4 |   <a href="https://github.com/SilentImp/html/blob/master/README.ru.md">Pусский</a>
  5 | </p>
  6 | 
  7 | # HTML рекомендації та найкращі практики
  8 | 
  9 | ## Надавайте перевагу меншій кількості елементів над більшою
 10 | 
 11 | Великі блоки HTML складніше читати, розуміти та підтримувати. Окрім цього, великий DOM може негативно впливати на продуктивність.
 12 | 
 13 | - [Avoid an excessive DOM size](https://web.dev/dom-size/)
 14 | 
 15 | ### Уникайте
 16 | 
 17 | ```html
 18 | <div class="outer-margin">
 19 |   <div class="inner-padding">
 20 |     <p>Ані муки, ні кайдани — Дух зломить не зможуть твій.</p>
 21 |   </div>
 22 | </div>
 23 | ```
 24 | 
 25 | ### Надавайте перевагу
 26 | 
 27 | ```html
 28 | <div class="description">
 29 |   <p>Ані муки, ні кайдани — Дух зломить не зможуть твій.</p>
 30 | </div>
 31 | ```
 32 | 
 33 | ## Надавайте перевагу елементам, що мають відповідне семантичне значення над елементами загального призначення 
 34 | 
 35 | Семантично коректний HTML легше читати, розуміти та підтримувати. Це краще з точки зору доступності, нариклад для програм читання з екрану. Не кажучи вже про роботів та всіляких парсерів, включаючи пошукових ботів.
 36 | 
 37 | - [The practical value of semantic HTML](https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/)
 38 | - [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
 39 | - [Understanding why Semantic HTML is important, as told by TypeScript.](https://medium.com/@mandy.michael/understanding-why-semantic-html-is-important-as-told-by-typescript-bd71ad41e6c4)
 40 | - [The SEO Advantages of Machine-Readable HTML5 Semantic Markup](https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455)
 41 | - [Semantics in HTML 5](https://alistapart.com/article/semanticsinhtml5/)
 42 | 
 43 | ### Уникайте
 44 | ```html
 45 | <span>20 хвилин тому.</span>
 46 | ```
 47 | 
 48 | ### Надавайте перевагу
 49 | ```html
 50 | <time datetime="2020-09-01T20:00:00">20 хвилин тому.</time>
 51 | ```
 52 | 
 53 | ## Надавайте перевагу прогресивному покращенню і спрощенню над складними та костурбатими рішеннями
 54 | 
 55 | Таким чином ми матимемо надійне рішення, а користувач водночас отримає максимум, який дозволяє його платформа, від програмного продукту.
 56 | 
 57 | - [Progressive Enhancement: What It Is, And How To Use It?](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
 58 | - [Do websites need to look exactly the same in every browser?](http://dowebsitesneedtolookexactlythesameineverybrowser.com/)
 59 | 
 60 | ### Уникайте
 61 | ```html
 62 | <p data-lines="3" class="abstract">Коли замовкли стріли пістолів і одспівали весілля, а жінка пригнала до загороди вівці й корови, Іван був задоволений навіть. Його Палагна була з багацького роду, фудульна, здорова дівка, з грубим носом й воластою шиєю. Правда, вона любила пишне лудіння, і немало десь піде грошей на шовкові хустки та дорогі згарди, але то байка! Поглядаючи на овечки, що блеяли в загородах, на свій писаний ботей (стадо), на корови, що дзвонили та рули по випасах в лісі,— він не журився.</p>
 63 | <style>
 64 |   .abstract {
 65 |     width: 20rem;
 66 |     font-size: 0.75rem;
 67 |     line-height: 1rem;
 68 |   }
 69 | </style>
 70 | <script>
 71 |   const truncateElement = document.querySelector('.abstract');
 72 |   const truncateText=truncateElement.textContent;
 73 |   const lines = parseInt(truncateElement.dataset.lines);
 74 |   const getLineHeight = function(element) {
 75 |     const lineHeight = window.getComputedStyle(truncateElement)['line-height'];
 76 |     if (lineHeight === 'normal') {
 77 |       return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
 78 |     } else {
 79 |       return parseFloat(lineHeight);
 80 |     }
 81 |   }
 82 |   truncateElement.innerHTML= truncateText;
 83 |   const truncateTextParts= truncateText.split(' ');
 84 |   const lineHeight = getLineHeight(truncateElement);
 85 |   
 86 |   while(lines * lineHeight < truncateElement.clientHeight) {
 87 |     truncateTextParts.pop();
 88 |     truncateElement.innerHTML = truncateTextParts.join(' ') + '…';
 89 |   }
 90 | </script>
 91 | ```
 92 | 
 93 | ### Надавайте перевагу
 94 | ```html
 95 | <p class="abstract">Коли замовкли стріли пістолів і одспівали весілля, а жінка пригнала до загороди вівці й корови, Іван був задоволений навіть. Його Палагна була з багацького роду, фудульна, здорова дівка, з грубим носом й воластою шиєю. Правда, вона любила пишне лудіння, і немало десь піде грошей на шовкові хустки та дорогі згарди, але то байка! Поглядаючи на овечки, що блеяли в загородах, на свій писаний ботей, на корови, що дзвонили та рули по випасах в лісі,— він не журився.</p>
 96 | <style>
 97 |   .abstract {
 98 |     width: 20rem;
 99 |     font-size: 0.75rem;
100 |     line-height: 1rem;
101 |     max-height: 3rem;
102 |     overflow: hidden;
103 |     display: -webkit-box;
104 |     -webkit-line-clamp: 3;
105 |     -webkit-box-orient: vertical;
106 |   }
107 | </style>
108 | ```
109 | 
110 | ## Надавайте перевагу нативному над кастомним 
111 | 
112 | Майже неможливо зробити UX кращим за той, який забезпечують розробники браузерів. Ми не маємо їх ресурсів: ні часу, ні людей. Неможливо знайти всі підводні камені, пов'язані з вирішенням конкретної проблеми. Не кажучи вже про те, що нативні елементи зазвичай значно продуктивніші.
113 | 
114 | 1. Створення кастомного рішення потребує значно більше часу, ніж використання нативного.
115 | 2. Кастомне рішення неможливо так само глибоко інтегрувати із системою, як нативне. 
116 | 3. Ми не контролюємо зовнішні залежності. 
117 | 4. Зовнішні рішення часто-густо погано впливають на розмір бандла.
118 | 5. Неможливо передбачити, де виникнуть проблеми в зовнішньому рішенні, чи воно доступне, що з локалізацією та інтернаціоналізацією.
119 | 6. Нативним елементам не потрібне завантаження JS-бандлів. Отже, вони готові до використання одразу як завантажиться HTML.
120 | 7. Продуктивність нативних елементів зазвичай значно краща, ніж кастомних.
121 | 8. Нові можливості та виправлені помилки користувач отримує з оновленням браузеру.
122 | 9. Розробникам легше працювати з нативним рішенням, ніж з кастомним. Бо воно стандартизоване і поширене.
123 | 
124 | - [Do I need a custom select?](https://doineedacustomselect.com/)
125 | - [Under the spotlight: Select](https://modulz.app/blog/under-the-spotlight-select)
126 | 
127 | ### Уникайте
128 | ```html
129 | <div class="details">
130 |   <h2>Cокира</h2>
131 |   <div class="details-content">
132 |     Вони обоє знали, що то бродить по лісі невидима сокира, гупа об дерева і хека з втомлених грудей. Ляк проганяв їх звідти в долину, де потік плив спокійніше. Вони робили собі курбало у потоці, глибоке місце, і, роздягтись, бовтались в нім, як двоє лісних звірят, що не знають, що таке сором. Сонце спочивало на їх яснім волоссі і било в очі, а льодова вода потоку щипала тіло.
133 |   </div>
134 | </div>
135 | <script>
136 |   const toggler = (event) => {
137 |     event.currentTarget.parentNode.classList.toggle("details-open");
138 |   }
139 |   document.querySelectorAll(".details").forEach((element) => {
140 |     element.querySelector("h2").addEventListener("click", toggler);
141 |   });
142 | </script>
143 | <style>
144 |   .details h2 {
145 |     all: unset;
146 |   }
147 |   .details h2::before {
148 |     content: "►";
149 |     margin-right: .5em;
150 |     font-size: small;
151 |     display: inline;
152 |   }
153 |   .details .details-content {
154 |     display: none;
155 |   }
156 |   .details.details-open .details-content {
157 |     display: block;
158 |   }
159 |   .details.details-open h2::before {
160 |     content: "▼";
161 |   }
162 | </style>
163 | ```
164 | 
165 | ### Надавайте перевагу
166 | ```html
167 | <details>
168 |   <summary>Cокира</summary>
169 |   Вони обоє знали, що то бродить по лісі невидима сокира, гупа об дерева і хека з втомлених грудей. Ляк проганяв їх звідти в долину, де потік плив спокійніше. Вони робили собі курбало у потоці, глибоке місце, і, роздягтись, бовтались в нім, як двоє лісних звірят, що не знають, що таке сором. Сонце спочивало на їх яснім волоссі і било в очі, а льодова вода потоку щипала тіло.
170 | </details>
171 | ```
172 | 
173 | ## Надавайте перевагу валідному коду
174 | 
175 | Навіть якщо у вашому браузері все виглядає добре, у браузері користувача сторінка може виглядати зламаною, бо корекція помилок працює по-різному в різних браузерах. Окрім цього, це може збити з пантелику розробників, котрі будуть супроводжувати ваш код. Потенційно валідний HTML може бути корисним з точки зору пошукової оптимізації та доступності.
176 | 
177 | - [Why Validate?](https://validator.w3.org/docs/why.html)
178 | - [6 Reasons Why Google Says Valid HTML Matters](https://www.searchenginejournal.com/google-valid-html/)
179 | 
180 | ### Уникайте
181 | ```html
182 | <dl>
183 |   <h1>Словник</h1>
184 | 
185 |   <dt>Котюга</dt>
186 |   <dd>Пес</dd>
187 | 
188 |   <dt>Дроб'єта</dt>
189 |   <dd>Вівці і кози, дрібна худоба</dd>
190 | 
191 |   <dt>Помана</dt>
192 |   <dd>Посмертний дарунок, спадщина худобою. Це від слів «поминати, згадувати»</dd>
193 | </dl>
194 | ```
195 | 
196 | ### Надавайте перевагу
197 | ```html
198 | <h1>Словник</h1>
199 | 
200 | <dl>
201 |   <dt>Котюга</dt>
202 |   <dd>Пес</dd>
203 | 
204 |   <dt>Дроб'єта</dt>
205 |   <dd>Вівці і кози, дрібна худоба</dd>
206 | 
207 |   <dt>Помана</dt>
208 |   <dd>Посмертний дарунок, спадщина худобою. Це від слів «поминати, згадувати»</dd>
209 | </dl>
210 | ```
211 | 
212 | ## Надавайте перевагу презентації, відокремленій від структури
213 | 
214 | Легше розуміти та підтримувати код, у якому структура та презентація відокремлені. Це краще для доступності. Добре з точки зору пошукової оптимізації.
215 | 
216 | - [Separation: The Web Designer’s Dilemma](https://alistapart.com/article/separationdilemma/)
217 | - [Developing With Web Standards – Recommendations and best practices](https://www.456bereastreet.com/lab/developing_with_web_standards/structure/)
218 | - [Separation of content and presentation](https://en.wikipedia.org/wiki/Separation_of_content_and_presentation)
219 | - [G140: Separating information and structure from presentation to enable different presentations](https://www.w3.org/TR/WCAG20-TECHS/G140.html#:~:text=While%20presentational%20features%20visually%20imply,%2C%20paragraphs%2C%20lists%2C%20etc.&text=Providing%20separate%20structure%2C%20functionality%2C%20and,determined%20via%20the%20structure%20layer.)
220 | 
221 | ### Уникайте
222 | ```html
223 | <nav class="breadcrumbs">
224 |   <ol>
225 |     <li><a href="/home/">Головна</a></li>
226 |     <li>&rarr;</li>
227 |     <li><a href="/home/cluster/">Кластер</a></li>
228 |     <li>&rarr;</li>
229 |     <li>Сервіс</li>
230 |   </ol>
231 | </nav>
232 | 
233 | <style>
234 |   .breadcrumbs ol{
235 |     display: flex;
236 |     list-style: none;
237 |     align-items: center;
238 |   }
239 |   .breadcrumbs li{
240 |     margin: 0 5px 0 0;
241 |   }
242 | </style>
243 | ```
244 | 
245 | ### Надавайте перевагу
246 | ```html
247 | <nav class="breadcrumbs">
248 |   <ol>
249 |     <li><a href="/home/">Головна</a></li>
250 |     <li><a href="/home/cluster/">Кластер</a></li>
251 |     <li>Сервіс</li>
252 |   </ol>
253 | </nav>
254 | 
255 | <style>
256 |   .breadcrumbs ol{
257 |     display: flex;
258 |     list-style: none;
259 |     align-items: center;
260 |   }
261 |   .breadcrumbs li:not(:last-child):after {
262 |     content: "→";
263 |     margin: 0 5px;
264 |     pointer-events: none;
265 |   }
266 | </style>
267 | ```
268 | 


--------------------------------------------------------------------------------