Предварительное условие: Понимать, как языки взаимодействуют друг с другом, и понимать, что HTML — это язык разметки (маркировки).

Я не собираюсь тратить время на объяснение вам, что такое HTML, просто следуйте предварительным требованиям, и вы в деле.

1. Нарисуйте ветки в своем мозгу.

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

2. Понимать SEO, видимость и доступность

SEO (поисковая оптимизация)

Это важно для понимания SEO и того, как оно может привлечь пользователей/трафик на ваш сайт. Метаданные, семантические теги вносят большой вклад в повышение SEO-рейтинга в Google, Edge и других популярных поисковых системах. Search Engine Land поможет вам.

Видимость и доступность

Кодирование для обеспечения видимости важно, но кодирование для доступности лучше в мире, где более 400 миллионов человек имеют инвалидность, например, нарушения зрения и т. д. Кодирование для доступности. обеспечивает доступ через технологию чтения с экрана. Об этом подробно рассказала Mozilla Developer Network.

3. Усвойте важные понятия

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

‹img ›

<figure>
  <img src="URL" alt="alt text">
  <figcaption> The Caption</figcaption>
</figure>

<form>
  <label for="name">
    <span>Name: </span>
  </label>
<input type="text" name="username"/>
<button type="submit">Submit</button>

Это всего лишь несколько примеров, но их гораздо больше. «Односторонний» не всегда применим ко всему.

4. Практикуйтесь! Упражняться! Упражняться!

Это довольно очевидно, я не могу этого не подчеркнуть, просто сделайте это !!!!

В Mozilla Developer Network есть для вас отличные упражнения!!! попробуй это!

Спасибо за чтение, давайте продолжим обучение. Если я что-то пропустил, пожалуйста, сообщите мне в разделе комментариев.