diff --git a/README.md b/README.md index 528abaf..d0024da 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ -Read this in other languages: English | [Pусский](https://github.com/SilentImp/html/blob/master/README.ru.md) - +

+ English | + Українська | + Pусский +

# HTML recommendations and best practices @@ -21,7 +24,9 @@ It is harder to read, understand, and maintain large HTML blocks. Another reason ### Prefer ```html -

We are the working dead

+
+

We are the working dead

+
``` ## Prefer semantic elements over non-semantic diff --git a/README.ru.md b/README.ru.md index e73f5ca..a470b90 100644 --- a/README.ru.md +++ b/README.ru.md @@ -1,4 +1,8 @@ -На других языках: [English](https://github.com/SilentImp/html/blob/master/README.md) | Pусский +

+ English | + Українська | + Pусский +

# HTML рекомендации и наилучшие практики @@ -19,7 +23,9 @@ ### Предпочтительно ```html -

Мы рабы на галерах.

+
+

Мы рабы на галерах.

+
``` ## Cемантически корректные элементы предпочтительнее элементов общего назначения diff --git a/README.ua.md b/README.ua.md new file mode 100644 index 0000000..10bdb4b --- /dev/null +++ b/README.ua.md @@ -0,0 +1,267 @@ +

+ English | + Українська | + Pусский +

+ +# HTML рекомендації та найкращі практики + +## Надавайте перевагу меншій кількості елементів над більшою + +Великі блоки HTML складніше читати, розуміти та підтримувати. Окрім цього, великий DOM може негативно впливати на продуктивність. + +- [Avoid an excessive DOM size](https://web.dev/dom-size/) + +### Уникайте + +```html +
+
+

Ані муки, ні кайдани — Дух зломить не зможуть твій.

+
+
+``` + +### Надавайте перевагу + +```html +
+

Ані муки, ні кайдани — Дух зломить не зможуть твій.

+
+``` + +## Надавайте перевагу елементам, що мають відповідне семантичне значення над елементами загального призначення + +Семантично коректний HTML легше читати, розуміти та підтримувати. Це краще з точки зору доступності, нариклад для програм читання з екрану. Не кажучи вже про роботів та всіляких парсерів, включаючи пошукових ботів. + +- [The practical value of semantic HTML](https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/) +- [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) +- [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) +- [The SEO Advantages of Machine-Readable HTML5 Semantic Markup](https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455) +- [Semantics in HTML 5](https://alistapart.com/article/semanticsinhtml5/) + +### Уникайте +```html +20 хвилин тому. +``` + +### Надавайте перевагу +```html + +``` + +## Надавайте перевагу прогресивному покращенню і спрощенню над складними та костурбатими рішеннями + +Таким чином ми матимемо надійне рішення, а користувач водночас отримає максимум, який дозволяє його платформа, від програмного продукту. + +- [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/) +- [Do websites need to look exactly the same in every browser?](http://dowebsitesneedtolookexactlythesameineverybrowser.com/) + +### Уникайте +```html +

Коли замовкли стріли пістолів і одспівали весілля, а жінка пригнала до загороди вівці й корови, Іван був задоволений навіть. Його Палагна була з багацького роду, фудульна, здорова дівка, з грубим носом й воластою шиєю. Правда, вона любила пишне лудіння, і немало десь піде грошей на шовкові хустки та дорогі згарди, але то байка! Поглядаючи на овечки, що блеяли в загородах, на свій писаний ботей (стадо), на корови, що дзвонили та рули по випасах в лісі,— він не журився.

+ + +``` + +### Надавайте перевагу +```html +

Коли замовкли стріли пістолів і одспівали весілля, а жінка пригнала до загороди вівці й корови, Іван був задоволений навіть. Його Палагна була з багацького роду, фудульна, здорова дівка, з грубим носом й воластою шиєю. Правда, вона любила пишне лудіння, і немало десь піде грошей на шовкові хустки та дорогі згарди, але то байка! Поглядаючи на овечки, що блеяли в загородах, на свій писаний ботей, на корови, що дзвонили та рули по випасах в лісі,— він не журився.

+ +``` + +## Надавайте перевагу нативному над кастомним + +Майже неможливо зробити UX кращим за той, який забезпечують розробники браузерів. Ми не маємо їх ресурсів: ні часу, ні людей. Неможливо знайти всі підводні камені, пов'язані з вирішенням конкретної проблеми. Не кажучи вже про те, що нативні елементи зазвичай значно продуктивніші. + +1. Створення кастомного рішення потребує значно більше часу, ніж використання нативного. +2. Кастомне рішення неможливо так само глибоко інтегрувати із системою, як нативне. +3. Ми не контролюємо зовнішні залежності. +4. Зовнішні рішення часто-густо погано впливають на розмір бандла. +5. Неможливо передбачити, де виникнуть проблеми в зовнішньому рішенні, чи воно доступне, що з локалізацією та інтернаціоналізацією. +6. Нативним елементам не потрібне завантаження JS-бандлів. Отже, вони готові до використання одразу як завантажиться HTML. +7. Продуктивність нативних елементів зазвичай значно краща, ніж кастомних. +8. Нові можливості та виправлені помилки користувач отримує з оновленням браузеру. +9. Розробникам легше працювати з нативним рішенням, ніж з кастомним. Бо воно стандартизоване і поширене. + +- [Do I need a custom select?](https://doineedacustomselect.com/) +- [Under the spotlight: Select](https://modulz.app/blog/under-the-spotlight-select) + +### Уникайте +```html +
+

Cокира

+
+ Вони обоє знали, що то бродить по лісі невидима сокира, гупа об дерева і хека з втомлених грудей. Ляк проганяв їх звідти в долину, де потік плив спокійніше. Вони робили собі курбало у потоці, глибоке місце, і, роздягтись, бовтались в нім, як двоє лісних звірят, що не знають, що таке сором. Сонце спочивало на їх яснім волоссі і било в очі, а льодова вода потоку щипала тіло. +
+
+ + +``` + +### Надавайте перевагу +```html +
+ Cокира + Вони обоє знали, що то бродить по лісі невидима сокира, гупа об дерева і хека з втомлених грудей. Ляк проганяв їх звідти в долину, де потік плив спокійніше. Вони робили собі курбало у потоці, глибоке місце, і, роздягтись, бовтались в нім, як двоє лісних звірят, що не знають, що таке сором. Сонце спочивало на їх яснім волоссі і било в очі, а льодова вода потоку щипала тіло. +
+``` + +## Надавайте перевагу валідному коду + +Навіть якщо у вашому браузері все виглядає добре, у браузері користувача сторінка може виглядати зламаною, бо корекція помилок працює по-різному в різних браузерах. Окрім цього, це може збити з пантелику розробників, котрі будуть супроводжувати ваш код. Потенційно валідний HTML може бути корисним з точки зору пошукової оптимізації та доступності. + +- [Why Validate?](https://validator.w3.org/docs/why.html) +- [6 Reasons Why Google Says Valid HTML Matters](https://www.searchenginejournal.com/google-valid-html/) + +### Уникайте +```html +
+

Словник

+ +
Котюга
+
Пес
+ +
Дроб'єта
+
Вівці і кози, дрібна худоба
+ +
Помана
+
Посмертний дарунок, спадщина худобою. Це від слів «поминати, згадувати»
+
+``` + +### Надавайте перевагу +```html +

Словник

+ +
+
Котюга
+
Пес
+ +
Дроб'єта
+
Вівці і кози, дрібна худоба
+ +
Помана
+
Посмертний дарунок, спадщина худобою. Це від слів «поминати, згадувати»
+
+``` + +## Надавайте перевагу презентації, відокремленій від структури + +Легше розуміти та підтримувати код, у якому структура та презентація відокремлені. Це краще для доступності. Добре з точки зору пошукової оптимізації. + +- [Separation: The Web Designer’s Dilemma](https://alistapart.com/article/separationdilemma/) +- [Developing With Web Standards – Recommendations and best practices](https://www.456bereastreet.com/lab/developing_with_web_standards/structure/) +- [Separation of content and presentation](https://en.wikipedia.org/wiki/Separation_of_content_and_presentation) +- [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.) + +### Уникайте +```html + + + +``` + +### Надавайте перевагу +```html + + + +``` diff --git a/rus.md b/rus.md deleted file mode 100644 index e73f5ca..0000000 --- a/rus.md +++ /dev/null @@ -1,259 +0,0 @@ -На других языках: [English](https://github.com/SilentImp/html/blob/master/README.md) | Pусский - -# HTML рекомендации и наилучшие практики - -## Предпочитайте меньшее количество элементов большему - -Большие блоки HTML сложнее читать, понимать и поддерживать. Кроме того, большой DOM может негативно сказаться на производительности. - -- [Avoid an excessive DOM size](https://web.dev/dom-size/) - -### Нежелательно -```html -
-
-

Мы рабы на галерах.

-
-
-``` - -### Предпочтительно -```html -

Мы рабы на галерах.

-``` - -## Cемантически корректные элементы предпочтительнее элементов общего назначения - -Семантически корректный HTML легче читать, понимать и поддерживать. Это лучше с точки зрения доступности, например для программ чтения с экрана. Не говоря уже о роботах и парсерах всевозможных мастей, включая поисковых ботов. - -- [The practical value of semantic HTML](https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/) -- [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) -- [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) -- [The SEO Advantages of Machine-Readable HTML5 Semantic Markup](https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455) -- [Semantics in HTML 5](https://alistapart.com/article/semanticsinhtml5/) - -### Нежелательно -```html -20 минут назад. -``` - -### Предпочтительно -```html - -``` - -## Прогрессивное улучшение и упрощение предпочтительнее, чем сложное или костыльное решение - -Таким образом у нас будет максимально надежное решение, в то время как пользователь получит максимум от использования программного продукта. - -- [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/) -- [Do websites need to look exactly the same in every browser?](http://dowebsitesneedtolookexactlythesameineverybrowser.com/) - -### Нежелательно -```html -

Из сорока двух осужденных повстанцев, привезенных одновременно с Бладом на «Ямайском купце», двадцать пять купил Бишоп. Остальные были проданы другим плантаторам — в Спейгстаун и еще дальше на север. Какова была их судьба, Блад не знал; с рабами же Бишопа он общался все время и видел ужасные их страдания.

- - -``` - -### Предпочтительно -```html -

Из сорока двух осужденных повстанцев, привезенных одновременно с Бладом на «Ямайском купце», двадцать пять купил Бишоп. Остальные были проданы другим плантаторам — в Спейгстаун и еще дальше на север. Какова была их судьба, Блад не знал; с рабами же Бишопа он общался все время и видел ужасные их страдания.

- -``` - -## Предпочитайте нативное кастомному - -Практически невозможно создать UX лучше, чем тот, который обеспечивают разработчики браузеров. У вас нет их ресурсов, ни временных, ни человеческих. Нет возможности найти все подводные камни, связанные с решением конкретной проблемы. Не говоря уже о том, что нативные элементы обычно обладают значительно лучшей производительностью. - -1. Создание кастомного решения требует значительно больше времени, чем использование нативного. -2. Кастомное решение нельзя так же глубоко интегрировать с системой, как нативное. -3. Мы не контролируем сторонние зависимости. -4. Сторонние решения часто негативно сказываются на размере бандла. -5. Нельзя предсказать, где возникнут проблемы в стороннем решении, насколько оно доступно, что с локализацией и интернационализацией. -6. Нативным элементам не нужна загрузка JS-бандлов. А это значит, что их можно использовать, как только загружен HTML. -7. Производительность нативных элементов обычно значительно лучше, чем у кастомных. -8. Новые возможности появляются с обновлением браузера. -9. Разработчикам значительно легче работать с нативным решением, чем с кастомным. Нативное решение стандартизовано, а также хорошо и широко известно. - -- [Do I need a custom select?](https://doineedacustomselect.com/) -- [Under the spotlight: Select](https://modulz.app/blog/under-the-spotlight-select) - -### Нежелательно -```html -
-

Алчность

-
- Каузак равнодушным и циничным взглядом окинул корчившееся в судорогах тело своего вожака. Возможно, дело кончилось бы совсем не так, будь Левасер человеком другого склада. Но тогда, очевидно, и капитан Блад применил бы к нему другую тактику. Сейчас же люди Левасера не питали к нему ни любви, ни жалости. Единственным их побуждением была алчность. Блад искусно сыграл на этой черте их характера, обвинив капитана «Ла Фудр» в самом тяжком преступлении — в присвоении того, что могло быть обращено в золото и поделено между ними. -
-
- - -``` - -### Предпочтительно -```html -
- Алчность - Каузак равнодушным и циничным взглядом окинул корчившееся в судорогах тело своего вожака. Возможно, дело кончилось бы совсем не так, будь Левасер человеком другого склада. Но тогда, очевидно, и капитан Блад применил бы к нему другую тактику. Сейчас же люди Левасера не питали к нему ни любви, ни жалости. Единственным их побуждением была алчность. Блад искусно сыграл на этой черте их характера, обвинив капитана «Ла Фудр» в самом тяжком преступлении — в присвоении того, что могло быть обращено в золото и поделено между ними. -
-``` - -## Валидный код предпочтительнее невалидного - -Даже если в вашем браузере всё выглядит хорошо, в браузере пользователя страница может выглядеть сломанной, так как коррекция ошибок работает по-разному в разных браузерах. Кроме того, это может сбить с толку разработчиков, которые будут поддерживать этот код. Потенциально валидный HTML может быть лучше с точки зрения поисковой оптимизации и доступности. - -- [Why Validate?](https://validator.w3.org/docs/why.html) -- [6 Reasons Why Google Says Valid HTML Matters](https://www.searchenginejournal.com/google-valid-html/) - -### Нежелательно -```html -
-

Словарь

- -
Секстант
-
Навигационный измерительный инструмент, используемый для определения высоты Солнца и других космических объектов над горизонтом
- -
Ванты
-
Снасти стоячего такелажа, которыми укрепляются мачты, стеньги и брам-стеньги с бортов судна
- -
Стаксель
-
Треугольный парус
-
-``` - -### Предпочтительно -```html -

Словарь

- -
-
Секстант
-
Навигационный измерительный инструмент, используемый для определения высоты Солнца и других космических объектов над горизонтом
- -
Ванты
-
Снасти стоячего такелажа, которыми укрепляются мачты, стеньги и брам-стеньги с бортов судна
- -
Стаксель
-
Треугольный парус
-
-``` - -## Предпочтительно разделять структуру и представление - -Легче поддерживать код, в котором структура и представление разделены. Его проще читать и понимать. Это лучше с точки зрения доступности. Лучше с точки зрения поисковой оптимизации. - -- [Separation: The Web Designer’s Dilemma](https://alistapart.com/article/separationdilemma/) -- [Developing With Web Standards – Recommendations and best practices](https://www.456bereastreet.com/lab/developing_with_web_standards/structure/) -- [Separation of content and presentation](https://en.wikipedia.org/wiki/Separation_of_content_and_presentation) -- [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.) - -### Нежелательно -```html - - - -``` - -### Предпочтительно -```html - - - -```