С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты "рукописного начертания", вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.
Что такое семантика?
Семантика в HTML является практикой предоставления смысла и структуры содержимого документа с помощью соответствующего тега. Семантический код описывает значение содержимого документа, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов:
- семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем "легче" документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным .
- компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
- семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.
Жирный текст
Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги и . Важно понимать семантическую разницу между ними.
Тег семантически используется, чтобы придать более важное значение тексту и таким образом является наиболее популярным вариантом для жирного текста. Тег , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания. Вы должны оценить значимость текста для которого хотите установить жирность и выбрать соответствующий тег. Несмотря на то, что браузеры отображают их совершенно одинаково, поисковые системы могут придавать им различное значение при анализе страницы.
HTML-код с тегами и :
Внимание: крутой спуск.
Это рецепты оливье и винегрета.
Пример: важный и жирный текст
- Попробуй сам »
Внимание: крутой спуск. Это рецепты оливье и винегрета .
Внимание: крутой спуск.
Это рецепты оливье и винегрета.
Курсивный текст
Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент . Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.
Тег применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега , который применяется просто для создания курсивного текста.
HTML-код с тегами и :
Я люблю Родину!
Имя Виктория означает победа.
Теги и
Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.
HTML-код с тегами и :
Это обычный текст.
Это текст с меньшими буквами.
Это текст с большими буквами.
Пример: уменьшенный и увеличенный шрифт
- Попробуй сам »
Это обычный текст.
Это текст с меньшими буквами.
Это текст с большими буквами.
HTML тег
Тег используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера выделяется желтым цветом как чернильным маркером.
HTML тег
Тег
используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере
как перечеркнутый
.
HTML тег
Тег предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какой фрагмент содержимого был добавлен во время последнего обновления документа. Браузеры обычно помечают текст в контейнере .
HTML тег
Тег отображает текст в нижнем индексе. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.Такой текст на практике может быть использован, например для написания различных формул в нижнем индексе .
HTML тег
Тег отображает текст в верхнем индексе. Текст отображается уменьшенным размером и располагается выше, чем базовая линия остальных символов строки. Такой текст на практике может быть использован, например для написания различных формул или сносок в верхнем индексе .
Перевод строк и горизонтальные линии
Тег
(перевод строк)
Как вы уже видели раньше, тег
Позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег
. Одним из видимых с первого взгляда отличий данного тега от
Является отсутствие отступов после и перед тегом
. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент
в любую строку, где хотите оборвать поток текста и вставить разрыв строки.
Тег
(горизонтальная линия)
Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег
. Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.
Пример: перевод строк и горизонтальные линии
- Попробуй сам »
Эти строки отделены друг от друга с помощью абзаца (p):
Это первый абзац.
Это второй абзац.
Это линия:
Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик
HTML-код с тегами
,
,
,
,
:
В тексте есть слово: удача.
Слово беда было удалено из текста.
Слово победа было добавлено в текст.
Формула воды: Н2 O.
Скорость ветра: 20м3/сек.
Пример: форматирование текста
- Попробуй сам »
В тексте есть слово: удача. Слово беда было удалено из текста. Слово было добавлено в текст. Формула воды: Н 2 O. Скорость ветра: 20м 3 /сек.
В тексте есть слово: удача.
Слово беда было удалено из текста.
Слово победа было добавлено в текст.
Формула воды: Н2 O.
Скорость ветра: 20м3/сек.
Задачи
Итоговое задание
На этом уроке вы познакомились с элементами, предназначенными для разметки небольших фраз и отдельных слов. Особое внимание было посвящено логической разметке текста с помощью тегов позволяющими указать на важность слова или фразы, а не только визуальному форматированию.
Пришло время повторить изученное и выполнить пять несложных заданий:
Семантически сильное слово
- Реши сам »
Выделите слово "профессионалом" жирным шрифтом, обозначив тем самым тем самым особую семантическую важность этого слова.
Ты должен стать профессионалом своего дела
Ты должен стать профессионалом своего дела
Акцент на слове
- Реши сам »
Сделайте акцент на слове "полный". При этом визуально это слово должно отображаться курсивом.
Основная задача форматирования - это сделать текст читабельными и понятным по своей структуре. Существуют даже целые руководства по оформлению кодов, где рассписаны такие мелочи, вроде количества пробелов или отступы от фигурных скобок. На самом же деле, всё гораздо проще - вполне достаточно чтобы код был визуально читабельным, а пробелы или табуляторы - это дело двадцать шестое.
Однако, я хочу это особо отметить, если предполагается размещать код для других людей, то придется придерживаться некоторого «базового стандарта».
Отступы блоков
Каждый вложенный блок должен иметь больший отступ слева, чем родитель.
То есть мы строим визуальную иерархию тэгов, в которой легко ориентироваться. Сравните с «плоским стилем»:
Современные текстовые редакторы, например Notepad++ автоматически делают такой отступ по Enter"у, что полностью снимает проблему с их ручной расстановкой. Обычно кодеры вначале создают открывающий и закрывающий тэг, а уже после его разбивают по строкам Enter"ом. Это гарантирует, что у открывающего тэга всегда будет закрывающий.
«Смыкающиеся» блоки
В коде может встречаться ситуация, когда блоки всегда непосредственно следуют один за другим. В этом случае можно не разбивать их между собой и не делать дополнительный отступ.
В данном примере div.layout-center-wrap всегда содержит непосредственного потомка div.layout-wrap без разрыва. Такие блоки можно визуально рассматривать как один. Вот еще один пример, где блоки можно разместить на одном уровне.
Главное здесь - не переусердствовать: больше 2-3 блоков на одной строке/уровне размещать не стоит. Если же между блоками размещается текст или код, то их точно следует размещать на разных строках.
Такое форматирование не годится. Правильно будет так:
Пробел или табулятор
Без разницы. Используйте то, что больше нравится. Насколько я знаю, то почти все кодеры используют табулятор, просто по тому, что это всего один раз нажать клавишу Tab.
Если же делать пробелами, то для каждого отступа нужно нажать 4 пробела. Частая проблема в том, что по ошибке можно нажать не 4, а 3, 5 или еще сколько-нибудь, и при этом нужно либо считать нажатия клавиш, либо визуально контролировать результат.
В этом плане, табулятор гораздо «надежнее». С технической же точки зрения, что табулятор, что пробелы без разницы (html-код всё равно будет сжат).
Использование нескольких пробелов - это иммитация табулятора. Так что этот вопрос лежит в плоскости удобства использования. Но, если вы решили использовать пробелы, то на каждый отступ должно быть 4 символа, иначе текст теряет читабельность. Встречаются руководства, где рекомендуется ставить 2 пробела, но по мне такой код визуально «неряшливо куцый».
Верхний и нижний регистр
Если речь идёт о HTML, то все тэги должны быть в нижнем регистре. Технически, опять же, это не имеет значения, но заглавные буквы плохо читаются. Поэтому все тэги и их атрибуты пишутся строго в нижнем регистре.
Если же речь идёт о языках программирования, то как правило они регистрозависимы, поэтому верхний регистр используется только там, где это необходимо.
Одинарные и двойные кавычки
Почти всегда используются двойные кавычки. Когда происходит внедрение JS-кода в HTML-страницу, может возникнуть ситуация, когда кавычек требуется два вида:
В данном примере html-атрибут обрамлён двойными кавычками, а внутри js-кода уже используются одинарные. Использовать только один вид - невозможно.
Поэтому правило по кавычкам в HTML и CSS простое: основные кавычки - двойные, а если их не хватает, то используем одинарные.
Необязательные закрывающие теги
Тут просто - всегда ставим. Это касается тэгов P, LI и других.
Слэш в конце одиночных тэгов
Никогда не ставим. Это пережиток старого стандарта XHTML. Так неверно:
Так верно:
Порядок атрибутов в тэгах
Класс (class) всегда указывается первым. Собственно при разборе верстки всегда смотрится тэг и его классы, а уже после остальные атрибуты.
Те атрибуты, которые могут быть одиночными (вроде required) лучше указывать последними:
Пустые классы/атрибуты нужно удалять.
Форматирование CSS-кода
Класс размещается в отдельной строке и открывает блок свойств ({). После двоеточия свойства делается пробел. Каждое свойство размещается на одной строке и всегда завешается точкой с запятой (;).
T-label { color: white; background: blue; font-size: .75rem; padding: 1px 10px; border-radius: 3px; }
Если указываются сразу несколько классов, то их размещают на отдельных строках:
Article, aside, footer, header, nav, section { display: block; }
Если класс короткий и состоит из одного свойства, то его можно разместить на одной строке:
W100-max { max-width: 100%; } .w-hide { display: none; } .w-auto { width: auto; }
У нулей единицы измерения не пишутся (там где это не имеет значения), вместо 0px следует указывать просто 0 .
У дробных чисел с нулем, вместо 0.8em лучше указать.8em . Однако это условие не обязательное и можно использовать любой вариант, главное, чтобы было единообразие хотя бы на уровне одного css-файла.
Если свойство поддерживает сокращённую запись, то ей можно воспользоваться, например вместо margin: 0 20px 0 20px; можно указать margin: 0 20px;
Если значение цвета можно сократить, то это можно сделать, например вместо #FFAA88 указать #FA8 . Здесь важный момент в том, что часто такой цвет не набирается вручную, а копируется из программ «пипеток». Обычно у них используется полная запись из 6 цифр. Кроме того, некоторые программы отдают строчные буквы, а другие прописные: #FFAA88 или #ffaa88 . Поэтому для задания цвета подходит любой вариант. Каждый раз вручную менять регистр букв - глупость.
Буквенные имена цветов следует использовать с осторожностью и лучше только на этапе прототипирования. В результирующем коде их лучше заменить на шестнадцатеричные значения, например вместо color: red; нужно указать color: #F00; . Такой подход позволит изменить цвет прямо в редакторе кода, вроде Notepad++ (он реагирует на символ #).
Порядок следования css-свойств может быть любым. Можно в порядке добавления, можно сгруппировать по функциональному назначению. Технически же порядок может быть любым, поэтому никаких правил здесь нет.
Следует понимать, что форматирование CSS-кода - это чистой воды условность. В реальности такой код будет сжат и минифицирован Sass-компилятором. Если потребуется его отформатировать для просмотра, то никто в здравом уме вручную это делать не будет: есть десятки онлайн-сервисов по красивому форматированию кода с любыми настройками. Поэтому CSS-форматирование требуется только на этапе разработки.
Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел.
Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.
1. Styleneat
Вероятно, самый простой сервис из представленных в обзоре.Возможностей у инструмента не так много:
- Сортировка свойств по алфавиту
- Сортировка селекторов по алфавиту (если стоит галочка “Safe Organize” (безопасное форматирование) - этот параметр не доступен)
- Возможность выбрать стиль форматирования: многострочное или в одну строку
- Умеет вытягивать CSS-файлы, подключенные с помощью import , в основной файл и безжалостно их обрабатывать
- Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
- Результат можно забрать в виде CSS-кода или загрузить файл
2. FormatCSS
Не смотря на свой грозный вид, инструмент прекрасно справляется со своими функциями, коих у него предостаточно.
Настроить можно многое:
- расстановку пробелов/табов/новых строк,
- сортировку свойств и имён селекторов,
- преобразование имён свойств и селекторов в нижний регистр и т.п.
3. CleanCSS
Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей:
- Скормить CSS можно копипастом в поле “CSS-Code” или в виде ссылки на файл стиля
- Получить результат можно в виде текста или в файл
- На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле “Custom temlate”
- Умеет объединять правила, приводить запись свойств к короткому виду
- Если необходимо - удалит комментарии и невалидные определения
- Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр
UPD> В комментариях подсказали ссылку на близнеца это сервиса: CodeBeautifier . Набор функций практически идентичен CleanCSS (сервис тоже работает на CSSTidy).
4. ProCSSor
На мой искушенный взгляд - самое удобное из всего представленного в данном обзоре.
Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками.
Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла.
Настроек у инструмента вполне достаточно, чтобы угодить практически любому пользователю, перечислять их не имеет особого смысла - лучше сразу попробовать.
Приятной фичей сервиса является возможность сохранить свои настройки , чтобы в следующий раз можно было пропустить этап настроек и сразу перейти к процессу облагораживания.
Ещё одна достопримечательность - ProCSSor предоставляет API , с документацией можно ознакомиться здесь:
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
| Выравнивание по левому краю | Выравнивание по правому краю | Выравнивание по центру | Выравнивание по ширине |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца
С атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега
| Код HTML | Описание |
|---|---|
| Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. | |
Текст |
Выравнивание по центру. |
Текст |
Выравнивание по левому краю. |
Текст |
|
Текст |
Выравнивание по ширине. |
| Отключает автоматический перенос строк, даже если текст шире окна браузера. | |
| Текст |
Разрешает браузеру делать перенос строки в указанном месте, даже если
используется тег |
Текст
|
Выравнивание по центру. |
Текст
|
Выравнивание по левому краю. |
Текст
|
Выравнивание по правому краю. |
Текст
|
Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.
Отличие между абзацем (тег
) и тегом
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде
. В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
Как поймать льва?
Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
HTML Beautifier & Formatter
Load URL Load URL
HTML Formatter
Enter your messy, minified, or obfuscated HTML into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many option to tailor the beautifier to your personal formatting tastes.
When do you use HTML Viewer, HTML Formatter, HTML Formatter
Often when writing HTML your indentation, spacing, and other formatting can become a bit disorganized. It is also common for multiple developers to work on a single project who have different formatting techniques. This tool is helpful for making the formatting of a file consistent. It is also common for HTML to be minified or obfuscated. You can use this tool to make that code look pretty and readable so it is easier to edit.
Examples
The minified HTML below:
Becomes this beautified:
