Структура сайта html: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

Типовая структура страницы в HTML5 — CSS-LIVE

Дополнение от 1.03.2016: у нас есть более свежая статья на эту же тему (перевод заметки редактора спецификации W3C HTML5).

Типовая структура страницы в HTML5:

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ваш сайт</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Ваше меню</li>
			</ul>
		</nav>
	</header>
	
	<section>
	
		<article>
			<header>
				<h3>Заголовок статьи</h3>
				<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
			</header>
			<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
</p> </article> <article> <header> <h3>Заголовок статьи</h3> <p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p> </header> <p>Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p> </article> </section> <aside> <h3>Об авторе</h3> <p>Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль..</p> </aside> <footer> <p>Copyright 2014 Ваш сайт</p> </footer> </body> </html>
P.S. Это тоже может быть интересно:

Структура html документа — разбор страницы с примерами

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

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

Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

<!DOCTYPE html>
<html>
    <head>
        <title>Профессиональное создание сайта в интернете с примерами</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Как создать сайт в интернете</h2>
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
    </body>
</html>

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

Визуальный пример html страницы

Тег DOCTYPE

Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

<!DOCTYPE html>

Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.

Тег HTML

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

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

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

Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.

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

Тег title

У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
</head>

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

Тег meta

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

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

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
    <meta charset="utf-8">
</head>

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

Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры).

Тег body

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

Обратите внимание, что body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h2. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.

Синтаксис html

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

<!DOCTYPE html>
<html><head>
<title>Профессиональное создание сайта в интернете с примерами</title><meta charset="utf-8">
</head><body><p>Здесь размещается содержание документа, которое видно всем пользователям.</p></body>
</html>

Браузеру будет все равно.

Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

<!DOCTYPE html>
<html>
    <head>
        <title>Название документа</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Название материала</h2>
        <p>Основной текст</p>
    </body>
</html>

То есть тег head должен идти отступом в одну табуляцию относительно тега html. Body идет на уровне с head поскольку он тоже вложен в контейнер html.

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Основной текст</p>
</body>
</html>

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

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

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

Важно четко соблюдать порядок!

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

Правильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
</body>

Неправильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.
</body>
    </p>

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

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

Сам комментарий может быть, как однострочным, так и многострочным.

<!DOCTYPE html><!--Указываем тип документа-->
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8"><!--Кодировка-->
</head>
<body>
    <!--Главное содержание страницы для пользователей-->
    <p>Основной текст</p>
</body>
</html>

Прописывается он между конструкциями <!— —>.

Как создать файл html

Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

  • Brackets
  • Блокнот
  • Notepad++
  • Sublime Text
  • Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас), который мы выше разбирали. Он должен всегда присутствовать.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Профессиональное создание сайта в интернете с примерами</title> 
        <meta charset="utf-8"> 
    </head> 
    
    <body> 
        <h2>Как создать сайт в интернете</h2> 
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p> 
   </body> 
</html>

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

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

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

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8.

<meta charset="utf-8">

Для чего вообще нужна кодировка?

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

Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

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

К сожалению, это не всегда получалось.

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

Неправильно задана html кодировка

Как решение этой проблемы была создана универсальная кодировка utf-8.

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

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу

Сейчас расскажу, как сохранить html страницу правильно. После того, как задали кодировку и структуру html страницы, вам нужно нажать на «сохранение». Заходим во вкладку «Файл» —> «Сохранить как…».

Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html.

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

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

И как вы уже должны заметить, расширение файла должно быть html. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл

Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы

Еще хочу вам рассказать, как можно посмотреть html код страницы прямо в браузере. Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U. В новой вкладке вам откроется исходный код страницы сайта.

Исходный код сайта

Еще можно в адресной строке прямо перед адресом страницы прописать:

view-source:

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

Еще в браузерах есть встроенный инструмент веб-разработчика. Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.

Инструмент разработчика в браузере

Во вкладке «Elements» слева будет html код, а справа стили CSS. Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

На этом все!

Теперь вы знаете, как создать html страницу. Для этого мы рассмотрели саму структуру документа. Также я дал вам некоторые инструменты для удобной работы с кодом. Еще были важные правила по кодировке и работе с файлами. Обязательно их соблюдайте!

Файловая структура сайта и структура HTML

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

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

Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится «магазин»). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.

Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда Вы откроете index.html в браузере, Ваш браузер начнет обрабатывать HTML-код и, когда браузер встретит ссылку на style.css, он возьмет из этого style.css все CSS-стили и применит их к сайту.

На данный момент можно сказать, что в index.html будет находиться содержимое: текст, картинки. А в style.css будет находиться всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.

Для разработки Вам необходим редактор SublimeText. Скачайте его за считанные секунды на официальном сайте sublimetext.com и установите. Это займет меньше 1 минуты.

Откройте Ваш index.html в редакторе SublimeText и вставьте следующий код:

<!DOCTYPE html>
<html lang="en">
   <head>
	<meta charset="utf-8">
	<title>Store</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>		
   </body>
</html>

Посмотрите на этот код. В строке <link rel=»stylesheet» type=»text/css» href=»css/style.css»> как раз указывается ссылка на style.css (link переводится как «ссылка»). Здесь путь до style.css указывается в атрибуте href. В данном случае «css/style.css» это относительный путь, то есть путь относительно главного файла index.html (по этому пути браузер перейдет из index.html в папку css, а потом благодаря слеш перейдет в сам файл style.css).

То есть еще раз. Когда Вы открываете файл index.html в браузере, браузер начинает обрабатывать HTML-код сверху вниз. Когда он встречает строку <link rel=»stylesheet» type=»text/css» href=»css/style.css»>, он (браузер) благодаря кусочку кода href=»css/style.css» переходит в папку css и находит в ней файл style.css.

Давайте разберем весь вышеприведенный HTML-код. Данный код — это основа основ HTML. То есть весь этот код в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть.

Первая строка <!DOCTYPE html> просто сообщает браузеру, что это HTML-код.

Во второй строке открывается тег <html>. Обратите внимание, что закрывается он в самой последней строке кода — </html>. Именно между тегом <html> и </html> находится ВЕСЬ HTML-код. У тега <html> указан атрибут lang, он равен en. Это сделано для того, чтобы браузер сразу понял, что данная страница сайта на английском языке. Когда вы будете делать русскоязычные сайты, то нужно будет указывать lang=»ru».

Что такое тег в HTML

Название тега — это только первое слово после открывающей скобки <. То есть в случае с <html lang=»en»> тег называется html, а lang — это атрибут тега, en — это значение данного атрибута. Посмотрите внимательно на картинку:

Теги html, head и body

Непосредственно внутри <html></html> могут быть только 2 тега — это head и body. Все остальные теги должны находится уже либо внутри head, либо внутри body.

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

Эти 2 тега — это картинка, которая называется favicon (фавикон), и заголовок страницы. Про фавикон я расскажу позже. А заголовок страницы в нашем коде указан в теге title. В нашем случае этот заголовок — Store.

Еще в <head></head> есть тег <meta charset=»utf-8″>. Он указывает, что кодировка сайта — utf-8. Об этом можете не задумываться, а просто указывать именно эту кодировку в каждой новой верстке. Раньше были различные кодировки, теперь всегда нужно указывать utf-8.

Также, в head есть тег link со ссылкой на style.css, про который Вы уже знаете.

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

Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.

На этом про структуру сайта и структуру HTML всё. Переходите к следующему уроку, где Вы уже начнете верстать и познакомитесь с CSS. Следующий урок —»Верстка шапки».

В данном уроке вы узнали

.html — расширение, по которому браузер «понимает», что в файле находится HTML-код.

head — тег для служебной информации сайта.

body — тег для всего содержимого сайта.

title — тег для заголовка страницы сайта.

href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка «гипер-ссылка». Атрибут href может быть не только у тега link.

Следующий урок —»Верстка шапки».

Правильная базовая структура веб-страницы & новости по созданию сайтов от ABCname

Базовая структура веб-страницы

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

Базовые элементы страницы веб-сайта

Заголовок веб-страницы

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

Панель навигации сайта

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

Основное содержание веб-страницы

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

Боковая панель страницы

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

Нижний колонтитул

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

Составные части HTML-макета веб-страницы более подробно

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

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

Для реализации такой семантической разметки HTML предоставляет специальные теги, которые используют для представления разделов, например:

Заголовок: < header >.

Панель навигации: < nav >.

Основное содержимое: < main >, с различными подразделами содержимого, представленными элементами < article >, < section > и < div >.

Боковая панель: < aside >; часто помещается внутри < main >.

Нижний колонтитул: < footer >.

Итог

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

Помогла ли вам статья?

350 раз уже помогла

Комментарии: (0) Написать комментарий

Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой продолжим раздел HTML. Эта запись поможет разобраться вам со структурой HTML документа. На самом деле, структура HTML документа очень простая: границы документа, заголовок, тело и декларация. О каждом элементе структуры документа и его назначении вы можете узнать из этой публикации.

Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа

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

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

Содержание статьи:

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

Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.

Открыв index.htmlв браузере, нажмите F12, либо нажмите правой кнопкой мыши в области просмотра и из контекстного меню выберите пункт «Просмотреть код».

Смотрим код сформированной HTML страницы в браузере

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

Код HTML страницы в консоли браузера

А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».

У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:

Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим. Данный пример очень показательный по двум причинам:

  1. Вы увидели структуру HTML документа.
  2. Вы увидели, как браузер обрабатывает HTML код.

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

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

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

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

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

Сверху мы видим HTML тэг <!DOCTYPE>, этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг <!DOCTYPE>. Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.

Далее зеленой линией обозначен тэг <html>, который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов <html> и </html>, иначе документ будет невалидным. Для простоты понимания структуры HTML документа можно представить, что тэги <html>и </html> это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.

Но также на рисунке мы видим, что наш контейнер <html>состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге <title>.

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

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

Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>

Пожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом <head>, конец заголовка HTML документа обозначается закрывающим тэгом </head>.

Внутри заголовка HTML документа прописывается вся необходимая служебная информация:

  1. В заголовке указывается кодировка HTML документа.
  2. Так же здесь подключатся таблицы стилей.
  3. Заголовок HTML документа используется для подключения файлов JavaScript.
  4. В заголовке расположено описание HTML документа.
  5. В заголовке указывается название HTML документа.
  6. В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.

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

Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги <h2>, <h3>, <h4>и так до <h6>, эти тэги делят документ на разделы.

Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>

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

Тело HTML документа является частью структуры и предназначено для отображения содержимого пользователя, хотя это не означает, что пользователь будет видеть все HTML элементы после того, как браузер проанализирует код страницы, так как некоторые HTML элементы могут быть намеренно скрыты стилями, заданными в CSS или удалены при помощи JavaScript кода.

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

Вывод: тело документа – часть структуры HTML документа, которая отображается пользователю в области просмотра браузера.

Границы HTML документа. HTML тэг <html>

Если не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг. Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг <html>.

Так и в HTML: весь HTML документ представляет собой один тэг <html>, внутри которого должно быть обязательно два вложенных тэга: <head>и <body>. За пределами границы HTML документа, кроме декларации, ничего быть не должно, на то это и граница.

Важной особенностью структуры HTML документа является то, что за пределами <html>…</html>не должно быть других тэгов, а внутри <html> могут быть только тэги <head>и <body>. А вот внутри тэгов <head>и <body>может быть сколь угодно много тэгов, правда внутри <head>служебных, а внутри <body>тех тэгов, которые видны пользователю.

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

Вывод: тэг <html> определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги <head>и <body>в том порядке, как они написаны, а внутри тэгов <head> и <body> можно писать сколь угодно много тэгов.

Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE

Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).

Исходя из вышесказанного, браузеру нужно «понимать»: с какой версией HTML он имеет дело или может он работает не с HTML, а с xHTML? Как ему это понять, чтобы правильно отобразить документ.

Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг <!DOCTYPE>, мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.

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

Пример структуры HTML документа

Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Структура HTML документа</title> </head> <body> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

 

<html lang=»ru-RU»>

 

<head>

 

<meta charset=»UTF-8″>

 

<title>Структура HTML документа</title>

 

</head>

 

<body>

 

<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>

 

</body>

 

</html>

Теперь мы создали правильный HTML документ, описав его структуру, отображаться в браузере он будет примерно следующим образом.

Так выглядит HTML документ в браузере с правильно заданной структурой

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

Так же обратите внимание на то, что на вкладке появился текст: «Структура HTML документа», это получилось благодаря тому, что внутри заголовка HTML документа мы использовали тэг <title>, который используется для того, чтобы давать имена HTML страницам. На картинке для примера я оставил вкладку, которая принадлежит странице из прошлой записи. Еще внутри заголовка есть мета-тэг с указанием кодировки документа.

Сравниваем структуру HTML документа со структурой HTTP протокола

Ни для кого не секрет, что в сети Интернет основным протоколом передачи данных является HTTP, который расшифровывается, как протокол передачи гипертекста и который был разработан одним и тем же человеком, что и HTML в ЦЕРНе.

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

Но если вам мало, то добавим: и HTTP запрос и HTTP ответ начинаются со статусной строки, если мы говорим про запрос, то в статусной строке указывается метод HTTP протокола, который говорит HTTP серверу о том, как выполнить запрос, а ответ сервера содержит специальный HTTP код состояния, который говорит клиенту о том, как он понял этот запрос. Это похоже на DOCTYPE?

Как браузер интерпретирует HTML документ

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

HTTP клиент в нашем случае – это браузер. По HTTP протоколу чаще всего передаются HTML документы. Из-за особенностей реализации HTTP протокола и структуры HTML документа браузеры реализованы так, что они читают и интерпретируют HTML код слева направо и сверху вниз: сначала браузер проверяет версию HTML, указанную в декларации, затем он видит тэг <html>, который говорит ему о том, что начался HTML документ.

Далее браузер видит тэг <head> и понимает, что сейчас он получит служебную информацию, которая ему нужна, чтобы правильно отобразить документ. Кстати, если браузер увидит, что вы подключаете какой-нибудь скрипт или таблицу стилей, то он будет делать запросы к серверу, чтобы получит недостающие файлы. Увидев закрывающий тэг </head> браузер понимает, что заголовок HTML закончился.

За тэгом <head> браузер видит тэг <body>, который говорит ему о том, что началось тело документа, которое нужно показать клиенту. Проанализировав тело, браузер увидит закрывающий тэг </body> и при этом поймет, что закончилось тело.

Об окончании документа браузер понимает по закрывающему тэгу </html>

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

» УРОК 1. СТРУКТУРА HTML ДОКУМЕНТА

Перед началом работы создадим файл index.html, который будем редактировать в блокноте (Notepad++). 

 

Задаем тип документа с помощью <doctype>

Строка  <!DOCTYPE html> идет первой в файле HTML и перед ней не должно быть пробелов и пустых с трок.

 

<html>

Внутри элемента <html> помещается весь код

В теге html указываем атрибут lang, который определяет язык содержимого в документе

<head> — голова

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

Содержимое тега, за исключением заголовка, не отображается в браузере.

 

 

<body> — тело

<meta> — метатеги

Кодировка символов  в теге head указывается следующим через метатэг <meta charset=»utf-8″>

В description и keywords указывается описание сайта (description) и ключевые слова (keywords)

<title> — заголовок страницы

Чрезвычайно важный тег.

Заголовок указывается в теге head:

<title>Разработка сайтов с помощью HTML5</title>

 

<link> — ссылка на style.css

Тэг используется для подключения к документу стилей, сценариев и т.д.    

     <link rel=»stylesheet» href=»style.css»> 

В итоге код страницы будет выглядеть следующим образом:

Таблица стилей — это набор правил форматирования, по­зволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера. Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволя­ет воспользоваться преимуществами новых возможностей HTML5.[1]

В HTML5 не нужно указывать тип подключаемой таблицы стилей (атрибут type больше не используется). Достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отно­шение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что styles.css — это CSS-файл со стилями.

[1] Гоше X. Д. HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с

Выстраивание логической структуры страницы сайта на HTML5

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

Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как <header> (шапка сайта), <section>, <aside>, и <footer> (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги <div> для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на <div> очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.

Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.

Положительные стороны использования новых тегов

Поисковая оптимизация

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

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

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

Доступность

Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:

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

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

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

Коротко об основном назначении структурных тегов:

section

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

Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье «Построение структуры документа в HTML5 используя section»

Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к следующему примеру кода для закрепления материала

<article>
   <h2>Заголовок статьи</h2>
   <p>Вступительное слово...</p>
   <section>
      <h2>Заголовок подраздела статьи</h2>
      <p>Контент подраздела</p>
   </section>
   <section>
      <h2>Заголовок второго подраздела статьи</h2>
      <p>Контент подраздела</p>
   </section>
</article>

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

Некоторые пользователи утверждают, что <section> — это не более, чем замена тега блочной верстки <div>. Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к <div>. Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.

article

Опытные веб-мастера называют эту секцию частным случаем тега <section>. Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.

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

Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: <section> или <аrticle>. К основным разногласиям по этому вопросу можно отнести следующие моменты:

  • для создания главного контейнера веб-страницы следует использовать <section>, <аrticle> или <div>. С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.
  • как именно оформлять шапку сайта, а точнее какие теги использовать?
  • и, наконец, как работать с основным контентом сайта? Нужно использовать <section> с <аrticle> внутри или же исключительно пользоваться одним <аrticle>.

Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов <acronim> и <abbr>. В тот раз проблема была решена достаточно просто, но радикально: отказались от использования <acronim>.

И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать <аrticle>, если можно отказаться от него и работать только с <section>? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.

Скорее всего в данном случае отказаться от <аrticle> будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в предыдущей версии HTML. Решением данного вопроса стало бы усовершенствование <section> таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.

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

  1. Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
  2. Если рационально было бы добавить атрибуты pubdat или cite.
  3. В случае полной автономности рассматриваемого нами фрагмента кода.

aside

Создан для отделения основного содержимого страницы от вспомогательного.

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

Чаще всего подобная информация на сайте располагается в сайдбаре.

header

Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как <hgroup> и <h2>-<h6>. Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.

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

<header>
   <a href="/"><img src="logo.png" alt="Vaden Pro/></a>
   <ul>
      [меню]
   </ul>	
   [поиск]
</header>

Однако не стоит ограничивать данный тег шапкой для веб-страницы. <header> он может располагаться внутри <section>, <article>, <aside> и в особых исключительных случаях в <nav>. При таком подходе тег <header> является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда <header> используется внутри <article>:

<article>
   <header>
      <h2>Важный текст</h2>
      <time>21.02.10</time>
   </header>
   [Текст публикации]
</article>

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

<article>
   <header>
      <h2> Важный текст </h2>
   </header>
   [Текст публикации]
</article>

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

<article>
   <h2> Важный текст </h2>
   [Текст публикации]
</article>

footer

Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом <footer>:

<footer>
   <p>&copy; 2014 Vaden Pro</p>
   <p>Все права защищены</p>
</footer>

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

<article>
   <header>
      <h2>Важная информация</h2>
      <time>05.04.2015</time>
   </header>
   <footer>
      <div>Данил Гойда</div>
      <a href="#">об авторе</a> | <a href="#">Все публикации автора</a>
   </footer>
   [сама публикация]
</article>

nav

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

<header>
   <a href="/"><img src="logo.png" alt="Vaden Pro"/></a>
   <nav>
      <ul>
         [меню]
      </ul>	
   </nav>
   [поиск]
</header>

Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:

<nav>
   <a href="">Сложная навигация</a>
   <section>
      <h2>Первый раздел сайта</h2>
      <ul>
         <li><a href="">пункт</a></li>
         [...]
      </ul>
   </section>
   <section>
      <h2>Второй раздел сайта</h2>
      <ul>
         <li><a href="">Пункт</a></li>
      </ul>
   </section>
</nav>

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

Оценок: 26 (средняя 3.2 из 5)

Базовая структура веб-страницы HTML — Базовые теги HTML

Веб-страница, созданная с использованием HTML, имеет базовую и существенную структуру. Страница всегда начинается с начального тега элемента html и всегда заканчивается конечным тегом элемента html следующим образом:

Пример 1


... веб-страница ...


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

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

Есть только один набор из ... тегов, один набор из ... тегов и один набор из тегов ... . Эту базовую структуру веб-страницы HTML можно проиллюстрировать следующим примером:


Заголовок или заголовок документа имеет мало содержания и в основном содержит инструкции в коде HTML о том, как присвоить заголовок, категоризировать и «запустить» веб-страницу.С другой стороны, раздел body или документ body содержит почти все содержимое, которое вы разместите на своей веб-странице, и это содержимое — обычно текст, но также может быть изображениями и звуками — форматируется с использованием большего количества кода HTML. Весь текст, который вы поместите за пределы любых угловых скобок, станет «видимым текстом» и будет отображаться в вашем веб-браузере на вашей веб-странице. Поместив этот текст между начальным и конечным тегами определенных элементов HTML, вы можете указать веб-браузеру, где и как отображать этот текст.


Добавление заголовка на вашу веб-страницу


Хорошо, давайте продолжим пример 2. (Щелкните здесь, чтобы прочитать предыдущую страницу в этом руководстве, если вы не знакомы с тем, как создавать и редактировать HTML-документ.)

Веб-страницы обычно имеют заголовок, который появляется в строке заголовка, которая запускается. в самом верху веб-страницы. Этот заголовок создается с использованием тегов ... , которые сами всегда вложены в теги ... .Весь текст, появляющийся после начального тега </code> и перед конечным тегом <code> , будет отображаться как заголовок вашей веб-страницы. Следовательно, следующий HTML-код создаст веб-страницу под названием «Моя домашняя страница»:

Пример 3


</code> <code> Моя домашняя страница </code> <code>

Добавление заголовка на вашу веб-страницу

Добавление содержимого на вашу веб-страницу


Теперь, чтобы добавить контент на вашу веб-страницу, все, что вам нужно сделать, это ввести текст между ... тегов. Так что давайте, например, поставим слова «ПРИВЕТ, МИР!» на вашей веб-странице.

<code> Моя домашняя страница </code>

ПРИВЕТ, МИР!

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

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

Глобальная структура документа HTML

Глобальная структура документа HTML

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. раздел декларативного заголовка (разделенный заголовком HEAD элемент),
  3. тело, которое содержит фактическое содержимое документа.Тело может быть реализуется элементом BODY или FRAMESET элемент.

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела. Разделы 2 и 3 должны быть разделены кодом HTML . элемент.

Вот пример простого HTML-документа:


   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
      

Привет, мир!

Допустимый документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих декларации типов документов в своих документах. DTD различаются по элементам они поддерживают.

  • HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
     
  • HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
     
  • DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
     

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [OASISOPEN]).Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного справочнику SGML. информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходной форме.

Начальный тег: необязательно , Конечный тег: дополнительный

Определения атрибутов

версия = cdata [CN]
Не рекомендуется. The значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, потому что он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остальная часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:


  ... Сюда идет голова, тело и т.д. ... 

 

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: необязательно , Конечный тег: дополнительный

Определения атрибутов

профиль = uri [CT]
Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделенные пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, даже если эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

Элемент HEAD содержит информацию о текущем документе, например в качестве названия, ключевых слов, которые могут быть полезны для поисковых систем, и других данных это не считается содержанием документа. Пользовательские агенты обычно не отображают элементы, которые появляются в ГОЛОВА как содержимое.Однако они могут сделать Информация в ГОЛОВЕ доступна пользователям через другие механизмы.

7.4.2 Модель

TITLE элемент
 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

 

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

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

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE , доступный пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, в качестве подписи, произносится).

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


<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ... 


 

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка «(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным образом. контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ... 
 

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

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

7.4.4 Мета-данные

Примечание. The W3C Структура описания ресурсов (см. [RDF10]) стала W3C. Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

HTML позволяет авторам указывать метаданные — скорее, информацию о документе. чем содержимое документа — разными способами.

Например, чтобы указать автора документа, можно использовать META следующий элемент:


 

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

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

Указание метаданных

Как правило, определение метаданных состоит из двух шагов:

  1. Объявление свойства и значения для этого свойства.Это можно сделать за два способы:
    1. Изнутри документа через элемент META .
    2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
  2. Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент
META
 META  - O EMPTY - общая метаинформация ->
 http-Equiv  NAME #IMPLIED - Имя заголовка HTTP-ответа -
    name  NAME #IMPLIED - имя метаинформации -
    content  CDATA #REQUIRED - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]
Этот атрибут определяет имя свойства.В этой спецификации нет списка допустимые значения для этого атрибута.
содержимое = cdata [CS]
Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]
Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

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

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а атрибут Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:


 

Атрибут lang можно использовать с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора объявлено французским:


 

Примечание. Элемент META — это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Когда свойство указано в мета-мете элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:


 

можно также записать:


 
META и заголовки HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в http-Equiv для создания заголовка в стиле [RFC822] в HTTP-ответ. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :


 

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT
 

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

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

META и поисковые системы

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

<- Для носителей английского языка (США) ->

<- Для носителей британского английского ->

<- Для носителей французского ->

 

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,г., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

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

META и PICS Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

Этот пример показывает, как можно использовать объявление META для включения PICS 1.1 этикетка:

<ГОЛОВА>
 
   <em> ... название документа ... </em> 

 
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5


 
Профили метаданных
Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля — это URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставить интерфейс для поиска в каталогах HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
  • В качестве ссылки.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторские права», «ключевые слова» и «дата» — имеют свои значения, установленные последующие Декларации META .

 
   Как заполнять титульные листы меморандума 
  
  
  
  
 
 

Во время написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы на INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута схемы «Месяц-День-Год» устраняет неоднозначность этой даты ценить.

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

Например, следующие Схема Объявление может помочь пользовательскому агенту определить, что значением свойства «идентификатор» является код ISBN номер:


 

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель

BODY элемент

Начальный тег: необязательно , Конечный тег: дополнительный

Определения атрибутов

фон = uri [CT]
Не рекомендуется. The значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • bgcolor (цвет фона)
  • загрузка , загрузка (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

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

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста — белый, цвет текста переднего плана — черный, а цвет гиперссылок на красный изначально, фуксия при активации и бордовый один раз посетил.


<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ... 


 

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:


<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ тип = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ... 


 

Использование внешних (связанных) таблиц стилей дает вам возможность изменять презентация без изменения исходного HTML-документа:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут присваивает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.
Модель Атрибут id присваивает уникальный идентификатор элемента (который может быть проверен парсером SGML). Например, следующие абзацы отличаются своим значением id :

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

  • Как средство выбора таблицы стилей.
  • В качестве целевого якоря для гипертекста ссылки.
  • Как средство ссылки на конкретный элемент из сценария.
  • Как имя объявленного элемента OBJECT .
  • Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

Модель атрибут class , с другой стороны, назначает одно или несколько имен классов элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса может быть общим для нескольких экземпляров элемента. Класс атрибут имеет несколько ролей в HTML:

  • Как селектор таблицы стилей (когда автор хочет присвоить стилевую информацию набору элементов).
  • Для общей обработки пользовательскими агентами.

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

Переменная объявлена ​​дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках красным:

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}
 

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

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

Предположим, например, что мы пишем документ о программировании язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ тип = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ... 

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. The Атрибут id имеет то же пространство имен, что и атрибут name Атрибут при использовании для имен привязок. Пожалуйста обратитесь к разделу, посвященному анкерам, с номером . id для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», а другие — «встроенный» (также известный как «уровень текста»). Это различие основано на несколько понятий:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «более крупные» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, блочные элементы начинаются с новых строк, встроенных элементов. не надо. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность
По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

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

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

7.5.4 Группирование элементов:

DIV и SPAN элементов

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выровнять (выровнять)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и Элементы SPAN , в сочетании с id и Атрибуты класса предлагают общий механизм для добавления структуры к документы.Эти элементы определяют содержимое как встроенное ( SPAN ) или блочного уровня ( DIV ), но не накладывать никаких других идиом представления на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang, и т. Д., Чтобы настроить HTML под свои нужды и вкусы.

Предположим, например, что мы хотим сгенерировать документ HTML на основе база данных информации о клиентах. Поскольку HTML не включает элементы, которые идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемого структурного и презентационного эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать информация:



Информация о клиенте: <ТАБЛИЦА> Фамилия: Бойера Имя: Стефан Тел: (212) 555-1212 Электронная почта: sb @ foo.org

Информация о клиенте: <ТАБЛИЦА> Фамилия: Лафон Имя: Ив Тел: (617) 555-1212 Электронная почта: [email protected]

Позже мы можем легко добавить объявления таблиц стилей для точной настройки представление этих записей в базе данных.

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

Визуальные пользовательские агенты обычно помещают разрыв строки до и после DIV элементы, например:

aaaaaaaaa

bbbbbbbbb
ccccc

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc
 

7.5.5 Заголовки:

h2 , h3 , h4 , h5 , H5 , H6 элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выровнять (выровнять)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

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

В HTML есть шесть уровней заголовков, из которых h2 является самым важным, а H6 — самым важным. в мере. Визуальные браузеры обычно отображают более важные заголовки в более крупном масштабе. шрифты, чем менее важные.

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

Лесные слоны

В этом разделе мы обсуждаем малоизвестных лесных слонов. ... этот раздел продолжается ...

Среда обитания

Лесные слоны живут не на деревьях, а среди них. ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ тип = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}


 

Нумерованные разделы и ссылки
HTML сам по себе не вызывает номера разделов быть сформированным из заголовков. Эта возможность может быть предложена пользовательскими агентами, тем не мение. Скоро языки таблиц стилей, такие как CSS, позволят авторам управлять генерация номеров разделов (удобно для прямых ссылок в печатных документы, как в «См. раздел 7.2 «).

Некоторые люди считают, что пропуск уровней заголовков — это плохо упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4 h2, поскольку уровень заголовка h3 пропускается.

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для предоставления контактной информации. для документа или основной части документа, например формы.Этот элемент часто появляется в начале или в конце документа.

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  
$ Дата: 2018/03/20 02:36:52 $

Глобальная структура документа HTML

Глобальная структура документа HTML

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. раздел декларативного заголовка (разделенный заголовком HEAD элемент),
  3. тело, которое содержит фактическое содержимое документа. Тело может быть реализуется элементом BODY или FRAMESET элемент.

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела.Разделы 2 и 3 должны быть разделены кодом HTML . элемент.

Вот пример простого HTML-документа:


   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
      

Привет, мир!

Допустимый документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих декларации типов документов в своих документах. DTD различаются по элементам они поддерживают.

  • HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
     
  • HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
     
  • DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
     

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [OASISOPEN]).Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного справочнику SGML. информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходной форме.

Начальный тег: необязательно , Конечный тег: дополнительный

Определения атрибутов

версия = cdata [CN]
Не рекомендуется. The значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, потому что он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остальная часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:


  ... Сюда идет голова, тело и т.д. ... 

 

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: необязательно , Конечный тег: дополнительный

Определения атрибутов

профиль = uri [CT]
Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделенные пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, даже если эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

Элемент HEAD содержит информацию о текущем документе, например в качестве названия, ключевых слов, которые могут быть полезны для поисковых систем, и других данных это не считается содержанием документа. Пользовательские агенты обычно не отображают элементы, которые появляются в ГОЛОВА как содержимое.Однако они могут сделать Информация в ГОЛОВЕ доступна пользователям через другие механизмы.

7.4.2 Модель

TITLE элемент
 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

 

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

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

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE , доступный пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, в качестве подписи, произносится).

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


<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ... 


 

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка «(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным образом. контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ... 
 

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

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

7.4.4 Мета-данные

Примечание. The W3C Структура описания ресурсов (см. [RDF10]) стала W3C. Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

HTML позволяет авторам указывать метаданные — скорее, информацию о документе. чем содержимое документа — разными способами.

Например, чтобы указать автора документа, можно использовать META следующий элемент:


 

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

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

Указание метаданных

Как правило, определение метаданных состоит из двух шагов:

  1. Объявление свойства и значения для этого свойства.Это можно сделать за два способы:
    1. Изнутри документа через элемент META .
    2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
  2. Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент
META
 META  - O EMPTY - общая метаинформация ->
 http-Equiv  NAME #IMPLIED - Имя заголовка HTTP-ответа -
    name  NAME #IMPLIED - имя метаинформации -
    content  CDATA #REQUIRED - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]
Этот атрибут определяет имя свойства.В этой спецификации нет списка допустимые значения для этого атрибута.
содержимое = cdata [CS]
Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]
Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

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

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а атрибут Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:


 

Атрибут lang можно использовать с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора объявлено французским:


 

Примечание. Элемент META — это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Когда свойство указано в мета-мете элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:


 

можно также записать:


 
META и заголовки HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в http-Equiv для создания заголовка в стиле [RFC822] в HTTP-ответ. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :


 

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT
 

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

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

META и поисковые системы

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

<- Для носителей английского языка (США) ->

<- Для носителей британского английского ->

<- Для носителей французского ->

 

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,г., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

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

META и PICS Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

Этот пример показывает, как можно использовать объявление META для включения PICS 1.1 этикетка:

<ГОЛОВА>
 
   <em> ... название документа ... </em> 

 
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5


 
Профили метаданных
Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля — это URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставить интерфейс для поиска в каталогах HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
  • В качестве ссылки.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторские права», «ключевые слова» и «дата» — имеют свои значения, установленные последующие Декларации META .

 
   Как заполнять титульные листы меморандума 
  
  
  
  
 
 

Во время написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы на INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута схемы «Месяц-День-Год» устраняет неоднозначность этой даты ценить.

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

Например, следующие Схема Объявление может помочь пользовательскому агенту определить, что значением свойства «идентификатор» является код ISBN номер:


 

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель

BODY элемент

Начальный тег: необязательно , Конечный тег: дополнительный

Определения атрибутов

фон = uri [CT]
Не рекомендуется. The значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]
Не рекомендуется. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • bgcolor (цвет фона)
  • загрузка , загрузка (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

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

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста — белый, цвет текста переднего плана — черный, а цвет гиперссылок на красный изначально, фуксия при активации и бордовый один раз посетил.


<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ... 


 

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:


<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ тип = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ... 


 

Использование внешних (связанных) таблиц стилей дает вам возможность изменять презентация без изменения исходного HTML-документа:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут присваивает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.
Модель Атрибут id присваивает уникальный идентификатор элемента (который может быть проверен парсером SGML). Например, следующие абзацы отличаются своим значением id :

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

  • Как средство выбора таблицы стилей.
  • В качестве целевого якоря для гипертекста ссылки.
  • Как средство ссылки на конкретный элемент из сценария.
  • Как имя объявленного элемента OBJECT .
  • Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

Модель атрибут class , с другой стороны, назначает одно или несколько имен классов элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса может быть общим для нескольких экземпляров элемента. Класс атрибут имеет несколько ролей в HTML:

  • Как селектор таблицы стилей (когда автор хочет присвоить стилевую информацию набору элементов).
  • Для общей обработки пользовательскими агентами.

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

Переменная объявлена ​​дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках красным:

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}
 

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

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

Предположим, например, что мы пишем документ о программировании язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ тип = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ... 

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. The Атрибут id имеет то же пространство имен, что и атрибут name Атрибут при использовании для имен привязок. Пожалуйста обратитесь к разделу, посвященному анкерам, с номером . id для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», а другие — «встроенный» (также известный как «уровень текста»). Это различие основано на несколько понятий:

Модель содержимого
Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «более крупные» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, блочные элементы начинаются с новых строк, встроенных элементов. не надо. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность
По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

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

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

7.5.4 Группирование элементов:

DIV и SPAN элементов

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выровнять (выровнять)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и Элементы SPAN , в сочетании с id и Атрибуты класса предлагают общий механизм для добавления структуры к документы.Эти элементы определяют содержимое как встроенное ( SPAN ) или блочного уровня ( DIV ), но не накладывать никаких других идиом представления на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang, и т. Д., Чтобы настроить HTML под свои нужды и вкусы.

Предположим, например, что мы хотим сгенерировать документ HTML на основе база данных информации о клиентах. Поскольку HTML не включает элементы, которые идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемого структурного и презентационного эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать информация:



Информация о клиенте: <ТАБЛИЦА> Фамилия: Бойера Имя: Стефан Тел: (212) 555-1212 Электронная почта: sb @ foo.org

Информация о клиенте: <ТАБЛИЦА> Фамилия: Лафон Имя: Ив Тел: (617) 555-1212 Электронная почта: [email protected]

Позже мы можем легко добавить объявления таблиц стилей для точной настройки представление этих записей в базе данных.

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

Визуальные пользовательские агенты обычно помещают разрыв строки до и после DIV элементы, например:

aaaaaaaaa

bbbbbbbbb
ccccc

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc
 

7.5.5 Заголовки:

h2 , h3 , h4 , h5 , H5 , H6 элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • выровнять (выровнять)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

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

В HTML есть шесть уровней заголовков, из которых h2 является самым важным, а H6 — самым важным. в мере. Визуальные браузеры обычно отображают более важные заголовки в более крупном масштабе. шрифты, чем менее важные.

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

Лесные слоны

В этом разделе мы обсуждаем малоизвестных лесных слонов. ... этот раздел продолжается ...

Среда обитания

Лесные слоны живут не на деревьях, а среди них. ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ тип = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}


 

Нумерованные разделы и ссылки
HTML сам по себе не вызывает номера разделов быть сформированным из заголовков. Эта возможность может быть предложена пользовательскими агентами, тем не мение. Скоро языки таблиц стилей, такие как CSS, позволят авторам управлять генерация номеров разделов (удобно для прямых ссылок в печатных документы, как в «См. раздел 7.2 «).

Некоторые люди считают, что пропуск уровней заголовков — это плохо упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4 h2, поскольку уровень заголовка h3 пропускается.

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы на уровне документа)
  • lang (язык информация), дирек (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для предоставления контактной информации. для документа или основной части документа, например формы.Этот элемент часто появляется в начале или в конце документа.

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  
$ Дата: 2018/03/20 02:36:52 $

Как структурировать HTML для реального веб-сайта

17 марта 2014 г.

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

Понимание того, как структурировать HTML

При написании HTML вам необходимо знать два типа структур.

  1. The Big Picture — как блоки и оболочки используются на веб-сайте.
  2. Micro Details — в каждом блоке контента, как лучше всего представить каждую группу информации.

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

Большая картина

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

Первый — это изображение верхней части моего блога.

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

Сделаем то же самое и с нижним колонтитулом

В данном случае очевидная область выглядит следующим образом:

Из этих двух изображений вы, возможно, поняли, что некоторые из них использовали похожие структуры (Подсказка: контент и боковая панель — два примера).

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

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

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

Написание кода

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

В этом случае заголовок будет

  <заголовок>
  

Тогда основная область будет иметь следующий HTML-код

  

Хотя нижний колонтитул примерно такой, очень похож на основной

  <нижний колонтитул>
  

Теперь у нас есть базовая структура сайта

Улучшение кода

Есть несколько улучшений, если мы хотим немного улучшить приведенный выше код.

  1. Область содержимого заголовка на самом деле является навигацией, поэтому мы должны указать либо элемент навигации, либо класс навигации
  2. В основном, контент почти всегда должен сопровождаться боковой панелью. Это сделано для адаптивных целей, потому что контент намного важнее. Единственное исключение, когда можно разместить боковую панель выше в HTML, — это когда есть меры CSS, обеспечивающие отображение контента в первую очередь на мобильных устройствах.

Если вы внесли вышеуказанные корректировки кода, то у вас будет то же самое.

  <заголовок>
  
<нижний колонтитул>

Примечание: content и sidebar классы находятся здесь, чтобы помочь вам интуитивно понять, что это за вещи.Вы можете изменить любой из вышеперечисленных классов на все, что захотите, и он все равно будет работать.

Заключение

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

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

Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!

Создание общей структуры страницы — Создайте свои первые веб-страницы с помощью HTML и CSS

https://vimeo.com/270701921

В этой главе вы увидите структуру веб-страницы в HTML с добавлением цвета с помощью CSS.Создание общей структуры страницы придаст больше контекста элементам HTML, которые вы уже изучили в части 2: тексту, спискам, изображениям и т. Д.

Когда вы строите дом, вы сначала строите конструкцию, а затем заполняете более мелкие элементы, верно? То же самое и при создании веб-страницы!

Структура веб-страницы

Что общего у New York Times, Wikipedia, Airbnb и веб-сайта Леди Гаги? Все они могут быть разбиты на предсказуемые блоки.

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

Ознакомьтесь со следующими примерами, которые я аннотировал, чтобы показать их различные разделы:

Структура страницы New York Times Структура страницы Airbnb Структура страницы Википедии Структура веб-страницы Леди Гага

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

Например, если вы посмотрите New York Times, они используют навигацию для просмотра разделов, поиска статьи или доступа к параметрам членства и настройкам учетной записи. На Airbnb навигация позволяет вам стать хозяином или получить доступ к настройкам своей учетной записи. Панели навигации подходят для контента каждого сайта, но принципиально не отличаются.

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

Структурные элементы в HTML включают:

  • : раздел в верхней части веб-страницы, который часто включает логотип, а иногда и навигацию.

  • : общий раздел связанного контента

  • : фрагмент контента, которым можно поделиться независимо, например, сообщение в блоге или статья в газете (даже если вы не отображаете полный текст статьи, например, просто показываете предварительный просмотр, вы все равно можете использовать тег статьи для выделения этого содержимого)

  • : раздел внизу страницы, который часто имеет дополнительные ссылки и, возможно, значки социальных сетей

  • : сгруппированное изображение и крышка которые создают какой-то информативный визуальный элемент

Давайте сначала посмотрим на очень общую структуру настольной страницы:

Возможная настольная структура сайта

Страница довольно широкая.А теперь давайте посмотрим на реальный пример. Вы можете видеть, что на веб-сайте Etsy контент действительно имеет макет, который распространяется слева направо:

Рабочий стол Etsy (элементы расположены широко)

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

Возможная структура мобильного сайта

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

Рабочий стол Etsy (элементы расположены широко)

Это ядро ​​семантического HTML: ваш код должен соответствовать вашему контенту! Чем раньше вы начнете думать о зонах контента, как показано выше, тем лучше будет ваш HTML и тем лучше вы сможете адаптировать свой CSS, чтобы ваш сайт выглядел по-другому на настольных компьютерах, мобильных устройствах и т. Д.

Структурные теги HTML

Ранее в этом курсе вы видели, что для создания элемента HTML (например, заголовка) вы используете набор открывающих и закрывающих тегов. Например, следующие теги создадут заголовок («h2»):

   

Camping Essentials

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

  
<раздел> <статья>
<нижний колонтитул>

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

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

Практика!

Откройте для себя зоны страницы , используя структурные теги HTML с этим упражнением CodePen.

Таким образом, когда мы начнем говорить о других структурных элементах страницы в HTML, вы уже будете думать в терминах зон!

Структура HTML-документа до и после HTML5 — вот что изменилось »

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше

Если вы хотите писать семантическую разметку — и поверьте нам, вы действительно хотите писать семантическую разметку — тогда вам необходимо правильно структурировать HTML-документы. Элементы html , head и body были частью спецификации HTML с середины 1990-х годов, а еще несколько лет назад они были основными элементами, используемыми для структурирования документов HTML. Однако за последние несколько лет ситуация кардинально изменилась, поскольку HTML5 добавил множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа.

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

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

Элемент head — это первый элемент, который появляется после открывающего тега html .В документе head мы помещаем такие вещи, как страница title и метаданные , мы добавляем JavaScript на нашу страницу с тегом script , и мы [ link ] к внешним таблицам стилей и другим ресурсам.

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

Все содержимое, которое отображается на веб-странице, вложено между открывающими и закрывающими тегами body .Тело — это основной контейнер содержимого, составляющего веб-страницу.

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

Новые семантические теги, добавленные HTML5

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

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

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

Используйте элемент main между header и footer элементами, чтобы содержать основное содержимое вашей веб-страницы. Элемент main не может быть потомком article , aside , header , footer или nav element.Вместо этого он должен быть прямым потомком элемента body . Думайте об этом как о прямой замене div , который вы использовали в прошлом для завершения всего содержимого вашей страницы.

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

<нижний колонтитул> <адрес>

Джон - писатель-фрилансер, энтузиаст путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

HTML-структура | Webflow University

В этом видео используется старый интерфейс. Скоро появится обновленная версия!

HTML (язык разметки гипертекста) - одна из важнейших основ Интернета. Это язык разметки, который используется при создании веб-сайтов.Содержание и настройки веб-сайта можно найти в нашем HTML.

Двумя основными структурными компонентами в HTML являются тело и головка . Оба они используются всеми веб-браузерами для отображения структуры и настроек веб-страницы.

Тело

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

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

Head

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

Тег заголовка - заголовок, который появляется, когда веб-сайт отображается в результатах поиска Google.

Мета-теги - описание, которое будет отображаться под заголовком в результатах поиска Google.

CSS - разметка, которая определяет стили HTML-элементов (например, высоту, цвет, размер шрифта и т. Д.). Без CSS мы бы увидели весь контент, сложенный вертикально, без какой-либо структуры или стиля, как в текстовом документе.

Теги Open Graph - состоят из изображения и описания, которое появляется при совместном использовании сайта (например, Twitter, Facebook и т. Д.).

В пользовательском интерфейсе Webflow

В Webflow такие параметры, как заголовок, метаописание и открытый график, можно редактировать на панели страниц.

Оставить комментарий

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

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