HTML5

С таким провокационным призывом на днях обратился к своим читателям в Твиттере не кто-нибудь, а Таб Аткинс, главный редактор львиной доли спецификаций CSS. Конечно, речь шла не о любых тегах, а об опциональных (необязательных), которые разрешает не ставить сам стандарт HTML. Но всё равно призыв Таба многих шокировал, очень уж вразрез он шел со всем, чему нас учили с самого начала веб-карьеры.

Может, Таб просто всех троллил? Или же в его совете есть рациональное зерно? Попробуем непредвзято разобраться.

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона

Вчера был интересный разговор, который начала Сара Суайдан:

твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36:

Вот что я хотела бы увидеть в HTML:
<color value=“” />
Просто. Чрезвычайно полезно, особ. для дизайн-систем сегодня.

Тут, пока никто второпях не подумал «но ведь цвет — это не контент, а оформление!», Сара говорила о страницах с палитрами образцов цвета. В этом случае цвета — именно контент. Кажется, что это хороший кандидат в семантические элементы, потому что у него есть значение.

На правах Древнего Старожила Веба, я сел и пораздумывал над этим.

Перевод статьи Understanding why Semantic HTML is important, as told by TypeScript с сайта medium.com для css-live.ru, автор — Мэнди Майкл

HTML не просто скелет наших сайтов, он также крайне важен для того, чтобы сайты вели себя как полагалось на всех платформах и технологиях. Если с самого начала использовать HTML в полной мере, то можно не просто извлечь максимум из нативных функций, но также сделать его намного удобнее для людей, ботов и любых технологий, как сегодня, так и в будущем.

Из-за того, что внимание во фронтенд-разработке всё больше сосредотачивается на JavaScript, а про HTML все как будто забывают, недавно мне пришлось потратить какое-то время, пытаясь понять, как объяснить разработчикам, нацеленным на JavaScript, почему важно изучать и понимать HTML

Это натолкнуло меня на идею:

«Почему семантический HTML важен, и как Typescript помогает это понять»

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон

Github: ссылки или кнопки?

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.

Перевод статьи «The Document Outline Dilemma» с сайта css-tricks.com, опубликовано на css-live.ru с разрешения автора — Амелии Беллами-Ройдз

В последние несколько недель среди веб-стандартистов было много разговоров о HTML-заголовках. Возможно, вы видели какие-то записи в блогах, твиты и обсуждения разных ишью на Гитхабе. Заголовки — часть HTML начиная с самых первых сайтов в ЦЕРНе, так что может показаться странным, что спустя 25 лет в них нашлись какие-то противоречия. Я хочу сначала вкратце рассказать, почему это всё еще стоит обсуждения, а потом добавить собственные соображения по теме. Если вы сами следили за недавней дискуссией, можете перейти сразу к разделу «Более важная дилемма».

Перевод статьи Do we need a new heading element? We don’t know с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда.

В спецификацию HTML предлагают добавить новый элемент <h>. Это решает довольно частую задачу. Возьмем такой пример HTML:

Перевод статьи Understanding semantics с сайта tink.uk, опубликовано на css-live.ru с разрешения автора — Леони Уотсон.

Слово «семантический» уже слилось с веб-разработкой. Мы произносим «семантический код» и «семантика» элемента, но что это значит на самом деле и почему так важно?

Слово семантика происходит от французского «semantique» — «несопоставимый». А в английском у него есть три значения:

Перевод статьи Regressive Web Apps с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

На конференции Google I/O в этом году было немало докладов о разработке для веба. Приятная перемена по сравнению с прошлыми годами, когда о вебе едва вспоминали и можно было скорей подумать, что  Google I/O — конференция для разработчиков приложений под Андроид.

Последняя конференция показала, что Гугл очень большой и у него нет какой-то единой генеральной линии по поводу веба и нативных приложений. Хотя были доклады о сервис-воркерах и производительности для веба, были также представлены «Мгновенные Андроид-приложения» — неприкрытая атака на веб. Если вас раздражало, что сайты назойливо тыкали вам под нос всплывающие окошки с предложением установить их приложения, то подождите, скоро они смогут и не спрашивать.

Перевод статьи BEMantic: DRY Like You Mean It с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Мэтта Стоу.

Недавняя статья Тима Бакстера на A List Apart, «Осмысленный CSS: описывайте стилями свою логику», подбросила дровишек в костер тому мнению, будто фронтендеры, предпочитающие объектно-ориентированный подход к CSS (БЭМ или что-то вроде), как-то напрочь забывают о семантической разметке и доступности.

Лично я считаю, что так думать просто обидно. Не понимаю, почему БЭМ и семантику HTML считают взаимоисключающими. Я тешу себя надеждой, что я хороший разработчик: я горжусь как своим HTML (включая семантику и ARIA-атрибуты), так и своим CSS, где вовсю используются Sass и БЭМ.

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не раз, да и сам порой не удерживался от крепкого словца по такому поводу. Мы особенно уязвимы для неудачных аргументов, поскольку привыкли считать себя логичными. Как же сильно мы порой заблуждаемся.

В этой статье я собираюсь изложить несколько часто встречавшихся мне заблуждений, и я приглашаю вас делиться своими. Некоторые из моих примеров сокращены до условности, так что смело ругайте меня, что я «пинаю соломенное чучело», если они задели вас.

Перевод статьи Easy content organisation with HTML5  с сайта paciellogroup.com, опубликовано на css-live.ru с разрешения автора — Стива Фолкнера.

Чаще всего дизайнеры и веб-разработчики делят страницы на крупные области контента (будем называть их регионами). Поиск по картинкам на запрос «типовая структура страницы в HTML5» выдает множество примеров схематических изображений страниц, на которых обозначены похожие регионы:

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

Перевод статьи Is HTML «complete»? с сайта brucelawson.co.uk, автор — Брюс Лоусон.

Не так давно Тим Брей написал интересный пост под названием </html>, в котором он заявляет:

Никто, похоже, не заинтересован в работе над «словарем» (под которым понимаются те штуковины в угловых скобках, из которых состоит HTML).

На мой взгляд, HTML готов. Это ни в коем случае не означает, что я считаю, будто вся платформа веб-программирования находится в надлежащем состоянии…

Давайте отложим инструменты и сосредоточимся на более важных проблемах.

Перевод статьи When <button> isn’t the best choice (it’s slow to create and render and problematic to style) с сайта benfrain.com, автор — Бен Фрейн.

Элемент <button> значительно медленнее при создании в JavaScript, он медленнее отображается в браузере и крайне трудно стилизуется кроссбраузерно. Несмотря на то, что <button>, это «правильный» выбор для задач кнопки, это не обязательно должен быть «лучший» выбор.

Представьте картину. Я пытаюсь убедить главного инженера программного обеспечения использовать более семантические элементы в разметке, а не только общие элементы, типа div  и span. Такие семантические элементы, как section, header, footer и nav. Разговор выглядел примерно следующим образом. «Нам нужно проверить, что они не медленнее при создании в JavaScript», — говорит он. «Конечно, нет проблем», — отвечаю я, с полной уверенностью.

Перевод статьи Стива Фолкнера «On HTML belts and ARIA braces» с сайта html5doctor.com

Надо ли добавлять HTML-элементам атрибуты ARIA role, чтобы раскрыть их семантику — один из тех вопросов, что всплывают с завидным постоянством. Ответ — «может быть» для некоторой части элементов, но обычно (и чем дальше, тем больше) — «нет».