Различие между синтаксисом SASS и SCSS
Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Это записью мы…
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Чтобы тексты на страницах браузера были более удобными для посетителей их нужно уметь форматировать: выделять тем или иным образом определенные фрагменты текста, чтобы привлечь внимание посетителей. Форматирование в HTML делится на правильное форматирование, которое называется логическим и о нем мы поговорим в следующей записи и неправильное форматирование текста в HTML, которое получило название непосредственное форматирование текста в HTML. Вот как раз про непосредственное форматирование мы и поговорим в данной записи.
Непосредственное форматирование текста в HTML
Собственно, из этой записи вы узнаете, как форматировать тексты в HTML документе и чем это облегчит жизнь посетителей вашего сайта. Также вы поймете почему вместо тэгов, относящихся к группе непосредственного форматирования, вам лучше использовать тэги логического форматирования и какие плюсы это вам даст. Данная запись разделена на три раздела:
Содержание статьи:
Мы уже разобрались с тем, что такое HTML и рассмотрели некоторые тонкости реализации языка HTML. Пришло время начать практиковаться в использование некоторых HTML тэгов. И сегодня мы поговорим про непосредственное форматирование текста в HTML. Дело всё в том, что разработчики стандарта HTML стараются вносить смысл в каждый HTML элемент, который мы видим на странице в браузере, но так было не всегда. По той простой причине, что, во-первых, раньше не было браузеров для людей с ограниченными возможностями, во-вторых, поисковые системы раньше были не такие «умные».
Поэтому на заре развития HTML не особо сильно задумывались о смысле HTML тэгов, а больше задумывались о их назначение. Для того, чтобы как-то выделять слова в тексте в HTML документа были введены специальные тэги форматирования текста. HTML тэги, отвечающие за непосредственное форматирование текста в документе не имеют смысла, а лишь имеют какое-то назначение: тем или иным способом выделяя слова и фразы в тексте HTML документа.
На данный момент стандарт HTML рекомендует отказаться от использования тэгов непосредственного форматирования текста в документе и применять тэги логического форматирования, в которые вложен смысл и, которые точно так же, как и тэги непосредственного форматирования выделяют текст в HTML документе тем или иным образом.
Использовать HTML тэги непосредственного форматирования еще не рекомендуется и потому, что практические для всех их возможностей есть аналог в каскадных таблицах стилей, а как вы помните, хорошим тоном считается отделение содержимого от его оформления, поэтому-то также не рекомендуется использовать для оформления HTML атрибуты.
Все HTML тэги непосредственного форматирования текста являются парными HTML тэгами, а HTML элементы, которые создает браузер в процессе интерпретации тэгов непосредственного форматирования текста, являются строчными HTML элементами. Для каждого из этих тэгов/элементов доступны универсальные атрибуты и атрибуты HTML событий.
Мы поговорили о ключевых особенностях тэгов для непосредственного форматирования текста в HTML. Теперь давайте их опишем и дадим краткую характеристику: посмотрим на их непосредственность и на то, как они форматируют текст на наших HTML страницах. Также стоит отметить, что в HTML всего девять тэгов для непосредственного форматирования.
Из всех тэгов непосредственного форматирования HTML текста, которые были приведены выше, стандарт рекомендует использовать нам в своих документах только тэги <sup> и <sub> в различных математических формулах, все остальные тэги непосредственного форматирования не рекомендованы к использованию в HTML.
Давайте теперь попрактикуемся и сделаем пример, в котором будем использовать HTML тэги группы непосредственного форматирования текста, описать это одно, а попробовать отформатировать HTML текст самостоятельно – это совсем другое. Откройте любой редактор, можно даже Блокнот (хотя на данный момент у нас есть множество более удобных редакторов, например: CSS редактор Brackets, JavaScript редактор Sublime Text 3, бесплатный редактор Notepad++ и даже IDE NetBeans, все эти редакторы намного удобнее Блокнота) и сохраните код, написанный ниже в файле с расширением .html или .htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>Непосредственное форматирование текста в HTML</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Пример к статье непосредственное форматирование текста в HTML</h1> <p>Тэги непосредственного <b>форматирования текста в HTML</b> <i>не имеют смысла</i>, а <u>лишь используются</u> для того, чтобы <tt>каким-либо образом</tt> выделять <strike>фрагмент текста</strike>. Например, мы можем <big>увеличить текст</big> в HTML документе. Или наоброт - <small>уменьшить его</small>. А можем сделать <sup>верхний индекс</sup> или <sub>нижний индекс</sub></p> <p>В HTML всего девять тэгов группы непосредственного форматирования текста.</p> </body> </html> |
Не забывайте использовать табуляцию и перенос строк для форматирования HTML кода. Теперь давайте откроем наш пример в браузере и посмотрим, как тэги непосредственного форматирования преобразовали HTML текст.
Пример использования HTML тэгов непосредственного форматирования текста
Конечно, смысла в данном примере мало, как и в HTML тэгах непосредственного форматирования текста, но этот пример прекрасно демонстрирует то, как преобразуется текст, находящийся внутри этих тэгов.
Выберете удобный для себя способ, чтобы оставить комментарий