HTML тоже требует вашего внимания

В мире Интернета есть такая поговорка:

«HTML - это тело, а JavaScript - это мозг веб-приложения».

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

Когда кто-то хочет стать веб-разработчиком, мы, как опытные профессионалы, предлагаем им изучить JavaScript, TypeScript и т. Д. Почти каждый раз, когда мы игнорируем или забываем сказать им, HTML - это то, с чего им следует начинать. Потому что даже когда мы начинаем разработку веб-приложения, мы сначала пишем HTML, а затем переходим к JavaScript, TypeScript и т. Д.

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

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

1. Не закрывающие теги

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

Bad Practice:
<ol>
    <li>Steve Jobs
    <li>Bill Gates
    <li>Elon Musk

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

Good Practice:
<ol>
    <li>Steve Jobs</li>
    <li>Bill Gates</li>
    <li>Elon Musk</li>
</ol>

2. Не записывать атрибут Alt

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

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

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

Bad Practice:
<img src="dogecoin.png">

Good Practice:
<img src="dogecoin.png" alt="A cryptocurrency coin, popularized by Elon Musk">

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

3. Отсутствует Doctype

Мы знаем, что наше веб-приложение - это не только HTML, CSS или JavaScript. На самом деле это комбинация всего вышеперечисленного. Таким образом, наш браузер должен обрабатывать их соответствующим образом.

Теперь вопрос в том, как браузер определит, является ли это документ HTML или нет? Ответ - с помощью doctype.

doctype или объявление не является тегом HTML. На самом деле это информация, отправляемая браузеру о том, какой тип документа ему следует ожидать.

Bad Practice:
<html>
    <head>
        <title>Web Page Title</title>
    </head>
    <body>
        Web Page Content....
    </body>
</html>

Каждая HTML-страница должна иметь doctype.

Good Practice:
<!doctype html>
<html>
    <head>
        <title>Web Page Title</title>
    </head>
    <body>
        Web Page Content....
    </body>
</html>

В HTML 5 декларация проста:

<!doctype html>

В более старых документах (HTML 4) объявление более сложное, потому что объявление должно ссылаться на DTD (определение типа документа).

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd">

Совет. В объявлении <!DOCTYPE> НЕ учитывается регистр. Все эти заявления действительны.

‹! DOCTYPE html›

‹! DocType html›

‹! Doctype html›

‹! doctype html›

4. Встроенные стили

Давайте будем честными, не имеет значения, насколько серьезно мы относимся к принципу чистого кода; каким-то образом мы в конечном итоге используем встроенный CSS. Но мы всегда должны избегать такой практики.

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

Bad Practice:
<h2 style="color: #000">Dark Text</h2>

Good Practice:
<h2 class="text-dark">Dark Text</h2>
<style>
    .text-dark {
        color: "#000";
    }
</style>

5. Использование нескольких разрывов строки

Есть вероятность, что если вы захотите сделать промежутки между элементами, вы можете использовать тег разрыва строки ‹br›. Но это так старомодно.

Тег разрыва строки ‹br› не следует использовать для создания промежутков между элементами, вместо этого разделите текст на отдельные абзацы.

Bad Practice:
This is a line
<br>
<br>
This is another line

Good Practice:
<p>This is a line</p>
<p>This is another line</p>

6. Не используйте ‹b› и ‹i›

‹B› и ‹i› используются для выделения жирным шрифтом и курсивом соответственно, но они семантически неверны. Мы должны заменить эти теги на ‹strong› и ‹em› соответственно.

Хотя ‹b› и ‹i› по-прежнему доступны в HTML, и вы не получите никаких ошибок, если воспользуетесь ими, они не рекомендуются. Так что используйте вместо них ‹strong› и ‹em›, поскольку они более семантически верны.

Bad Practice:
<p>
    <b>Note: </b>Our website is under under construction currently.   <i>We will be back soon.</i>
</p>

Good Practice:
<p>
    <strong>Note: </strong>Our website is under under construction currently. <em>We will be back soon.</em>
</p>

Если вы используете какой-либо инструмент проверки качества кода, например SonarQube, при использовании тегов ‹b› или ‹i› будет сообщено об ошибке. Поэтому старайтесь избегать их как можно чаще.

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

Спасибо за прочтение!