Структурные html теги – Супершпаргалка по верстке для новичков: все основные HTML-теги

Какие теги определяют структуру html страницы, структура тега

Какие теги определяют структуру html страницы

От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.

Теги структуры документа html

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

<!DOCTYPE> — с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.

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

Какие теги определяют структуру html страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Все, тип документа указан и можно двигаться дальше.

<html> — главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

<body> — с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.

Какие теги определяют структуру html страницы

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

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

<h2> — <h6> — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h2 заключают название статьи или другой публикации, в h3 – подзаголовки, в h4 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.

Какие теги определяют структуру html страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

<p> — формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?

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

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

Структура тега html

Давайте сразу разберемся на примере.

<h2 class = "title">Заголовок</h2>

<h2 class = "title">Заголовок</h2>

Тут видно, что мы не просто написали <h2></h2>. В любой тег можно вписать дополнительные атрибуты. Они пишутся в открывающейся части элемента.

Какие теги определяют структуру html страницы

Сначала пишется имя самого атрибута, а потом задается его значение. В этом примере строчка class = «title» привяжет к нашему заголовку стилевой класс title, так что через него можно будет обратиться к этому элементу в css.

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

Любому html-элементу можно задавать какие-то атрибуты. Есть так называемые универсальные атрибуты, которые можно прописать любому элементу. К примеру, стилевой класс можно привязать к чему угодно. Также есть атрибуты, которые уникальны для каких-то тегов. Например:

<a href ="“#" target = "_blank"></a>

<a href ="“#" target = "_blank"></a>

Здесь атрибут target является уникальным для ссылки, так как ни для каких других элементов он не нужен и не прописывается. Эти и другие атрибуты вы можете выучить в процессе изучения языка HTML. Подробнее со структурой документа можно ознакомиться в учебнике по основам html.

Итог

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

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

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

Какие теги определяют структуру html страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Какие теги определяют структуру html страницы

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Структура HTML-документа: основные теги, пример

HTML – это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

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

Создание html-документа

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

Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

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

структура html документа

На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега – открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение .html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title> указать в разделе body или после него, то обработчик на него не обратит внимания.

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

Подключение стилей

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

Поисковые системы рекомендуют все стили выносить в отдельный файл, а в элементах просто использовать различные классы.

Подключается файл следующим образом.

<link rel = “stylesheet” href = “style.css” type = “text/css”>

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

стили в html

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

Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

Подключение скриптов

Скрипты подключаются следующим образом.

<script type=“text/javascript” src=“main.js”></script>

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй – где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

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

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

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

структура html документа что это такое

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным – цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием – фотография птицы.

Кроме этого, в теге img, можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

Тег

Назначение

<a>…</a>

Ссылки

<img>

Изображения

<p>…</p>

Абзац

<br>

Перенос текста на новую строку

<strong>…</strong>

Жирный текст

<i>…</i>

курсив

<s>…</s>

Перечеркнутый текст

<u>…</u>

Подчеркнутый текст

<ol></ol>, <ul></ul>

Списки

<table></table>

Таблицы

Как всё это можно представить в голове

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

создание html документа

Имеет место быть такой вариант:

 структура html документа основные теги

И такой:

структура html документа пример

Использование стилей

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

Например, можно указать стиль для заголовка. Тогда вам нужно написать h2 (поскольку стиль будет для заголовка второго уровня), открыть скобки и писать, какие свойства будут в этом элементе. Если вы знаете базовый английский, то проблем быть не должно. Все свойства названы человеческим языком.

использование стилей css

Если хотите указать этот стиль сразу для нескольких элементов, то напишите их через запятую.

использование нескольких стилей css

Результатом будет красный заголовок.

текстовый документ

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

классы css

Использовать их нужно вот так.

использование классов css

Обратите внимание: если вы указали настройки стилей для стандартного элемента, не нужно в дальнейшем писать слово class. Стиль будет применяться по умолчанию. В атрибуте class можно указать только те стили, которые у вас начинаются с точки.

Атрибуты

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен.

Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных).

Вложенные теги

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

Например:

Пример<B><I>вложенного</I></B>тега.

Результат: Пример вложенного тега.

Часто встречающейся ошибкой является перекрытие тегов.

Структурные теги html.

Тег <html> (<html> … </html>)

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

Тег <head> (<head>... </ head >)

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

Тег <title> определяет название документа, которое появится в верхней строке окна браузера.

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

Пример 1:

<head>

<title>ВолГУ, кафедра "Экономической информатики и управления": новости</title>

<meta http-equiv="keywords" content="системы, проектирование, автоматизированный, system, университет, вуз, кафедра">

<meta name="author" content="julia kritskaya, 2001, [email protected]">

</head>

Тег<body> (body>…</body>)

Тег <body> определяет начало и конец основной части (тела) HTML-документа. В теле документа находится его содержимое (часть документа, которая выводится в окно броузера). Атрибуты этого тега оказывают влияние на весь документ.

У тега <body> есть свои атрибуты:

Атрибуты:

alink = "#rrggbb" или имя цвета

Задает цвет активной ссылки (то есть цвет ссылки, выбираемой щелчком на ней кнопки мыши).

background = ur1

Задает путь к графическому файлу, который будет использован в качестве фо­новой заставки документа.

bgcolor = "#rrggbb" или имя цвета

Задает фоновый цвет документа.

link = "#rrggbb" или имя цвета

Устанавливает цвет по умолчанию для всех ссылок, имеющихся в документе.

text = "#rrggbb” или имя цвета

Устанавливает цвет по умолчанию для всего текста документа.

vlink = "#rrggbb" или имя цвета

Устанавливает цвет посещенных ссылок.

Только Navigator 4.0:

marginwidth = число

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

marginheight = число

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

Только Internet Explorer:

bgproperties = "fixed"

Если задано значение "fixed", то фоновое изображение не прокручивается вместе с содержимым документа.

leftmargin = число

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

topmargin = число

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

Для максимальной идентичности отображения в различных браузерах (Navigator 4.0 , Internet Explorer и т.д.) желательно прописывать атрибуты для каждого из них.

Цвет задается именем цвета или шестнадцатеричным RGB-значением (RED – GREEN – BLUER). На каждый цвет отводится 256 значений, обозначающих присутствие того или иного компонента в результирующем цвете.

Пример 2:

<HTML>

<HEAD>

<TITLE>Моя сраничка</TITLE>

</HEAD>

<BODY bgcolor=“#ffffff”>

Основной текст

</BODY> </HTML>

Структура HTML документа. Основные теги HTML.

Структура HTML документа

В первом выпуске рассылки хотелось бы подробней остановиться о формате и содержании рассылки.

Свою рассылку я начну с рассмотрения основ языка HTML.

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

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

Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.

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

Структура HTML документа

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Поехали…

Каждый HTML документ начинается со строчки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться.

Тег <!DOCTYPE …> весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.

Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным <!DOCTYPE …>.

Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению <!DOCTYPE …>, когда мы уже будем что-то уметь и сможем реально оценить его работу.

А пока движемся ниже по странице.

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

Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).

Значит, далее следует тег <HTML>. Он говорит браузеру, что страница, которую он открывает, является HTML документом.

Наверное, не совсем понятно слово тег?

Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.

С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» (<тег>). И закрывающий </тег> (с косой чертой). Например, <strong> жирный текст </strong>. Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Что такое тег, надеюсь, понятно.

Двигаемся дальше.

Предлагаю набрать что-нибудь своими руками.

Итак, приступим.

Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:

Структура HTML документа

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta name="author" content="Ф.И.О." /> <meta name="description" content="описание страницы" /> <meta name="keywords" content="слово, слово, слово" /> <meta http-equiv=refresh content="30;url=www.mysite.ru" /> <title>Заголовок окна браузера</title> </head> <body> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<meta name="author" content="Ф.И.О." />

<meta name="description" content="описание страницы" />

<meta name="keywords" content="слово, слово, слово" />

<meta http-equiv=refresh content="30;url=www.mysite.ru" />

<title>Заголовок окна браузера</title>

</head>

<body>

</body>

</html>

Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.

Между тегами <head> и </head> располагается информация, не отображаемая на странице.

Например, тег <meta…>, кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег <meta http-equiv=refresh content="30; url=www.mysite.ru"> заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).

Тег <title> определяет текст в заголовке окна браузера. (Тег закрывающийся).

title

Также в теге <head> могут располагаться скрипты javascript или vbscript, заключенные в теги <script>….</script>.

И стили, заключенные в теги <style>….</style>.

На этом с тегом <head> пожалуй мы закончим.

Далее у нас следует тег <body>.

Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тега <body> есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.

Итак…

bgcolor — устанавливает цвет фона документа. (<body bgcolor="black">)

background — указывает на url-адрес изображения — фона документа.

text — устанавливает цвет текста документа.

link — устанавливает цвет гиперссылок.

vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.

alink= — устанавливает цвет гиперссылок при нажатии.

bgproperties=fixed — фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.

Эти параметры можно объединять, например, на этой страничке используется:

<BODY bgcolor="black" text="white" link="red" alink="blue">

<BODY bgcolor="black" text="white" link="red" alink="blue">

Давайте и наберем эту строку в нашем предыдущем примере.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta name="author" content="Ф.И.О." /> <meta name="description" content="описание страницы" /> <meta name="keywords" content="слово, слово, сдлово" /> <meta http-equiv=refresh content="30;url=www.mysite.ru" /> <title>Заголовок окна браузера</title> </head> <BODY bgcolor="black" text="white" link="red" alink="blue"> Текст, который мы увидим в своем браузере!!! </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<meta name="author" content="Ф.И.О." />

<meta name="description" content="описание страницы" />

<meta name="keywords" content="слово, слово, сдлово" />

<meta http-equiv=refresh content="30;url=www.mysite.ru" />

<title>Заголовок окна браузера</title>

</head>

<BODY bgcolor="black" text="white" link="red" alink="blue">

Текст, который мы увидим в своем браузере!!!

</body>

</html>

Должен быть белый текст на черном фоне, так как на картинке.

html

На этом, наш сегодняшний выпуск рассылки о структуре HTML-документа, закончен.

Также Вы можете скачать видео-урок себе на компьютер!

Структура HTML документа

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее html

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Новые теги HTML5 » Энциклопедия HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.

Семантическое описание структуры страницы в HTML5

Новые теги в HTML5 — это теги, семантически описывающие структуру страницы, предназначены для того чтобы компьютерная программа (например поисковый робот), смогла отличать основной контент, от остальных частей страницы: шапки, подвала, меню, сайдбара, повторяющихся (динамических) блоков и т.д. Также идёт семантическое разделение на уровне основного контента (текста старницы).

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

<header> </header> — теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также теги header можно использовать как верхнюю часть тега section.

<nav> </nav> — теги обрамляющие основное меню на сайте.

<article> </article> — теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

<aside> </aside> — теги обрамляющие сайдбар. Сайдбар — это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки.

<footer> </footer> — теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section

<section> </section> — теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов <div>, практическая же польза от них может появиться лишь тогда, когда поисковые системы (Яндекс, Гугл) начнут рекомендовать, где и когда использовать эти теги, для более высокого ранжирования сайтов.

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

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

<time> </time> — теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

<details> </details> — теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).

<summary> </summary> — теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера), находятся между тегами details.

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

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

<progress> </progress> — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

<command /> — тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.

<menu> </menu> — между этими тегами помещают тег command.

<output> </output> — теги предназначены для вывода работы скрипта.

<datalist> </datalist> — теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

<figcaption> </figcaption> — теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..

<figure> </figure> — теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

<hgroup> </hgroup> — теги предназначены для группировки заголовков h*

<keygen /> — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<ruby> </ruby> — теги обрамляют текст и аннотацию к нему.

<rt> </rt> — теги находятся между тегами ruby, предназначены для обрамления аннотации.

<rp> </rp> — теги предназначены для браузеров которые не поддерживают теги ruby.

<wbr /> — тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

<audio> </audio> — теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

<video> </video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

<source /> — тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.

<canvas> </canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Читать далее: Устаревшие теги HTML5

Отправить ответ

avatar
  Подписаться  
Уведомление о