Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, тег font, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.
CSS свойство font-sizeВ CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.
Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:
p{font-size: 200%}
p { font - size : 200 % } |
Это если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.
Также регулировать величину можно с помощью ключевых слов larger и smaller, которые устанавливают соответственно больший или меньший размер текста, чем у родительского элемента.
selector{font-size: larger}
selector { font - size : larger } |
Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.
Размер основных элементов на веб-страницеВ отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html. Вообще в теге можно задать такие атрибуты, как width и height, но делать это неудобно. А самое главное – это не соответствует стандартам, которые определяют, что внешний вид и структуру нужно отделять друг от друга, вынося в отдельные файлы.
По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.
img{ width: 50px; height: 50px }
< img width = "50" height = "50" > < ! -- такненужнопрописыватьширинуивысотудляэлемента-- > HTML лишь расставляет блоки на веб-странице, но сам формат этого языка не позволяет ему выступать удобным инструментом для задания величин. Чтобы как-то визуально повлиять на блок, нужно обрамлять его определенными открывающими и закрывающими тегами, что далеко не так удобно. Для задания внешнего вида элементов сегодня нужно использовать css-правила, потому что именно они для этого предназначены. На сегодня все, а вы не забывайте подписаться на обновления блога, чтобы иметь под рукой много полезных материалов по сайтостроению. |
Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1 , h2 …h6 . Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h1 —h6 позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
Зачем нужны теги h1-h6?В теги заключается название сайта, заголовки и подзаголовки текста:
В HTML теги заголовков обозначаются h от английского «header », что в переводе означает «заголовок, шапка ». Вот пример того, как это выглядит:
Заголовок
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
- наиболее важные теги - менее значимые теги... - последние по важности теги
Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
Синтаксис тегов h1-h6Название текста Подзаголовок 1 ... Подзаголовок 2 Подзаголовок 3.1 ... Подзаголовок 3_2 Подзаголовок 3
Наибольшей популярностью пользуются теги h1 h2 h3 . Как правильно использовать тег h1?
Игнорируя тег h1 , веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом (заголовком страницы ). Title отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title прописывается в шапке страницы между , в то время, когда h1 —h6 указываются в самом «теле » страницы и заключаются в теги .
На странице может присутствовать только один h1 тег. Если указать несколько заголовков с тегом h1 , поисковики могут расценить это как переспам, что в свою очередь грозит баном:
Правила составления главного заголовка h1 :
- В теге должны использоваться ключевые слова, применяемые для продвижения страницы;
- Не стоит делать заголовок h1 слишком объемным, вполне достаточно нескольких слов;
- Текст заголовка должен быть читабельным;
- Мета тег h1 не должен содержать ничего кроме самого текста. Если желаете его выделить, поставьте коды за пределами тега;
- Перед тем, как вручную прописывать h1 , убедитесь, что движок не задает его автоматически;
- Содержание h1 должно соответствовать тематике, указанной в title страницы;
- При составлении h1 обязательно используйте ключевую фразу, по которой продвигается страница;
- Содержание заголовка должно быть уникальным, емким и тематичным. Не стоит делать h1 полной копией тега Title . Важно, чтобы на каждой странице ресурса были прописаны уникальные h1 —h6 , поэтому избегайте повторений;
- Нельзя перечислять в заголовке ключевые фразы через запятую. Содержание h1 должно быть понятно не только поисковикам, но и посетителям ресурса.
Кроме h1 для расстановки заголовков, которые идентифицируются поисковыми системами, используются теги h2 , h3 , h4 , h5 , h6 и т.д.
Тег h2Как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.
Теги h3, h4Зачастую с их помощью выделяют названия подзаголовков, рубрик и виджетов в sidebar .
Теги h5, h6Предназначены для еще более мелких элементов страниц, которые следует отделить от остального текста.
Расстановка заголовков h1 — h6 в разных версиях движков может быть реализована по-разному.
Правила расстановки h2 —h6 :
- Структура заголовков. Должна быть соблюдена иерархия заголовков;
- Размер шрифта. Чем ниже уровень заголовка, тем мельче шрифт. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют правильные размеры по умолчанию;
- Не допускается применение тегов заголовков вместе с другими тегами акцентирования. В заголовках рекомендуется использовать ключевые слова, по которым данная станица будет продвигаться в поиске;
- В отличие от h1 , теги h2 —h6 могут быть прописаны на странице несколько раз.
Я главный в иерархии заголовков Мои дети Мои внуки Мои внуки Мои внуки Мои дети Мои внуки Мои внуки Мои внуки Мои правнуки Мои правнуки Мои правнуки
- Не должно быть никакого спама;
- Составление текста h1 — h6 должно производиться с использованием синонимов и учетом правил морфологии;
- Основные ключевые запросы лучше разместить ближе к началу заголовка;
- Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;
- Теги h1 — h6 должны быть краткими, емкими и информативными:
< FONT SIZE =… COLOR =... FACE =...> текст
SIZE - устанавливает размер шрифта , который будет использоваться текстом, содержащимся в пределах элемента FONT. Можно задать абсолютный размер шрифта, указав целое число от 1 до 7. Для шрифта можно также указывать относительный размер , присваивая атрибуту целое число со знаком (например, это может быть SIZE="+1" или SIZE="-2").
COLOR - указывает цвет , которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается символьное значение одного из стандартных цветов.
FACE - задает гарнитуру шрифта , например FACE=ARIAL.
текст - телетайпный текст (моноширинный).
текст - стиль с наклонным шрифтом (курсив ).
текст - стиль с жирным шрифтом.
текст - стиль с подчеркиванием текста.
текст - печать текста шрифтом увеличенного размера (большего, чем окружающий текст).
текст - печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).
текст - печать текста со сдвигом вниз (нижний индекс или подстрочный).
текст - печать текста со сдвигом вверх (верхний индекс или надстрочный).
текст или < S > … - стиль с перечеркиванием текста.
Специальные теги htmlТег < ADDRESS > используется для выделения автора документа и его адреса (например, e-mail).
Некоторые символы являются управляющими символами в HTML и добавляются в текст только при помощи ESC-последовательностей:
левая угловая скобка "" - >
амперсанд "&" - &
двойные кавычки """ - "
Существует большое количество ESC-последовательностей для обозначения специальных символов, например " " для обозначения знака и "®" для значка . Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.
ESC-последовательностичувствительны к регистру : НЕЛЬЗЯ использовать < вместо
тег DD – задается описательная часть для элемента списка определений
тег DFN – текст, заключенный в теги форматируется как определение
тег DL – создание списка определений, содержащих теги < dt > и < dd >
тег DT – задается описательно-условная часть для элемента списка определений
тег EMBED – начальный и конечный теги, которые позволяют описать встраиваемый в документ объект. В зависимости от вида встраиваемого объекта могут, помимо указанных ниже, включаться дополнительные параметры
Атрибут
Функция
Указывается URLвстраиваемого объекта. Этот атрибут является необходимым
height=n
Указывается высота зоны, которую займет встроенный объект
name=имя
Указывается имя встраиваемого объекта
Указывается ширина зоны, которую займет встроенный объект
тег FONT – установка размера, цвета или гарнитуры заключенног в теги текста
Атрибут
Функция
Установка цвета заключенного в теги текста
face=список
Установка гарнитуры заключенного в теги текста (устанавливается первый из указанных в разделенном запятыми списке имен шрифтов)
size=значение
Установка размера базового шрифта. Диапазон – от 1 до 7
тег Hn – заключенный в теги текст представляет собой заголовок уровня n . Возможные значения n – от 1 до 6
Атрибут
Функция
align=тип
Указывается способ выравнивания заголовка: по левому краю (left, по умолчанию), по центру (center) или по правому краю (right)
тег HR – разрыв текущего текстового потока. В месте разрыва будет вставлена горизонтальная линейка
Атрибут
Функция
align=тип
Указывается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или по правому краю (right)
Запрещается использование объемного затенения при отображении линейки
Установка толщины линейки равной целому числу пиксел
width=значение
тег I – заключенный в теги текст будет отображаться в курсивном начертании
тег IMG – в текущий текстовой поток вставляется изображение
Атрибут
Функция
alt=текст
Задается альтернативный текст для браузеров, не поддерживающих работу с изображениями
Border=n
Установка толщины (в пикселах) обрамления изображений, содержащихся в гиперссылках
Добавление функций управления воспроизведением встроенных виедоклипов (IE 2 и выше)
Dynsrc = url
Задается URL -адрес видеоклипа, подлежащего изображению ( IE 2 и выше)
Height=n
Задается высота изображения в пикселах
Hspace=n
Задается размещение слева и справа от изображения областей свободного пространства шириной по n пиксель
Указывается, что при использовании данного тега внутри тега изображение выбирается с помощью мыши
loop=значение
Установка числа повторов воспроизведения видео. Значение может быть целым или значениемinfinite (IE 2 и выше)
Lowsrc=url
Указывается изображением с низким разрешением, которое браузер должен загрузить первым. За ним следует изображением, заданное атрибутом (IE 2 и выше)
Указывается исходный URLизображения, подлежащего воспроизведению. Этот атрибут является необходимым
start=начало
Указывается, когда следует воспроизвести видеоклип (варианты: fileopenилиmouseover)
Usemap=url
Указывается чувствительная к перемещению мыши область изображения
Vspace=n
Задается размещение над и под изображением областей свободного пространства по nпиксель
Указывается ширина изображения в пикселах
тег KBD – заключенный в теги текст вводится посимвольно (как при наборе с клавиатуры)
тег LINK – в заголовке (< head>) документа определяется ссылка из данного документа на другой документ
Атрибут
Функция
href=url
methods=список
Задается список методов отображения для данной ссылки, зависящих от браузера (через запятую)
rel=связь
Определяется связь этого документа с целевым документом. Для InternetExplorer3.0rel=styleозначает существование внешней таблицы стилей
rev=связь
Определяется обратная связь целевого документа с данным
Указывается URLвнешней таблицы стилей, которая будет использоваться для форматирования документа (IE 2 и выше)
title=строка
Задается заголовок целевого документа
type=text/css
Для целевого документа указывается универсальное имя ресурса, не зависящее от его места нахождения
тег MAP – определяется чувствительная к перемещению мыши область изображения
Атрибут
Функция
name=строка
Задается имя данной области. Этот атрибут является необходимым
тег NOBR – в заключенном в теги тексте разрывы не допускаются
тег P – начальный и конечный теги абзаца
align=тип
Задается способ выравнивания текста в абзаце: по левому краю (left), центру (center) или по правому краю (right)
тег PLAINTEXT – указывается, что остальную часть документа следует отображать без обработки, как предварительно отформатированный текст
тег PRE – заключенный в теги текст будет отображаться так. как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов
Браузер будет размещать текст так, чтобы в строке умещалось (если возможно) nсимволов
тег S
тег SAMP – заключенный в теги текст представляет собой шаблон
тег SMALL – заключенный в теги текст будет отображаться шрифтом меньшего размера
тег SPACER – вставить в документ разделитель (Только N 3)
type=тип
Указывается тип разделителя: vertical– между двумя строками текста помещается область пустого пространства указанного размера;horizontal– область пустого пространства указанного размера помещается между словами или символами;block– вставка прямоугольной области
Указывается (в пикселах) ширина разделителя типа horizontalили высота разделителя типаvertical
Указывается ширина разделителя типа block
height=n
Указывается высота разделителя типа block
align=значение
Указывается способ выравнивания разделителя blockотносительно окружающего текста.
тег SPAN – заключенный в теги текст будет форматироваться с использованием таблицы стилей (Только IE 3 и выше)
Атрибут
Функция
style=элементы
Для текста в заданном интервале задаются элементы таблицы стилей
тег STRIKE – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией
тег SUB – заключенный в теги текст будет отображаться как нижний индекс
тег SUP – заключенный в теги текст будет отображаться как верхний индекс
тег TT – заключенный в теги текст будет отображаться моноширинным шрифтом
тег VAR – заключенный в теги текст представляет собой имя переменной
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , , ,Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта. Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов. Тег для создания таблицы. Определяет тело таблицы. Создает ячейку таблицы. Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом. Создает большие поля для ввода текста. Определяет нижний колонтитул таблицы. Создает заголовок ячейки таблицы. Определяет заголовок таблицы. Определяет дату/время. Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. Создает строку таблицы. Добавляет субтитры для элементов и . Выделяет отрывок текста подчёркиванием, без дополнительного акцента. Создает маркированный список. Выделяет переменные из программ, отображая их курсивом. Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. Таблица-шпаргалка с тегамиУказывает браузеру возможное место разрыва длинной строки. Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
Также по теме