15 ошибок или советов HTML и CSS

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

1. W3C Validator


Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

  • не закрыт тег;
  • не рекомендованные символы в ссылках;
  • используется не рекомендованный тег;
  • не указан обязательный атрибут;
  • и другое.

2. Вёрстка в формате UTF-8


При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

<meta charset="utf-8">

3. Одинаковые id у нескольких элементов


Значение атрибута id в HTML-коде не должно повторяться.

<!-- не правильно -->
<div id="block"></div>
<div id="block"></div>

<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>

4. Спрайты


Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Пример спрайта

image

Пример на JSFiddle

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

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

5. Много селекторов


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

/* не рекомендуется, большая вложенность */
.page .item .title a {}

/* можно сократить */
.page .item a {}

Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.

Если есть возможность, то выборку рекомендуется сокращать до одного селектора:

/* рекомендуется */
.form-submit a {}

/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}

6. Стили в HTML


HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

<!-- не правильно -->
<p style="color: red">Ошибка в коде</p>

<!-- правильно -->
<p class="error">Ошибка в коде</p>

7. Неправильное названия классов


Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.

<p class="message green">Текст сообщения</p>

Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.

Чтобы избегать подобных ситуаций, не рекомендуется применять классы для смены цвета, выравнивания текста, изменения регистра. Надо называть сами элементы (шапка, подвал, сообщение), и применять к нему свои стили.

<!-- неправильно -->
<p class="message green">Текст сообщения</p>

<!-- правильно -->
<p class="message message-success">Текст сообщения</p>

8. Пиксели в дробных значениях


Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

p {
    /* не правильно */
    letter-spacing: 1.5px;

    /* правильно */
    letter-spacing: .005em;
}

9. Использование классов вместо id


Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.

#modal a {
    color: blue;
}

/* цвет ниже не получится переопределить,
   т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
    color: #333;
}

/* в этом случае придётся добавить #modal */
#modal .modal-header a {
    color: #333;
}

Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню


Меню должно быть оформлено как список.

<!-- неправильно -->
<p><a href="#">Главная</a> <a href="#">Новости</a> <a href="#">О компании</a></p>

<!-- правильно -->
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">О компании</a></li>
</ul>

11. Пропущенный alt у картинок


В тегах надо указывать атрибут alt (можно пустой).

<!-- неправильно -->
<img src="pic.jpg">

<!-- правильно -->
<img src="pic.jpg" alt="Картинка">
<img src="pic.jpg" alt="">

12. Теги <h1>


На странице должен быть только один заголовок в теге <h1>. В основном, в этом теге находится название страницы.

13. Транскрипция


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

/* неправильно */
.tovar {}
.stranica {}
.zapros {}

/* правильно */
.product {}
.page {}
.query {}

14. Clearfix


Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.

Класс .clearfix надо указывать в родительском теге, а не ставить рядом.

<!-- неправильно -->
<div>
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clearfix"></div>
</div>

<!-- правильно -->
<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

15. HTML — язык программирования


Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 50

    +1
    А в чем проблема добавления style=" " напрямую в тэг в HTML? Это всего лишь вопрос традиций, или это негативно влияет на какие-либо аспекты?
      +2
      HTML предназначен для вывода информации. Оформление происходит в CSS. Использование атрибута style никак не влияет на страницу, даже проходит валидацию, но HTML не предназначен для оформления, для этого есть CSS.
        +2
        Как понимать фразу «HTML не предназначен для оформления», если спецификацией предусмотрен атрибут style, и он поддерживается всеми браузерами? Каким ещё должен быть HTML, чтобы оказаться «предназначенным для оформления»?

        Указание стилей в атрибуте style имеет свои недостатки (дублирование кода, сложность изменения, если стиль одинаковый для разных элементов, высокий приоритет правил — не переопределяешь через стили для всей страницы), но в мелких проектах его может быть совершенно достаточно, а иногда и совершенно необходимо (например, когда элемента становится видимым после каких-то действий пользователя — тогда прописать «display: none» в style при верстке гораздо нагляднее).
          +2
          В будущем возможны сложности изменения вёрстки при использовании style="". Особенно когда над сайтом будет работать другой верстальщик. Ему будет проще делать правки в CSS, а не искать нужный код в файлах.

          В стандарте не указано, что в HTML нельзя оформлять страницы, но я думаю стоит разделять вывод информации (HTML) и её оформление (CSS).
            0
            Так гораздо понятнее.
            0
            более того, предусмотрен тег
              0
              В современном мире — аттрибут style является нарушением CPS, в частности позволяет unsafe-inline и возможно даже unsafe-eval.
              Потому лично я бы не рекомендовал его использовать. Пользуйтесь классами.
                0
                Можно ‘nonce’ прописать и всё будет в порядке.
                UPD. Хотя он годится для тега, а не атрибута.
            0
            Одноразово пофиг.
            А многоразово плохо.
            Потом задолбетесь искать все места использования.
            +3
            Спасибо, кэп.

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

            Кстати html5 допускает на одной странице несколько h1 заголовков, каждый пределах ```html

            ```
              +2
              … в пределах тегов section.
                0
                Ничто не мешало использовать и в html4 более одного h1.
                Просто логически в этом мало смысла.
                Если нужно несколько h1, то может стоит использовать h2.
                1 h1 нужен больше поисковикам.
                  0
                  Ну как же ничто не мешало, код ведь получался несемантичный. Сейчас с появлением section с этим проблем нет.
                  +2

                  Более того, он рекомендует это делать. w3c. В каждом section должен быть свой h1, что иногда заставляет попотеть и воспламеняет невероятные споры с СЕО-шниками, которых даже стандарты переубедить не могут.


                  Далее немного конструктивной критики


                  • про длину селекторов и что браузеру что-то там тяжело — не в 2016 году, да и почему именно 3? Магическое число?
                  • магические числа. Про них не сказано, зато примеры с ними есть. Они как 2005 были злом, так и остались. Разработчик должен понимать откуда каждое число берется
                  • у иконочного шрифта есть еще одно огромнейшее преимущество: возможность перекрашивать иконки, чего нет у спрайта
                  • инлайновые стили не зло. Через js их вполне можно пихать (так построены половина библиотек на react), как всегда — инструментом нужно пользоваться с умом
                  • пиксели в дробных значениях что-то сверх-упоротое, не встречал такого, однако, справедливости ради, с чего вдруг пиксель — это что-то неделимое? Ныне в css виртуальный пиксель достаточно поверхностно связан с физическим и не является чем-то неделимым.
                  • id и классы имеют разное предназначение и их нужно использовать так же с умом, по обстоятельствам, правила в виде "id не должно быть в css" беспочвенно.
                  • Пункт 10. Это с чего вдруг? Так называемая accessibility ныне достигается иными способами, а семантика — я уже давал ссылку, где есть пример того, как должно выглядеть семантичное меню
                  • Сравнение html с Word это как сравнить машинный код и visual studio. Во-первых, Word это приложение, а html — язык разметки, во-вторых, внутри docx лежит такой же xml, не так уж и далеко ушедший от html. Просто странное сравнение.
                    0
                    Мой сеошник был очень рад, когда появился SECTION со своими вложенными тегами заголовков
                  +21
                  Статья «Привет из 2005 года»
                    0
                    Стили в html можно и нужно применять в виде тега
                      +2
                      Почему-то мой комментарий значительно обрезался.
                      Попробую повторить:
                      Стили в HTML можно и нужно применять в виде тега style в заголовке для ускорения загрузки страницы, размещая в нем основные используемые классы, переместив ссылки на файлы остальных стилей в конец html-файла. Разница будет заметна прежде всего в CMS, где используется подгрузка всех стилей независимо от их наличия на конкретной странице. Тоже советует и Google Pagespeed.

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

                      В целом статья кажется незавершенной без комментариев автора относительно тех или иных утверждений, например, почему нужно обязательно использовать атрибут alt в тэгах img, или почему меню должно быть написано с использованием ul/li?
                      0
                      Много вопросов почему нужно именно так, а не иначе. Не во всех пунктах раскрыт этот вопрос.
                        +1
                        обычно так "кто так делает, горите в аду11!!!".

                        Да там вот это
                        /* предпочтительнее примера выше, если есть возможность */
                        .form-submit-link {}

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

                        Чем меньше css тем лучше. Как для парсера, так и человека. Все эти игры «id быстрее класса» «два класса хуже чем один» просто из вакуума. Как будто кто-то видел эту разницу на практике.
                          0
                          Спасибо вам
                          0
                          Согласен. А также некоторые пункты, в частности №13, так вообще не являются ни ошибкой, ни чем либо увеличивающим нагрузку на сервер или браузер… Чистое имхо автора… Да, непрофессионально, но это не ошибка (исходя из заголовка статьи).
                          0
                          ИМХО в 5 пункте лучше будет вот так:
                          /* не рекомендуется, большая вложенность */
                          .page .item .title a {}
                          
                          /* можно сократить */
                          .item .title a {}
                          

                          Ведь по «плохой» версии видно, что пытаются стилизировать ссылку заголовка, а не все ссылки item`а. Ну или как написано дальше:
                          .item-title-link {}
                          

                            –3
                            >Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.

                            На этом чуть менее, чем полностью построен bootstrap :)
                              0
                              bootstrap построен на message message-success, а не на message message-green
                                0
                                Вот эта ерунда https://gist.github.com/bryanwillis/279b0f89ef74c39d0aea7ba5037406e3 раньше по ходу была в самом бутстрапе (аутсорсер предоставил верстку с такими классами :) )

                                Ту да же классы типа italic, fs-11, lh-20

                                Если не было в самом бутстрапе, то сорри, мне было не до этого, верстка уже была несемантическая.
                                Из-за оленей сложилось такое впечатление :)
                              0
                              >>Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

                              Это если используется старый HTTP/1.1, сейчас пришло время HTTP/2, где это уже неактуально.
                                0
                                10. Почему меню должно быть в списке?
                                Почему не так:

                                  0
                                  Одинаковые id у нескольких элементов

                                  Пропущенный alt у картинок

                                  Об этом уведомит W3C Validator из первого пункта.
                                  4. Спрайты

                                  HTTP2 уже поддерживается популярными браузерами и веб-серверами. Как и SVG на замену неказистым иконочным шрифтам.
                                    0

                                    HTTP/2 arrives but sprite sets ain’t no dead


                                    Спрайты, как и минификация css/js и SPA всё ещё имеют смысл. И, в общем-то, будут иметь смысл ещё наверное до тех пор, пока все ресурсы не будут загружаться одновременно.

                                      0
                                      Интересная статья. Хотел бы её перевод на хабр.
                                      0
                                      Как и SVG на замену неказистым иконочным шрифтам.

                                      Ага, и баги в мобильных браузерах с его отображением магически решились по вашему велению.
                                        0
                                        У иконочных шрифтов багов не меньше, в том числе и на десктопах.
                                          0
                                          У готовых, проверенных типа Font Awesome, как правило, меньше.
                                            0
                                            Это не поможет при багах в самих браузерах. FF например рисует их чуть толще остальных браузеров, и FA тут наравне с остальными. Opera Mini как не поддерживала их, и FA тут ничего не смог поделать.
                                            Вообще, почти полностью согласен вот с этой статьёй.
                                              0
                                              Имхо, нерационально базировать свою верстку на багах десктопных браузеров. Рендеринг чуть ли не в каждом втором релизе меняют. И он свой для каждой OS. Ну а неправильную отрисовку svg в Safari починят только при следующем обновлении iOS.
                                              А если у вас требуют pixel-perfect во всех известных науке браузерах, то могу только посочувствовать.
                                                0
                                                Имхо, нерационально базировать свою верстку на багах десктопных браузеров. Рендеринг чуть ли не в каждом втором релизе меняют.

                                                И я про что! Шрифты рисуются по разному, в зависимости от типа браузера, ОС, настроек браузера, настроек ОС, может ещё что упустил.
                                                А вот рисовать произвольно SVG браузеры не должны.
                                                Ну а неправильную отрисовку svg в Safari починят только при следующем обновлении iOS.

                                                Тут я не в теме, яблока не имею.
                                                А если у вас требуют pixel-perfect во всех известных науке браузерах, то могу только посочувствовать.

                                                Слава Богам, не требуют.
                                                  0
                                                  Хз, тут только аксиомой Эскобара можно подытожить.
                                      +1
                                      Ага, и от меня спасибо, кэп.
                                      А почему alt обязателен, даже если он пустой?
                                        0
                                        Веб-стандарты.
                                          +1
                                          Да я понимаю, что стандарт требует, но как его отсутствие (пустого alt) скажется на работе сайта? На процессор нагрузка возрастет, грузиться дольше будет, со скриптами какими-то проблемы могут быть?
                                          Если картинки используются в качестве декоративных элементов, а единственный минус — что страница не пройдет валидацию — да и фиг с ним же.
                                            0
                                            Если картинки используются в качестве декоративных элементов

                                            Тогда зачем вообще использовать тег img? Сделайте фоном к div, или к псевдоэлементу, тег img нужно использовать только для контентных изображений.
                                              +2
                                              Сейчас, конечно, незачем. А когда-то без этого было не обойтись.
                                              Я просто хочу понять, чем чревато нарушение этой рекомендации. Если только «валидатор заругает», то ничего страшного. Но может есть что-то о чем я не знаю…
                                                0
                                                Раньше, когда не было background-size часто вешалась картинка абсолютом
                                          +1

                                          Где-то я почти всё это видел… Вспомнил, в CHM-файле "HTML первые шаги" в 2000 году.


                                          W3C Validator
                                          Это пример самого настоящего инвалидского менеджмента, обычно только те, кто не понимает, что такое верстка в-принципе, только на него и опираются. Прогоните через него N любых ресурсов и вы увидите, что всем он параллелен. Раньше были даже картиночки 88*31. Тоже уехали в топку вместе с "Best viewed with". Стандарты давно плетутся за браузерами.
                                          Совесть — лучший валидатор. При использовании любого html редактора у вас не будет картинок без alt и незакрытых тегов.

                                          UTF-8
                                          По мнению W3 BOM является валидным. Какие глюки из-за него происходят, помнят чуть менее, чем все.

                                          Одинаковые id
                                          Это даже не обсуждается лет 15 как :) Лично видел, как горе-верстальщики делали кучу одинаковых ID вместо использования !important и даже вместо классов просто так, потому что короче писать.

                                          Спрайты
                                          Стоит упомянуть, что всякие модные сборщики и CSS фреймворки умеют их клеить сами

                                          Много селекторов
                                          До сих пор не доказано, насколько сильно влияет на производительность вложенность селекторов. Иногда HTML сложно или невозможно поменять

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

                                          Неправильное названия классов и 13. Транскрипция
                                          Это вообще никак не влияет на работу сайта. Забудьте про это. Хоть .dohlye_kotiki
                                          Про презентационные классы типа green, red и тд… Тоже в топку. Когда у макета есть, например, набор цветовых схем ни один человек не будет себя мучать выдумыванием метафоры на зеленый цвет.
                                          Если продложить доколупываться к презентационным классам, то модификаторы в обожаемом BEM — это они и есть, колонки в bootstrap — это тоже они. И даже обожаемый всеми .clearfix

                                          Clearfix
                                          Использование display:table для :after таких элементов периодически подбрасывает смешные глюки. Например, выделенный текст выделяется не с ширину блока, а с ширину всей страницы. Так что overflow:hidden или вложение чего-то "чистящего" в конец обертки вполне юзабельно до сих пор.
                                            0
                                            Повторенье — мать ученья :)
                                              +1

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

                                                0
                                                У всех уровень разный :)
                                              0
                                              Clearfix
                                              Использование display:table для :after таких элементов периодически подбрасывает смешные глюки.

                                              Кстати, кто-нибудь знает, зачем там ставят display:table? Вроде и display:block прекрасно работает.
                                                0
                                                Это из-за collapsing margins в каком-то странном частном случае. Подробно описано тут.

                                            Only users with full accounts can post comments. Log in, please.