Виды тегов – Мета теги для сайта — что такое мета теги, какие бывают, для чего прописывать ключевые слова в мета-теги

Leave a Comment / Разное / By /

Типы тегов

Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.

Условно теги делятся на следующие типы:

теги верхнего уровня;

теги заголовка документа;

блочные элементы;

встроенные элементы;

универсальные элементы;

списки;

таблицы.

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.

Далее рассмотрим только те теги, которые потребуются нам в дальнейшей работе.

Теги верхнего уровня

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

<html>

Тег <html> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.

<head>

Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

<body>

Тег <body> предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, таблицы, списки и др.

Набор тегов верхнего уровня и порядок их вложения показан в примере 5.1.

Пример 5.1. Теги верхнего уровня

<html>

<head>

…

</head>

<body>

…

</body>

</html>

В данном примере показано, что контейнер <html> определяет «каркас» всей веб-страницы, внутри него вначале задается

тег <head>, затем идет контейнер <body>, в нем хранится содержательная часть документа, которая и отображается в браузере. Теги <html> и <body> хотя и не относятся к обязательным тегам (т. е. их можно не размещать в коде), все же

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

Заметьте, что в примере не упоминается <!DOCTYPE>, поскольку этот обязательный элемент кода веб-страницы не является тегом, а предназначен для браузеров, чтобы сообщить им, как интерпретировать текущий документ.

Теги заголовка документа

К этим тегам относятся элементы, которые располагаются в контейнере <head>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>, который определяет название веб-страницы.

<title>

Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.

<meta>

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

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

Так, для краткого описания содержимого веб-страницы используется значение description атрибута name, как показано в примере 5.2.

Пример 5.2. Использование description

 

 

 

 

 

 

 

 

 

HTML 4.01

 

IE 7

IE 8

IE 9

Cr 8

Op 11

Sa 5

Fx 3.6

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head> <title>HTML</title>

<meta name=»description» content=»Сайт об HTML и создании сайтов»> <meta http-equiv=»content-type» content=»text/html; charset=utf-8″>

</head>

<body> <p>…</p>

</body>

</html>

Описание сайта, заданное с помощью тега <meta> и значения description, обычно отображается в поисковых системах или каталогах при выводе результатов поиска. Значение keywords также предназначено в первую очередь для повышения рейтинга сайта в поисковых системах, в нем перечисляются ключевые слова, встречаемые на веб-странице (пример 5.3).

Пример 5.3. Использование keywords

 

 

 

 

 

 

 

 

 

HTML 4.01

 

IE 7

IE 8

IE 9

Cr 8

Op 11

Sa 5

Fx 3.6

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head> <title>HTML</title>

<meta name=»keywords» content=»HTML, META, метатег, тег, поисковая система»> <meta http-equiv=»content-type» content=»text/html; charset=utf-8″>

</head>

<body> <p>…</p>

</body>

</html>

Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

Блочные элементы

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

<blockquote>

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

<div>

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

<h2>,…,<h6>

Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.

<hr>

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

<p>

Определяет параграф (абзац) текста.

<pre>

Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.

Следующие теги не должны размещаться внутри контейнера <pre>: <big>, <img>, <small>, <sub> и <sup>.

Парные теги HTML — Как создать сайт

Парные теги языка HTML

HTML-теги
Парные теги HTML

Парные теги имеют открывающий и закрывающий тег, перед именем закрывающего тега ставят знак слэш (косая черта) /

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

<имяТега> </имяТега>

Список парных HTML-тегов по алфавиту

<a> </a> — ссылка,
<abbr> </abbr> — аббревиатура,
<address> </address> — адрес, информация об авторе, проекте,
<acronym> </acronym> — акроним, устаревший тег,
<applet> </applet> — внедряет Java-программы, устаревший тег,
<article> </article> — основной контент страницы, тег HTML5,
<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
<audio> </audio> — воспроизводит аудиофайлы, создаёт панель управления ими, тег HTML5,
<b> </b> — жирный шрифт,
<bdi> </bdi> — запрещает изменять направление текста, тег HTML5,
<bdo> </bdo>
— управляет направлением текста,
<big> </big> — увеличивает размер шрифта на единицу, устаревший тег,
<blink> </blink> — мигающий текст, нестандартный тег,
<blockquote> </blockquote> — цитата,
<body> </body> — тело HTML-документа,
<button> </button> — элемент формы, расширенная кнопка,
<canvas> </canvas> — замена флэш-технологии, тег HTML5,
<caption> </caption> — заголовок таблицы,
<center> </center> — выравнивание элементов по центру,
<cite> </cite> — название произведения, романа, стиха, песни, картины и т.д.,
<code> </code> — код программы,
<colgroup>
</colgroup> — форматирует одну/несколько колонок таблицы, может объединять теги col
<comment> </comment> — комментарий, нестандартный тег,
<datalist> </datalist> — выпадающий список, тег HTML5,
<dd> </dd> — определение термина,
<del> </del> — старый (удалённый) текст,
<details> </details> — спойлер, тег HTML5,
<dfn> </dfn> — впервые встречающийся термин в тексте,
<dialog> </dialog> — диалоги, тег HTML5,
<dir> </dir> — список папок, устаревший тег,
<div> </div> — блочный элемент,
<dl> </dl> — список терминов и определений,
<dt> </dt> — термин,
<em> </em> — курсивный шрифт,
<fieldset> </fieldset> — элемент формы, группирует элементы формы,
<figcaption> </figcaption> — заголовок тега figure, тег HTML5,
<figure> </figure> — группирует различные элементы, тег HTML5,
<font> </font> — форматирует текст, устаревший тег,
<footer> </footer> — подвал сайта, тег HTML5,
<form> </form> — форма,
<frame> </frame> — фрейм,
<frameset> </frameset> — структура фреймов,
<h*> </h*> — заголовки от h2 до h6,
<head> </head> — голова HTML-документа,
<header> </header> — шапка сайта, тег HTML5,
<hgroup> </hgroup> — группирует заголовки, тег HTML5,
<html> </html> — HTML-документ,
<i> </i> — курсивный шрифт,
<iframe> </iframe> — плавающий фрейм,
<ins> </ins> — новый (добавленный) текст,
<kbd> </kbd> — горячие клавиши,
<label> </label> — создаёт связь с элементом формы, элемент формы,
<legend> </legend> — заголовок тега fieldset, элемент формы,
<li> </li> — элемент списка, находится между тегами ul и ol,
<listing> </listing> — код программы, устаревший тег,
<map> </map> — карта изображений,
<mark> </mark> — выделенный текст, тег HTML5,
<marquee> </marquee> — бегущая строка, нестандартный тег,
<menu> </menu> — обрамляет теги command, тег HTML5,
<meter> </meter> — шкала измерения, тег HTML5,
<multicol> </multicol> — многоколоночный текст, нестандартный тег,
<nav> </nav> — важные ссылки страницы, тег HTML5,
<nobr> </nobr> — отмена перевода строки, нестандартный тег,
<noembed> </noembed> — вывод текста при отсутствии браузером поддержки плагинов, нестандартный тег,
<noframes> </noframes> — вывод текста при отсутствии браузером поддержки фреймов,
<noscript> </noscript> — вывод текста при отсутствии браузером поддержки скриптов,
<object> </object> — внедряет плагины, устаревший тег,
<ol> </ol> — нумерованный список,
<optgroup> </optgroup> — группирует теги option,
<option> </option> — элемент списка выбора, находится между тегами select, optgroup, datalist
<output> </output> — вывод работы скрипта, тег HTML5,
<p> </p> — абзац,
<plaintext> </plaintext> — предварительно отформатированный текст, нестандартный тег,
<pre> </pre> — предварительно отформатированный текст,
<progress> </progress> — шкала прогресса, тег HTML5,
<q> </q> — цитата,
<rp> </rp> — часть аннотации, заменяет тег ruby, если браузер его не поддерживает,
тег HTML5,
<rt> </rt> — аннотация, тег HTML5,
<ruby> </ruby> — обрамляет аннотацию, тег HTML5,
<s> </s> — зачёркнутый текст,
<samp> </samp> — код вывода программы,
<script> </script> — скрипт,
<section> </section> — семантически единые разделы страницы, тег HTML5,
<select> </select> — группирует теги option,
<small> </small> — уменьшает размер шрифта на единицу,
<spacer> </spacer> — пустое пространство, нестандартный тег,
<span> </span> — строчный элемент,
<strike> </strike> — зачёркнутый текст, устаревший тег,
<strong> </strong> — жирный шрифт,
<style> </style> — внедряет CSS-код в страницу,
<sub> </sub> — нижний индекс,
<summary> </summary> — заголовок тега details, тег HTML5,
<sup> </sup> — верхний индекс,
<table> </table> — таблица,
<tbody> </tbody> — тело таблицы,
<td> </td> — ячейка таблицы,
<textarea> </textarea> — элемент формы, многострочное поле ввода,
<tfoot> </tfoot> — подвал таблицы,
<th> </th> — ячейка таблицы, заголовочная
<thead> </thead> — голова таблицы,
<time> </time> — дата и/или время, тег HTML5,
<title> </title> — название страницы,
<tr> </tr> — строка таблицы,
<tt> </tt> — моноширинный шрифт, устаревший тег,
<u> </u> — подчёркнутый текст, устаревший тег,
<ul> </ul> — маркированный список,
<var> </var> — переменные языков программирования,
<video> </video> — воспроизводит видеофайлы, создаёт панель управления ими,
тег HTML5,
<xmp> </xmp> — предварительно отформатированный текст, устаревший тег.

Читать далее: Одиночные теги


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Атрибуты HTML — Как создать сайт

Раскрываем тему об атрибутах в HTML-тегах

Атрибуты
Атрибуты HTML тегов

Атрибут — это свойство HTML тега. У атрибутов HTML имеются значения.

Схема HTML-тега с атрибутом и значением, выглядит следующим образом:

Схема парного тега:


<имяТега атрибут="значение"> </имяТега>

Схема одиночного тега:


<имяТега атрибут="значение">

Вместо слова атрибут, можно говорить свойство.

Виды (категории) атрибутов HTML-тегов

Атрибуты HTML делятся на несколько видов. Я их разделил на семь категорий, в других учебниках количество категорий может различаться:

  1. Глобальные атрибуты,
  2. Атрибуты событий,
  3. Сокращенные атрибуты,
  4. Атрибуты форматирования,
  5. Атрибуты указания пути (адрес),
  6. Атрибуты селекторы,
  7. Атрибут стиля.

Глобальные атрибуты

Глобальные атрибуты — это атрибуты, которые можно вставить в любой тег HTML-документа.

Вот небольшой список глобальных атрибутов:
title=" " — даёт описание элементу,
hidden=" " — делает элемент невидимым,
id=" " — присваивает элементу уникальный идентификатор.

Атрибуты событий

Атрибуты событий — это атрибуты, которые применяются при использовании программирования. Событие запускает функцию или инструкцию, которая выполняет какое либо действие, например изменяет размер шрифта у текста или проверяет введённые пользователем данные и т.д.

Вот небольшой список атрибутов событий:
onclick=" " — событие возникает при щелчке левой кнопки мыши на элементе,
onmouseover=" " — событие возникает при наведении курсора мыши на элемент,
onload=" " — событие возникает при загрузке HTML-документа в браузер.

Сокращенные атрибуты

Сокращенные атрибуты — это атрибуты которые можно записать в сокращенной форме.

Вот небольшой список сокращенных атрибутов:
checked="checked" — в сокращённой форме можно записать как checked,
readonly="readonly" — в сокращённой форме можно записать как readonly,
controls="controls" — в сокращённой форме можно записать как controls.

Атрибуты форматирования

Атрибуты форматирования — это атрибуты которые влияют на внешний вид тега, например на цвет, высоту, ширину и т.д.
Форматирование — это изменение внешнего вида.

Вот небольшой список атрибутов форматирования:
color=" " — влияет на цвет,
align=" " — влияет на выравнивание,
size=" " — влияет на размер шрифта.

В современном сайтостроении, атрибуты форматирования НЕ используют, вместо них работайте с CSS-свойствами.

Атрибуты указания пути

Атрибуты указания пути — это атрибуты которые применяются для того, чтобы указать адрес файла, страницы или сайта.

Атрибутов указания пути всего два:
href=" " — может указывать на адрес страницы в теге ссылки a,
src=" " — может указывать на адрес фотографии в теге изображения img

Атрибуты селекторы

Атрибуты селекторы — это атрибуты которые предназначены для создания выборки элементов (используются в CSS и JavaScript).

Атрибутов селекторов всего два:
class="имяКласса" — атрибут селектора класса,
id="имяУникальногоИдентификатора" — атрибут селектора уникального идентификатора.

Более подробно о селекторах вы можете прочитать в статье Селекторы в CSS

Атрибут стиля

Атрибут стиля — это атрибут, который размещает CSS-код непосредственно в HTML-тег.

Атрибут стиля:
style=" "

Пример внедрения атрибута style=" " в HTML-тег:

<p>
 Абзац</p>

В заключение

1. Один и тот же атрибут может принадлежать к разным категориям. Например атрибут id=" " это одновременно и атрибут селектора и глобальный атрибут.

2. К HTML-тегу, можно применить сразу несколько атрибутов, например:


<p title="Описание абзаца">
 Абзац</p>

Читать далее: Глобальные атрибуты HTML


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Строчные теги HTML — Как создать сайт

Строчные теги в языке HTML

HTML-теги
Строчные HTML-теги

Некоторые характеристики строчных тегов

  • В отличии от блочных, у строчных тегов НЕ ставится автоматический перенос строки, в начале и в конце.
  • У строчных тегов нельзя управлять шириной и высотой: width, height
  • У строчных тегов нельзя управлять CSS-свойством margin, но можно управлять CSS-свойством padding
  • Строчные теги НЕ занимают всю ширину родительского элемента.
  • Так как строчные теги НЕ занимают всю ширину родительского элемента, то элементами находящимися внутри строчных тегов, нельзя управлять с помощью горизонтального выравнивания: left, right, center, justyfi
  • Внутри строчных тегов можно размещать другие строчные теги, но блочные размещать нельзя. В HTML5 можно размещать заголовки h2-h6 между ссылкой а.

Строчные HTML-теги по алфавиту

<a> </a> — ссылка,
<abbr> </abbr> — аббревиатура,
<acronym> </acronym> — акроним, устаревший тег,
<b> </b> — жирный шрифт,
<basefont> — форматирует текст для всей страницы, устаревший тег,
<bdo> </bdo> — управляет направлением текста,
<big> </big> — увеличивает размер шрифта на единицу, устаревший тег,
<blockquote> </blockquote> — цитата,
<br> — перевод строки,
<cite> </cite> — название произведения, романа, стиха, песни, картины и т.д.,
<code> </code> — код программы,
<dfn> </dfn> — впервые встречающийся термин в тексте,
<em> </em> — курсивный шрифт,
<font> </font> — форматирует текст, устаревший тег,
<i> </i> — курсивный шрифт,
<input> — элемент формы, может быть кнопкой, текстовым полем, переключателем и др.,
<kbd> </kbd> — горячие клавиши,
<label> </label> — создаёт связь с элементом формы, элемент формы,
<q> </q> — цитата,
<s> </s> — зачёркнутый текст,
<samp> </samp> — код вывода программы,
<select> </select> — группирует теги option,
<small> </small> — уменьшает размер шрифта на единицу,
<span> </span> — строчный элемент,
<strike> </strike> — зачёркнутый текст, устаревший тег,
<strong> </strong> — жирный шрифт,
<sub> </sub> — нижний индекс,
<sup> </sup> — верхний индекс,
<textarea> </textarea> — элемент формы, многострочное поле ввода,
<tt> </tt> — моноширинный шрифт, устаревший тег,
<u> </u> — подчёркнутый текст, устаревший тег,
<var> </var> — переменные языков программирования.

Читать далее: Новые теги HTML5


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Блочные теги HTML — Как создать сайт

Блочные теги языка HTML

HTML-теги
Блочные HTML-теги

Некоторые характеристики блочных тегов

  • В начале и в конце блочных тегов, автоматически ставится перенос строки.
  • У блочных тегов можно управлять шириной и высотой: width, height
  • У блочных тегов можно управлять CSS-свойством margin (внешний отступ)
  • Блочные теги занимают всю ширину, например если задать им фон, то фон займет всю ширину родительского элемента.
  • Так как блочные теги занимают всю ширину родительского элемента, то объектами находящимися внутри блочного тега, можно управлять с помощью горизонтального выравнивания: left, right, center, justyfi
  • Внутри блочных тегов можно размещать другие блочные теги, а также строчные теги.

Блочные HTML-теги по алфавиту

<address> </address> — адрес, информация об авторе, проекте,
<blockquote> </blockquote> — цитата,
<center> </center> — выравнивание элементов по центру,
<div> </div> — блочный элемент,
<fieldset> </fieldset> — элемент формы, группирует элементы формы,
<form> </form> — форма,
<h*> </h*> — заголовки от h2 до h6,
<hr> — горизонтальная линия,
<isindex> — поисковая строка, устаревший тег,
<menu> </menu> — обрамляет теги command, тег HTML5,
<ol> </ol> — нумерованный список,
<p> </p> — абзац,
<pre> </pre> — предварительно отформатированный текст,
<table> </table> — таблица,
<ul> </ul> — маркированный список,

Внимание, возможно тут не весь список блочных тегов, если какой-то отсутствует, напишите мне.

Читать далее: Строчные теги


Дата публикации поста: 3 апреля 2019

Дата обновления поста: 15 октября 2014


Навигация по записям

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *