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

Доступность также была тем, о чем я никогда не задумывался. я знал это
изображения должны иметь описания alt и на этом все. Один из
ключевыми моментами курса является то, что использование соответствующих семантических элементов важно
чтобы сделать сайт более доступным.

Например, люди, использующие программы чтения с экрана, могут прыгать, используя
Заголовок
элементы (

—

), поэтому важно использовать их и убедиться, что
они в правильном порядке. Неправильно использовать их только для увеличения текста
потому что их настоящая цель — определить структуру контента. Они
как оглавление.

Вместо заголовков мы могли бы использовать элементы

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

Специальные возможности — это не только улучшение работы веб-сайтов с программами чтения с экрана.
Мы должны подумать о размере шрифта, стиле шрифта и цветовом контрасте для людей, которые
имеют нарушения зрения или дальтонизм. Мы должны учитывать, что люди, которые
людям с потерей слуха может быть труднее распознать, что аудио или видео
играет. Мы должны сделать так, чтобы навигация по вкладкам работала хорошо для людей, которые в первую очередь
на клавиатуре, возможно, потому, что им сложно пользоваться мышью. Когда
мы добавляем анимацию, мы должны избегать тех, которые усложняют задачу
для кого-то, чтобы действительно использовать веб-сайт, например, анимации, которые меняют страницу
макет посреди взаимодействий. И мы должны учитывать, когда страница
перегружен слишком большим количеством информации или слишком большим количеством элементов, что затрудняет
люди, чтобы понять вещи или как на самом деле использовать веб-сайт.

О доступности легко забыть, но мы должны стремиться к тому, чтобы веб-сайты
работают хорошо для как можно большего числа людей. Доступность также идет рука об руку
с удобством использования и поисковой оптимизацией. В курсе указывается, что
улучшение одного часто означает улучшение всех остальных.

Чтение документации

У меня есть друг, наверное, единственный человек, которого я знаю
кто прочитал всю книгу правил НФЛ
(версия 2020 года — 87 страниц). Смотреть с ним футбол было весело, потому что
он так хорошо понимал нюансы игры и странные ситуации. я
решил, что у меня есть похожая возможность с HTML.

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

Было много устаревших элементов, которые я только бегло просмотрел, а не
потрудился делать заметки для них, но десятки стандартизированных элементов и
атрибуты были для меня совершенно новыми.

Я не собирался выходить из этого опыта как мастер HTML, и я все еще
должен применить то, что я узнал (в том числе на этом веб-сайте), но я нахожу это
полезно только для того, чтобы быть в курсе того, что доступно. Хотя я не могу вспомнить все
подробности об использовании
картина
элемент, я знаю, что он существует сейчас, и я всегда могу посмотреть подробности позже во время
выполнение. Это категорическое отличие от того, чтобы вообще об этом не знать.
и использую простой для всех случаев, потому что я не знаю ничего лучшего.

Наблюдения

Когда я читал документацию, некоторые вещи были мне особенно интересны,
и у меня были некоторые наблюдения.

Адрес
элемент предназначен для контактной информации в целом, а не только для физической рассылки
адреса.

Определение
элемент представляет собой термин, который определяется, а не определение

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

Трек
element предоставляет стандартный способ встраивания синхронизированных текстовых дорожек для видео и аудио.
Я никогда не слышал о
WebVTT (веб-видео
Текстовые дорожки) формат ранее.

Элемент карты
кажется анахронизмом, особенно с учетом того, что он не реагирует.

Данные
element обеспечивает машиночитаемый перевод содержания. Кажется, это нравится
может помочь соскабливать содержимое экрана, что некоторые веб-сайты, например LinkedIn,
активно пытаюсь
предотвратить .

Когда дело доходит до правильного выбора
сильный
против em против
я против
ты против
b против
марка

Есть несколько элементов, которые кажутся избыточными. В
легенда
элемент представляет собой заголовок для
набор полей
элемент,
подпись
элемент представляет собой заголовок для
Таблица
элемент, а
figcaption
элемент представляет собой заголовок для
фигура
элемент. Я не знаю, почему один элемент не может справиться со всеми тремя, поскольку
значение могло быть получено из родительского элемента.

Будущее HTML

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

Википедия — идеальный сайт для того, для чего изначально был разработан HTML:
в основном статические документы, которые связаны гиперссылками. Но теперь мы используем
браузер для полной загрузки приложений, таких как
Figma, инструмент проектирования, который эффективно запускает
Код C ++ в браузере, скомпилировав его в
WebAssembly .

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

Но по мере того, как ваш вариант использования становится все более продвинутым, быстро становится трудно полагаться на
исключительно на основе того, что предоставляет HTML. Например,
Индикатор выполнения Bootstrap не
используйте HTML
прогресс
элемент.

Мы не используем элемент HTML5 чтобы вы могли складывать прогресс
полосы, анимируйте их и помещайте поверх них текстовые метки.

Другой пример —
Таблица
элемент. Таблицы в чистом HTML могут быть красивыми
сложный
с точки зрения отображения данных, но нет встроенной поддержки интерактивных
такие функции, как сортировка, фильтрация и разбиение на страницы.

Поддержка браузера также становится проблемой, когда элемент действительно становится более продвинутым.
Вход
element — один из самых сложных элементов, потому что он поддерживает так много
комбинации типов ввода и атрибутов. Теоретически вы могли бы использовать его для
легко собрать дату и время, используя datetime-local
типа .
Но не все браузеры поддерживают его, и есть различия в том, как он работает, даже
среди тех, кто это делает.

Некоторые элементы также сложно стилизовать, например
Выбрать
элемент. Таким образом, разработчики веб-сайтов могут захотеть полагаться на стандартные функции.
вместо использования библиотеки или реализации функции самостоятельно, но тогда они
нужно беспокоиться о том, что он не работает в определенных браузерах или стилистически
несоответствие остальной части веб-сайта.

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

Веб-компоненты, похоже, набирают обороты.
GitHub начал использовать
их и
они публикуют свои компоненты в
WebComponents.org.

Заключение

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