ТОП-10 ошибок начинающих верстальщиков | Блог веб-разработчика MaxGraph

ТОП-10 ошибок начинающих верстальщиков

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

 

  1. Верстка сайта таблицами.Нет, ну ведь уже 2017 год..таблицами давным-давно не принято верстать. Можно еще сделать какую-то часть таблицы (особенно если в макете это и есть таблица), но весь сайт — совсем неверно.

    Привет из 2000-х

  2. Многие не используют alt для тега img. Это не просто прямой помощник в SEO-оптимизации, но и вспомогательный элемент. А вдруг ваши картинки по какой-либо причине не загрузятся? Человек хотя бы увидит надпись, отражающую контекст.

    Неправильно:
    <img src="img.jpg">

    Правильно:
    <img src="img.jpg" alt="img">

  3. Нельзя использовать тег <br> (разрыв строки) для создания списка. Для этого используются теги <ul> и <ol>

    Неправильно:

    line1<br>
    line2<br>
    line3<br>

    Правильно:

    <ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
    </ul>

  4. Не используйте теги <b> и <i> при манипуляциях с текстом. Лучше использовать font-weight, font-style. Или же теги <strong> и <em>. Так будет семантически вернее.

    Неправильно:

    <b>Same line</b>

    Правильно:

    <strong>Same line</strong>

  5. Нельзя использовать встроенные стили css. Ведь Вы все равно разделите ваш сайт на файлы index.html и style.css.

    Неправильно:

    <p style="color:red;">Same text</p>

    Правильно:

    HTML
    <p>Same text</p>

    CSS
    p {
    color: red;
    }

  6. Всегда указывайте DOCTYPE. В случае HTML5 нужно писать <!DOCTYPE html>.
    Это делается для определения версии html. Без определения версии Вы не сможете сказать браузеру, что у вас определенная версия, и какой-либо участок кода воспримется браузером иначе.
  7. Нельзя использовать встроенные в img-теги параметры width и height. Это опять же задается в CSS.

    Неправильно:

    <img src="img.jpg" width="300" height="200" alt="img">

    Правильно:

    HTML
    <img src="img.jpg" alt="img">

    CSS
    img {
    width: 300px;
    height: 200px;
    }

  8. Тег <h1> используется на странице ОДИН раз.
    Очень часто вижу, как тег <h1> используется 2-3 раза на странице. Но это семантически неверно. Для этого и придумали теги h1,h2,h3,h4 — чтоб использовать их иерархически.
  9. Нельзя называть классы и идентификаторы, начиная с цифр, или же называть их русскими буквами.
    Называть классы можно только латиницей, и только по смыслу! Ни в коем случае нельзя писать class=»kartinka», когда должно быть class=»image».
  10. Ну и последнее — всегда проверяйте код на валидаторе.

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

Спасибо всем за внимание, пишите свое мнение об ошибках! До скорых встреч!

12345 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Метки: , ,

Понравилось? Расскажи другим!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Максим Васянович

Я являюсь автором этого блога, а также занимаюсь разработкой сайтов. Любой feedback по каналу на YouTube или этому блогу принимаю по форме (либо пишите Вконтакте). Надеюсь на Вас.

Напишите мне Смотрите меня