Знакомство с HTML и CSS. Часть 2: Разметка текста — Тренажёр HTML Academy

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

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

Списки

Начнём со списков. Неупорядоченный список («unordered list»), то есть не пронумерованный список, в котором порядок элементов не важен, задаётся с помощью тега <ul> </ul>. Напротив, упорядоченный список («ordered list») задаётся с помощью тега <ol> </ol>.

Внутри этих тегов, обозначающих начало и конец списка находятся элементы или пункты списка («list item»), которые обозначаются тегом <li> </li>.

У <ol> может быть несколько атрибутов: start="3" — задать списку стартовое число, reversed — «разворачивает» нумерацию списка, и type="" — задаёт тип маркеров, например, меняет на римские цифры.

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

Тег <dl> </dl> обозначающий список описаний («description list») в который можно вписать имя какой-то сущности («description term»), например, термин или вопрос, и обозначить её тегом <dt> </dt>, а следом описать эту сущность («description definition») с помощью тега <dd> </dd>. Пример для наглядности:

<dl>
 
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки</dd>
  
  <dt>CSS</dt>
  <dd>Каскадные таблицы стилей</dd>
  <dd>Язык для оформления HTML-документов</dd>
  
</dl>

Цитаты

Для обозначения цитаты («quote») внутри текстового блока или просто предложения используется тег <q> </q>, при этом браузер цитату обернет в кавычки сам.

Тег <cite> </cite> обозначает источник цитаты, будь то имя автора, название произведения или даже просто ссылка на оригинал.

Куда интереснее тег <blockquote> </blockquote> который выделяет как цитату не фрагмент текста в текстовом блоке (то бишь строку), а отдельный блок, в который можно вписать несколько текстовых блоков.

Код и преформатирование

В случае когда нужен текстовый блок, где важно сохранить определённое количество пробелов, переносов или табуляции в тексте, которые по умолчанию браузер сокращает, используется тег <pre> </pre>.

Для обозначения фрагментов кода в тексте используется тег <code> </code>. Однако, по умолчанию этот тег не сохраняет пробелы, переносы и табуляцию как это делает тег <pre>, поэтому чаще всего для отображения «красивого» кода используют комбинацию этих тегов.

При это нужно понимать, что даже в блоке кода <code> браузер будет считывать верстку HTML. То есть этот тег лишь объявляет, что внутри «какой-то» код и слегка меняет его визуально, при этом этот код может быть выполнен, если браузер его поймет. А поймет он точно HTML-код.

Поэтому надо дать понять браузеру, что символ < это не открытие тега, а знак «меньше». В HTML это делается с помощью символов-мнемоников, на место которых браузер подставляет зарезервированный символ. Например, что бы отобразить символ < нужно написать < (less than), а символ > отображается с помощью > (greater than).

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

Для переноса строки («line break») в каком-либо текстовом блоке используется одиночный тег <br>, но им также не стоит злоупотреблять и трижды подумать нужен ли он в конкретном случае.

Акценты и выделение

Для выделения какой-то части текста курсивом («italic») используется коротенький тег <i> </i> , а для выделения текста жирным («bold») используется тег <b> </b>.

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

Для участка текста на котором нужно сделать особый акцент («emphasis») по смыслу используется тег <em> </em> – он также выделяет текст курсивом, но с семантической точки зрения выделяет его, иногда меняя тем самым смысл предложения.

Для выделения важного участка текста, на который нужно обратить внимание раньше остальной информации, но который не меняет смысл всего предложения или фразы, используется тег <strong> </strong> – он выделяет текст жирным.

Индексы

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

Итак, верхний регистр («superscript») обозначается тегом <sup> </sup> – да, чтобы написать, например, степень числа нужно обрамить её в этот тег.

Нижний регистр («subscript») по аналогии обозначается тегом <sub> </sub> – представьте себе какой лютый геморрой писать в чистом HTML химические формулы.

Дата, время и изменения

Для обозначения даты и времени используется тег <time> </time> — в большинстве случаев используется вместе с атрибутом datetime, который обозначает дату в «машиночитаемом» формате, насколько я понял, имеется в виду для поисковых роботов, для которых важна актуальность.

<time datetime="2015-11-18">18 ноября 2015</time>

Атрибут datetime также используется в тегах обозначающих изменения в документе – тег <del> </del> обозначающий удалённый («delete») текст, и тег <ins> </ins> обозначающий добавленный («insert») текст.

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

Самые важные теги!

Я конечно шучу, но это по факту самые распространённые теги в HTML-документе. Чаще чем они вряд ли что-то встречается. Это «чистые» элементы, не наделённые никаким логическим или семантическим смыслом.

Тег <div> </div> используется для группировки структурных элементов. По сути все структурные блоки в <body> можно представить в виде <div>, но я думаю рассчитывать на какое-то SEO в таком случае вообще не стоит.

Тег <span> </span> используется для группировки строчных элементов. Они с <div> родственники, отличаются только уровнем «взаимодействия» с контентом.

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

Если серьезно — «диватоз» это скорее даже правило, чем исключение. Да, крупные дядьки/тётьки, возможно, делают сайты по всем правилам (и то не факт), но вот малый/средний бизнес судя по всему знать не знает про это всё.

Я далеко не всегда встречал <header> и <footer>, а уж про <article> или <aside> я вообще молчу. В лучшем случае есть <section>'ы и всё нормально с <h1> — <h3>. Возможно, я всё время находил говно-вёрстку и так сложилось, но что-то мне подсказывает, что нет.

Практика и Испытание

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

Пришлось верстать формулу используя <sup> и <sub>, показали очень натянутый пример как можно использовать эти странные <del> и <ins>.

Хотел только выделить 3-е практическое задание – Многоуровневый список, это конечно извращение то ещё, но забавно.

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

Откровением стал "диватоз", буду лечить.

Спасибо большое за внимание тому, кто каким-то образом оказался в этой статье и дочитал её до этого места! Если вы здесь впервые — в этой статье написано обо мне, а в этой немного написано почему я вообще сейчас прохожу эти тренажёры.

Остальные статьи можно посмотреть у меня на главной странице блога.

Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#обучение #html #css #фронтенд #веб_разработка