Сегодня я опишу основные html теги для текста. Ранее я уже писал о css-свойствах, которые позволяют управлять стилем текста. Если что, об этом написано здесь. Но не всегда удобно использовать стили для этого дела. В целом, теги удобнее, хотя с их помощью невозможно сделать то, что можно с помощью стилей. И все же давайте посмотрим, как можно форматировать и оформлять текст с помощью тегов.
Жирный шрифт в html
Первое, что приходит на ум, когда начинаешь думать о форматировании текста — это возможность выделить жирным шрифтом. Для этой цели в html есть целых два тега — b и strong. В чем разница? Изначально b был создан только для выделения жирным, а strong еще и делает выделенные слова более важными, по сравнению с другим текстом. Но как ситуация обстоит сейчас, я не знаю. Осталось ли такое свойство у тега strong или нет. В любом случае, изначально такое отличие было.
В html коде использование тега выглядит так:
Ну а сам жирный шрифт вот так (слева обычный текст):
Html и курсив
Интересно, что с курсивным шрифтом абсолютно такая же ситуация — тут тоже два тега. I — чисто для визуального выделения, а em — еще как-то логически выделяет слова. По крайней мере так было, сейчас оба тега, скорее всего, работают одинаково. Я пишу теги без угловых скобок. Надеюсь, вы понимаете, что при написании реального кода эти скобки нужны, просто мне так удобнее писать статью (без них). В реальности текст, который нужно выделить курсивом, обрамляется примерно так:
<em>текст</em>
И вот так отличается от обычного начертания:
Подчеркивание и зачеркивание
Для подчеркивания в html есть тег ins. Для зачеркивания — целых 3 тега. Первый — это del. Но он предназначается скорее не просто для визуального эффекта зачеркивания, а для удаления неактуальных разделов документа. Если же вам нужно просто зачеркнуть слово или фразу, используйте тег strike. А недавно появилась его упрощенная версия — тег s. Вот его лучше всего использовать.
Подчеркивание:
Зачеркивание:
Вывод машинного кода
Если вам нужно вывести какой-то код на странице, используйте для этого тег code. Так поисковики будут понимать, где обычный текст, а где код.
Вот так это выглядит:
Как видите, шрифт меняется на моноширинный. Такого же эффекта в css можно добиться с помощью свойства font-family: monospace.
Маркер в html5 или помеченный текст
Еще один тег, о котором почти никто не знает — mark. Он появился в html5 и позволяет визуально выделить текст, применив к нему желтый фон. Это можно сравнить с тем, как вы, изучая статью в журнале, делаете пометки маркером. В целом, использование тега mark может сделать публикации красочнее и выделить важные слова и ключевые мысли. Вот так выглядит текст, заключенный в этот тег.
Вот я расхваливаю его, но сам не использую Надо будет попробовать. Кстати, с помощью css можно переопределить для него оформление и подогнать под дизайн вашего сайта. Например, мне нужно изменить желтый на оранжевый.
Цитаты и их оформление
Если вам нужна создать большую цитату, используйте тег blockquote. Название этого тега так и переводится — большая цитата. Если же нужно оформить в виде цитаты всего несколько слов, то можете использовать тег q.
Примеры:
Большая цитата с какими-то красивыми словами!
Маленькая цитата
Лично я тегом q никогда не пользовался. Оба элемента можно как-угодно оформить через css.
Заголовки в html
Вот хочу спросить вас, удобно и приятно ли вам читать эту статью? Надеюсь, что да. Во многом благодаря заголовкам, которые разбивают информацию, она лучше воспринимается и усваивается.
За заголовки отвечают теги h1-h6 в порядке убывания важности. То есть h6 — самый мелкий заголовок, почти никогда не используется. H1 — самый крупный и главный. Он должен быть один на странице. Обычно это название статьи.
Для подзаголовков используется h2. H3 используется, когда есть еще более мелкие подразделы. Остальные заголовки лично я практически не использую. Но если писать научную работу, то они вполне могут пригодится
Вот так все они выглядят:
Вывод заранее отформатированного текста
Может я неправильно сформулировал. В общем, как набран текст, так он и выведется, с сохранением всех пробелов. Если вы заметили, то в обычном режиме в html-редакторе сколько пробелов не ставь, они преобразуются в один.
На этом скриншоте вы можете видеть, как в редакторе проставлено много пробелов, но на деле они не применятся.
Таким образом, если вам нужно вывести текст с нестандартным форматированием, то есть смысл заключить его в теги pre. В таком режиме сохраняются все пробелы и переносы строк, поэтому вы можете вывести текст как угодно.
Вот теперь никаких проблем — как написали, так и вывелось!
Самое главное — абзацы!
Вообще-то об этом я должен был написать сразу, но счел это слишком очевидным. Каждый абзац в html заключается в тег p (paragraph). Но в html-редакторе движка wordpress нет необходимости заключать каждый абзац в этот тег.
Если абзацы в редакторе не указывать, то не будет переноса строк и отступов в тексте. Вот пример:
Как видите, все выводится правильно. Если убрать теги абзацев и просто писать новый текст с новой строки, будет вот что:
Вот так я написал в редакторе кода, но на web-странице это отбразится так:
Не очень здорово. Но, как я уже говорил, в различных cms вам не нужно четко обозначивать абзацы, движок это делает за вас. Приведенная ситуация касается набора кода в любом редакторе вроде Notepad++, Dreamveawer и т.д.
Иногда возникает необходимость писать текст с новой строки, не начиная при этом новый абзац. В таком случае вы можете использовать тег br для принудительного переноса строки. Дополнительно об этом можете читать здесь.
Выделение определений
Если у вас есть словарь, то тег dfn будет правильно использовать для выделения названий определений. Вот так:
Правда, я не знаю, какова актуальность этого тега на сегодняшний момент. Если что, он также дает тексту курсивное начертание.
Нижний и верхний индекс
И на веб-страничках иногда возникает необходимость вывести текст в верхнем или нижнем индексе. Например, когда нужно вывести какую-нибудь формулу.
Так, тег sub выводит текст ниже уровня строки, уменьшая при этом дополнительно размер шрифта. Тег sup делает то же, но сверху. Запомнить, в общем-то, достаточно легко: суб и суп Вот примеры использования:
Вывод аббревиатур
Для этого есть тег abbr и его атрибут title, значением которого выступает расшифровка аббревиатуры.
Расшифровка появляется при наведении курсора на аббревиатуру.
Горизонтальная линия
Иногда в тексте имеет смысл делать разделения. Помимо заголовков и абзацев в этом вам могут помочь горизонтальные линии. Это достаточно простой способ визуально разбить статью или страницу на подразделы.
Вот так эта линия выглядит. При помощи css вы можете сделать линию какой угодно по толщине, цвету, а с помощью css3 ее можно даже сделать градиентной или вертикальной. По сегодня не об этом.
Итог
Что ж, вот так выглядит в html форматирование и оформление текста. Самую актуальную информацию по html и css вы также можете найдете в премиум-разделе сайта Web4myself. Однажды я сам приобрел туда доступ и не пожалел, потому что узнал много нового и закрепил свои знания на практике.
Ну а на этом буду прощаться с вами. Думаю, что что-то не дописал в статью, потому что забыл. Если так, то со временем допишу.