Атрибуты тегов html: назначение и пример использования

Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете  именно те 20% тегов, которые Вам будут необходимы всегда.

Базовая структура

Тег Описание
<!DOCTYPE html> Объявление типа документа – сообщает вашему браузеру, какую версию HTML вы используете. Убедитесь, что вы используете правильный DOCTYPE, иначе ваша страница может отображаться некорректно.
<a> Определяет гиперссылку.
<article>  Определяет статью.
<aside>  Определяет некоторый контент, слабо связанный с содержимым страницы.
<body> Определяет тело документа.
<br> Создает одинарный разрыв строки.
<details>  Представляет виджет, из которого пользователь может получать дополнительную информацию или элементы управления по запросу.
<div> Задает раздел или раздел в документе.
<head> Определяет заголовок документа, содержащий информацию о документе.
<header>  Представляет заголовок документа или раздела.
<hgroup>  Определяет группу заголовков.
<h1> to <h6> Определяет заголовки HTML.
<hr> Проведите горизонтальную линию.
<html> Определяет корень HTML-документа.
<footer>  Представляет нижний колонтитул документа или раздела.
<main>  Представляет основное или доминирующее содержимое документа.
<nav>  Определяет раздел навигационных ссылок.
<p> Определяет абзац.
<section>  Определяет раздел документа, например заголовок, нижний колонтитул и т. Д.
<span> Определяет встроенный раздел документа без стиля.
<summary>  Определяет сводку для <details>элемента.

Как создать ссылку при помощи тега <А> ?

Вот так выглядит сам код ссылки:

<a href=»Здесь адрес ссылки»>Название ссылки</a>

Данный тег парный, у него есть открывающий тег — <a> и закрывающий — </a>, они отличаются между собой только косой чертой. Между данными тегами помещается текст который будет отображаться на ссылке.

Как создать ссылку при помощи тега <А> ?

В первый тег который называют открывающий, помещается атрибут href, при помощи которого задаётся адрес страницы или файлов. Адрес помещается между двойными кавычками. Всё что помещается между двойными кавычками называется значение. Запомним сразу, что атрибут и его значение помещается в открывающий тег. Между атрибутом и его значением есть знак равенства, равенство играет роль присваивания, то-есть, вот такому вот атрибуту присвоить вот это значение.

Читайте также:  Как перевести растровое изображение в векторное в фотошопе

Пример настоящей ссылки:

<a href=»»>Как создать сайт</a>

Атрибуты тега <meta>

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

Основные атрибуты тега HTML <meta> в <head>:

  • name;
  • content;
  • http-equiv;
  • charset.

Последний атрибут – charset – нужен для указания кодировки страницы. Он появился только в последней, пятой спецификации языка HTML. Наиболее часто встречающееся значение кодировки – utf-8 или “Юникод”.

Атрибуты name и content обычно используется в паре. У name может быть несколько значений:

  • description – краткое описание страницы, которое показывается в выдаче;
  • author – необязательный атрибут для указания авторства, имя создателя документа;
  • robots/norobots – разрешает или запрещает индексацию страницы поисковыми роботами;
  • follow/nofollow – разрешает или запрещает переход по ссылкам;
  • application-name – задает имя веб-приложения, если представляет веб-страницу, в других случаях не используется;
  • generator – используется для описания программного пакета, в котором сгенерирована веб-страница;
  • viewport – нужен для корректного отображения страницы на экране мобильного устройства;
  • keywords – ключевые слова, облегчающие ранжирование страницы поисковыми системами.

Атрибут тега HTML <meta> content (описание) будет хранить значение атрибута name”\ (имя). Например: <meta name=»description» content=»описание страницы»>. Такая запись означает, что для страницы существует какое-то краткое описание, которое нужно отобразить в браузере. Если пользователь будет искать информацию в Интернете и в выдаче появится эта страница, описание будет под ссылкой на нее. Что именно – указано в значении name. Атрибут content же сообщает, какое именно это будет описание. Значений description может быть несколько, написанных на разных языках. Описание страницы значительно влияет на ранжирование сайта в поисковых системах и помогает в привлечении пользователей. Но текст должен быть не только релевантен содержанию страницы, но и привлекателен для читателя. Поэтому правильное составление description – это целое искусство. Указать, какой именно язык используется в описании, нужно будет в дополнительном атрибуте lang.

Что такое теги на сайте (метки для создания навигации)

Давайте начнем с простого. Наверное, все вы видели, что под некоторыми статьями на сайтах находится поле с названием теги или метки, где перечислены какие-то слова. Для чего это делается? В общем-то, для облегчения навигации по данному сайту (сайт это…).

Читайте также:  6 способов сделать загрузочную флешку с Windows

В качестве тегов используются так называемые ключевые слова, набор которых кратко характеризует публикацию (допустим, для главной страницы моего блога подошел бы такой набор меток: создание сайтов; продвижение; раскрутка сайтов; заработок).

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

Что такое теги на сайте (метки для создания навигации)

Чтобы не искать нужные метки под статьями, владельцы вебсайтов очень часто создают так называемое облако тегов, которое может размещать в левой или правой колонке сайта или же в его футере (снизу). Выглядеть это безобразие на практике может так:

В нем обычно перечислены самые популярные метки, а посмотреть все теги можно будет нажав на соответствующую ссылочку. Иногда, более часто используемые тэги (они встречаются в большем числе статей на этом сайте) отображают более крупным шрифтом, а менее частые — более мелким.

Иногда для их отображения создают отдельную страницу, как было показано на предыдущем скриншоте.

Почему такой способ разметки с помощью тегов используется не на всех вебсайтах, если это удобно для пользователей? Нет их и на моем блоге, чему есть ряд объяснений. Хотя их использование предусмотрено в WordPress по умолчанию, а также существует масса плагинов по работе с тэгами.

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

Что такое теги на сайте (метки для создания навигации)

Получает огромный бардак, ценность которого в плане улучшения навигации, на мой взгляд, довольно-таки сомнительна. Для этой цели на крупном веб-проекте лучше использовать поиск по сайту. Хотя метки неплохо работают в социальных сетях, где можно с помощью тегов объединять информацию разных пользователей и просматривать ее в одном месте. ИМХО.

Синтаксис CSS-правил

Давайте разберем основу основ CSS, а именно, синтаксис написания CSS-правил. Сделаем это на примере правила для тега <h1> , которое мы написали выше.

Читайте также:  Acronis disk director как форматировать диск

Посмотрите на картинку:

Объявление стиля (или CSS-правило) состоит из 2-х частей:

  1. Селектор, в нашем случает h1 (о селекторах позже поговорим подробнее)
  2. Блок объявлений (находится после селектора в фигурных скобках)

В блоке объявлений, может находится множество объявлений. Каждое объявление состоит из:

  • Свойства, которое определяет что будет сделано (в примере text-align – т.е. текст будет выровнен);
  • Двоеточия «:» – разделяет свойство и значение;
  • Значение, которое описывает как браузер должен обработать свойство (в примере center – т.е. текст будет выровнен по центру)
Синтаксис CSS-правил

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

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

Вот справочный указатель на портале mdn:

Также мне нравится справочник:

Для CSS в этом справочнике, кроме собственно списка, есть разбивка по категориям, тоже иногда бывает удобно:

Практический алгоритм действий.

Предположим, стоит задача сделать красный текст на желтом фоне.

Мы понимаем, что надо:

  • Сделать цвет шрифта красным
  • Сделать желтый фон

Ищем подходящие свойства – это color и background-color. В итоге:

{     color: red;     background-color: yellow; }

1234 {    color: red;    background-color: yellow;}

Пример сложнее. Скажем, вам требуется, в каком-то блоке, фоном которого является картинка, написать текст. Вы пишите его и понимаете, что фоновая картинка слишком пестрая и текст на ней не читается.

Синтаксис CSS-правил

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

Но! Вот проблема: вы в принципе не понимаете, как это сделать, какие свойства искать, как к этому подступиться.

Выход простой – в большинстве случаев это кто-то уже делал, идете в поисковик и ищите. Главное правильно сформулировать запрос. Если с первого раза не нашли, переформулируйте запрос.

В нашем примере, введите в яндексе: css сделать полупрозрачный фон.

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

Если вам не совсем понятны примеры, то смотрите из каких свойств состоят правила, ищите эти свойства в справочнике и читайте описания.