Элемент strong в верстке HTML-страницы

Reading time ~3 minutes

Практиковался в верстке макета от известной web-студии TemplateMonster. На сайте этой студии есть бесплатные шаблоны с psd-исходниками.

Почему именно этой студии? Ну, во-первых, раз студия известная, то ее продукты должны быть хорошего качества. Как макеты, так и сверстанные по этим макетам шаблоны. А на чем же еще учиться верстать, как не на самом лучшем? Только так можно самому научиться хорошо верстать - когда перед глазами пример грамотного и качественного кода.

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

Почему я так делаю - беру готовые чужие работы и пытаюсь их повторить? Интуитивно для себя я пришел к выводу, что это единственный путь, который может привести меня к собственному умению верстать. Да, первоначально я читал книги, статьи, смотрел видеокурсы (хорошие и плохие).

Плохие учебные материалы я выбрасывал, не дочитав и не досмотрев до конца. Зачем терять время на то, что тебя не сможет научить? Или, еще хуже, научить неправильно, чтобы потом пришлось еще тратить время на переучивание?

Что же я делаю с готовыми чужими работами? Во-первых, я ищу готовые шаблоны с исходниками. Шаблон откладываю на время в сторону и приступаю к самостоятельной верстке по psd-макету. По мере того, как выполняется работа, у меня накапливаются вопросы: как это можно сделать, или - как это можно сделать лучше. Когда код полностью готов, я открываю (с дрожью в руках) чужой шаблон, и смотрю, сравниваю со своим.

Таким образом, мне хорошо видно - где я сделал промах, ошибку или недочет. При этом одновременно делается два дела - я “набиваю руку” и учусь. Скажу от себя, что для меня по насыщенности и полезности такие “уроки” многократно превосходят чтение книг или просмотр видеокурсов. Ни тот, ни другой не научат самому делать верстку сайта.

С длинным вступлением закончено. Приступаю к основной теме данной статьи.

Заключается она (если можно так сказать) в двух словах - элемент strong. Ну и что, спросите вы. Элемент как элемент, ничего в нем необычного нет. Мы прекрасно знаем, для чего предназначен тег strong - чтобы сделать выделение полужирным начертанием какого-либо участка текста на странице. И будете не правы! Чтобы подтвердить свои слова, приведу скриншот готового шаблона “Монстров”:

Элемент strong

Не знаю, как вас, а меня несколько удивило это, когда я открыл шаблон для сравнения со своим собственным. Конечно, опытные верстальщики могут сказать: “Ну и что? Все правильно и мы это давно знаем и применяем”. Но для меня это было небольшим открытием. Грешным делом, я сперва подумал, что кодер ошибся второпях)

Спрашивается, зачем вставлять строчный элемент в ту часть кода страницы, где заведомо могут применяться только блочные элементы? Чтобы потом писать лишние правила CSS для преобразования его в блочный? И только потом уже позиционировать? Ответа для себя не нашел, поэтому полез в Интернет. А точнее - на известный htmlbook.ru.

И я нашел ответ на свой вопрос. Нужно было только внимательно читать! Все оказалось просто.

То, что элемент

1
strong
визуально выделяет обрамленный тегами текст полужирным начертанием, на самом деле ничего не говорит. Тут есть небольшая путаница между элементом
1
b
и элементом
1
strong
. И первый, и второй визуально делают строки “жирными” в окне браузера. Но вот разница между ними заключается в предназначении.

Элемент

1
b
предназначен для визуального выделения текста в окне браузера. А вот задача элемента
1
strong
- логическое выделение текста. Здесь уже подключается семантика, в соответствии с которой должны создаваться html-страницы. А тот факт, что в обоих случаях текст получается полужирным, только вводит путаницу.

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

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

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

Единственный нюанс - кодер вынужден был “извернуться” и преобразовать строчный элемент в блочный

1
display:block
для дальнейшего его позиционирования в шапке страницы.

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017