Html основные примеры

Элемент Article

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


XHTML

<article> <header> <div class=time> <div class=year>2010</div> <div class=date>16<span>apr</span></div> </div> <h1>Sample Post 1</h1> <div class=comments>38</div> </header> <p>Curabitur ut congue hac, diam turpis</p> <footer> <em>Written by:</em> <strong>Author Name</strong> <span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span> <a class=button href=#>Continue Reading</a> </footer> </article>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<article>

<header>

<div class=time>

<div class=year>2010</div>

<div class=date>16<span>apr</span></div>

</div>

<h1>Sample Post 1</h1>

<div class=comments>38</div>

</header>

<p>Curabitur ut congue hac, diam turpis</p>

<footer>

<em>Written by:</em><strong>Author Name</strong>

<span class=newLine><em>Tags:</em><a class=tagshref=#>cool</a><a class=tagshref=#>modern</a><a class=tagshref=#>hype-friendly</a></span>

<a class=buttonhref=#>Continue Reading</a>

</footer>

</article>

Вот определение W3C для элемента article:

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

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

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Разновидности синтаксиса HTML5

Последнее обновление: 18.11.2019

При создании документа HTML5 мы можем использовать два различных стиля: HTML и XML.

Стиль HTML предполагает следующие моменты:

  • Начальные открывающие теги могут отсутствовать у элементов

  • Конечные закрывающие теги могут отсутствовать у элементов

  • Только пустые элементы (void elements) (например, , , ) могут закрываться с помощью слеша

  • Регистр названий тегов и атрибутов не имеет значения

  • Можно не заключать значения атрибутов в кавычки

  • Некоторые атрибуты могут не иметь значений (checked и disabled)

  • Специальные символы не экранируются

  • Документ должен иметь элемент DOCTYPE

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

Документ HTML5 также может быть описан с помощью синтаксиса XML. Такой стиль еще называют «XHTML». Он используется, если заголовок content-type имеет значение . Для данного стиля характерны следующие правила:

  • Каждый элемент должен иметь начальный открывающий тег

  • Непустые элементы (non-void elements) с начальным открывающим тегом также должны иметь конечный закрывающий тег

  • Любой элемент может закрываться с помощью слеша

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

  • Значения атрибутов должны быть заключены в кавычки


  • Атрибуты без значений не допускаются ( вместо просто )

  • Специальные символы должны быть экранированы

Сравним два подхода. Подход HTML5:

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>Заголовок</title>
	</head>
	<body>
		<p>Содержание документа HTML5<br>
		<input type=button value=Нажать >
	</body>
</html>

И аналогичный пример с использованием подхода XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>Заголовок</title>
	</head>
	<body>
		<p>Содержание документа HTML5<br />
		<input type="button" value="Нажать" /></p>
	</body>
</html>

При использовании синтаксиса XHTML нам также надо указать пространство имен для данного документа:

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

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

Также заключение значений атрибутов в кавычки поможет избежать потенциальных ошибок. Так, атрибут может принимать несколько значений подряд. Например: . Но если мы опустим кавычки, то в качестве значения будет использоваться «navmenu», а «bigdesctop» браузер будет пытаться интерпретировать как отдельный атрибут.

Мы можем вставить в текстовое поле код веб-страницы, и после нажатия на кнопку «Check» внизу валидатор либо отобразит нам ошибки красным цветом, либо зеленым цветом уведомит, что ошибок нет, и код прошел валидацию.

НазадВперед

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Элемент Nav

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

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

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

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

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

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

Таблица содержания (TOC) в длинном документе;

Навигация «ссылки-цепочки»;

Нумерованные ссылки типа «предыдущий/следующий» и

Связанные посты.

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

Списки

Последнее обновление: 08.04.2016

Для создания списков в HTML5 применяются элементы (нумерованный список) и (ненумерованный список):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Списки в HTML5</title>
	</head>
	<body>
		<h2>Нумерованный список</h2>
		<ol>
			<li>iPhone 6S</li>
			<li>Galaxy S7</li>
			<li>Nexus 5X</li>
			<li>Lumia 950</li>
		</ol>
		<h2>Ненумерованный список</h2>
		<ul>
			<li>iPhone 6S</li>
			<li>Galaxy S7</li>
			<li>Nexus 5X</li>
			<li>Lumia 950</li>
		</ul>
	</body>
</html>

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

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

  • : десятичные числа, отсчет идет от 1

  • : десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

  • : строчные римские цифры, например, i, ii, iii, iv, v


  • : заглавные римские цифры, например, I, II, III, IV, V…

  • : строчные римские буквы, например, a, b, c…, z

  • : заглавные римские буквы, например, A, B, C, … Z

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

<h2>list-style-type = decimal</h2>
<ol style="list-style-type:decimal;" start="3">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ol>
<h2>list-style-type = upper-roman</h2>
<ul style="list-style-type:upper-roman;">
	<li>iPhone 6S Plus</li>
	<li>Galaxy S7 Edge</li>
	<li>Nexus 6P</li>
	<li>Lumia 950 XL</li>
</ul>
<h2>list-style-type = lower-alpha</h2>
<ul style="list-style-type:lower-alpha;">
	<li>LG G 5</li>
	<li>Huawei P8</li>
	<li>Asus ZenFone 2</li>
</ul>

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

  • : черный диск

  • : пустой кружочек

  • : черный квадратик

Например:

<h2>list-style-type = disc</h2>
<ul style="list-style-type:disc;">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ul>
<h2>list-style-type = circle</h2>
<ul style="list-style-type:circle;">
	<li>iPhone 6S Plus</li>
	<li>Galaxy S7 Edge</li>
	<li>Nexus 6P</li>
	<li>Lumia 950 XL</li>
</ul>
<h2>list-style-type = square</h2>
<ul style="list-style-type:square;">
	<li>LG G 5</li>
	<li>Huawei P8</li>
	<li>Asus ZenFone 2</li>
</ul>

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image. Он задает изображение, которое будет отображаться рядом с элементом списка:

<ul style="list-style-image:url(phone_touch.png);">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ul>

Стиль в качестве значения принимает , где «phone_touch.png» — это название файла изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей index.html у меня находится файл изображения phone_touch.png.

Горизонтальный список

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Горизонтальный список в HTML5</title>
		<style>
			ul#menu li {
				display:inline;
			}
		</style>
    </head>
    <body>
        <ul id="menu">
			<li>Главная</li>
			<li>Блог</li>
			<li>Форум</li>
			<li>О сайте</li>
		</ul>
    </body>
</html>

НазадВперед

Как подключить и оптимизировать нестандартные шрифты

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. Самый простой способ — использовать стандартные шрифты, например, Arial, Times New Roman и так далее

Эти шрифты называются веб-безопасными, достаточно просто указать их название в коде, и всё будет работать.

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

А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.

Каковы основные различия между HTML и HTML5

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

  • SVG, canvas и другая виртуальная векторная графика поддерживаются в HTML5, тогда как в HTML использование векторной графики стало возможным только при использовании его в сочетании с различными технологиями, такими как Flash, VML, Silver-light и т.д.
  • HTML5 использует базы данных SQL и кеш приложений для временного хранения данных, тогда как в HTML для этого используется только кэш браузера.
  • Еще одно отличие между HTML и HTML5, о котором стоит упомянуть: первый не позволяет запуск JavaScript в коде (вместо этого он работает в потоке интерфейса браузера), тогда как последний обеспечивает полную поддержку JavaScript для запуска в фоновом режиме.
  • HTML5 не основан на SGML, и это позволяет ему иметь улучшенные правила синтаксического анализа, которые обеспечивают улучшенную совместимость.
  • В HTML5, в тексте могут использоваться встроенные MathML и SVG, тогда как это невозможно в HTML.
  • Некоторые из устаревших элементов были полностью удалены: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
  • HTML5 поддерживает новые виды элементов управления, к примеру, dates and times, email, number, range, tel, url, search и т.д.
  • В HTML появилось много новых элементов. Вот некоторые из самых важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

Освоить профессию фронтенд-разработчика в 2020 году

Планируете освоить новую востребованную профессию в 2020 году? Долго ждать не нужно! Уже 20 января в HTML Academy начинается новый поток профессии «Фронтенд-разработчик». Обучение длится полгода и закончится 29 июля.

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

А закрепить полученные навыки вы сможете во время стажировки в аутсорс-компании «Лига А.», работая с реальными коммерческими заказами.

Программа состоит из трёх профессиональных курсов:

  1. «HTML и CSS, уровень 1»
  2. «HTML и CSS, уровень 2»
  3. «JavaScript, уровень 1»

Оплатить курс можно в рассрочку. Ждём вас!

Существует обширная общедоступная документация

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

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

На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.

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


На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

HTML5 — новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

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

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

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

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

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

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

Ждём вас во фронтенде

Новый год — отличный повод получить новые навыки и сделать первый шаг на пути смены профессии.

С 20 января по 22 марта 2020 года в HTML Academy пройдёт новый поток курса «HTML и CSS, уровень 1».

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

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

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

А по промокоду htmlbook курс будет стоить дешевле на 1000 рублей. Ждём вас в новом году во фронтенде!

Поддержка разных форматов видео и звука

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

Самые популярные контейнеры для интернет-видео — это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 — MP4, Theora — OGG, VP8 — WebV.

Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом — более качественное видео.

Хотя H.264 — коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

Заключение

Итак, мы создали нашу Web-страницу. На этом завершается первая статья в данной серии из четырех частей. Цель этой статьи состояла в том, чтобы представить новый режим работы HTML5. HTML5 — это не просто модернизация HTML4, — это новый способ цифрового коммуницирования. Благодаря функциональности технологий CSS3 и JavaScript, спецификация HTML5 вплотную приблизилась к тому, чтобы предоставить разработчику все возможности в одном пакете. Если вы усвоите все необходимое из обширного массива имеющейся в открытом доступе информации по HTML5, то сможете присоединиться к растущему сообществу Web-дизайнеров и Web-разработчиков, компетентных в мультимедийных аспектах HTML5. В следующей части данной серии мы рассмотрим, как писать код для HTML5-форм и как структурировать эти формы.

Похожие темы

  • Оригинал статьи: HTML5 fundamentals, Part 1: Getting your feet wet.
  • Создание современных Web-сайтов с использованием HTML5 и CSS3 (developerWorks, март 2010 г.) Комплексная статья по технологиям HTML5 и CSS3.
  • Новые теги в спецификации HTML 5 (developerWorks, август 2007 г.). В данной статье приведена информация по нескольким новым тегам HTML5.
  • Web-сайт <html>5doctor предоставляет прекрасный обзор современных тенденций в области HTML5.
  • The Раздел HTML5 Tag Reference на Web-сайте W3Schools.com содержит обширный перечень тегов, определений и примеров HTML5.
  • Web-сайт WHATWG website предоставляет подробную информацию по спецификации HTML5.
  • Раздел CSS3 Reference на Web-сайте W3Schools.com содержит обширную информацию по спецификации CSS version 3.

С этим читают