Синтаксис HTML5 | htmlbook.ru
HTML5 возвращает нас к стилю десятилетней давности, когда практиковалось не закрывать некоторые теги, писать значения без кавычек и по желанию набирать теги в верхнем или нижнем регистре. Такая вольность не означает, что любые правила должны игнорироваться, по-прежнему следует соблюдать корректную вложенность тегов и вставлять обязательные элементы. Отход от жёсткого синтаксиса XHTML позволяет сосредоточиться на содержании сайта, а не на соблюдении пустых формальностей, большинство из которых вызывает раздражение из-за своего несущественного значения и ненужности.
Элементы HTML
Базовым кирпичиком веб-страницы выступает элемент. Они могут делиться по разным критериям, например, по типу или своему назначению.
Элементы по типу
Пустые элементы
К ним относятся элементы, у которых нет закрывающего тега: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>.
Необрабатываемые текстовые элементы
Предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML: <script>, <style>.
RCDATA
Эти элементы могут содержать любой текст или спецсимволы, за исключением нестандартных спецсимволов, которые называются сомнительным амперсандом, например: &copi; или &T. К этой группе элементов относятся <textarea> и <title>.
Инородные элементы
Элементы, относящиеся к MathML или SVG.
Обычные элементы
Все остальные элементы, которые не входят в предыдущие группы.
Элементы по назначению
Корневой элемент
Элемент <html>.
Метаданные документа
<head>, а также элементы, которые располагаются внутри него.
Скрипты
Скрипты позволяют добавлять интерактивности на веб-страницу, в эту группу входят элементы, управляющие скриптами.
Структурные элементы
Элементы, управляющие основными разделами веб-страницы, вроде <body>, <section>, <nav>, <article>, <aside> и др.
Группирование контента
Элементы, обрамляющие текст, списки, изображения.
Текст
Элементы, изменяющие вид текста, например, делающие его жирным или курсивным, а также выделяющие текст по смыслу — аббревиатура, цитата, переменная, код и т.д.
Рецензирование
Элементы <ins> и <del> показывающие редактирования в документе.
Внедряемый контент
Элементы, вставляемые на страницу в виде разных объектов — изображения, видео, аудио и др.
Табличные данные
Элементы для создания и управления видом таблиц.
Формы
Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. В эту группу входят элементы для создания формы и её полей.
Интерактивные элементы
Специальные виджеты, с помощью которых пользователь может получать дополнительную информацию или управление.
Ссылки
Элементы <a> и <area>.
Подобное группирование условно и может принимать другой вид, потому что одни и те же элементы могут принадлежать разным группам.
Теги
Для обозначения начала и конца элемента применяются теги. Внутри тегов могут быть атрибуты со своими значениями, расширяющими возможности тегов, а также содержимое (рис. 1).
Рис. 1. Тег <a> с атрибутом href
Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок.
Пустые элементы не имеют закрывающего тега и содержимого (рис. 2).
Рис. 2. Пустой тег <img>
Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Например, элемент <img> добавляет на веб-страницу изображение, при этом адрес графического файла мы указываем через атрибут src.
Доктайп
<!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело. Если доктайп не указан, браузеры переходят в режим совместимости, в котором не работают многие возможности HTML5, а также возникают ошибки с отображением документа.
Доктайп не чувствителен к регистру и содержит всего два слова:
<!DOCTYPE html>
Это ключевой элемент и обычно он располагается в первой строке кода.
Комментарии
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами отображаться на веб-странице не будет.
Необязательные теги
Если какой-то тег не указан, это не означает, что он не представлен вообще. Существуют определённые правила, позволяющие не писать некоторые теги. В табл. 1 представлены теги, которые можно не указывать и условие, при котором это происходит.
| Тег | Условие |
|---|---|
| <html> | |
| </html> | |
| <head> | Если внутри имеются другие элементы. |
| </head> | |
| <body> | Если пустой, а также содержит что-то кроме пробела или комментария. |
| </body> | |
| </li> | Если после элемента следует <li> или он последний у родителя. |
| </dt> | Если после элемента следует <dt> или <dd>. |
| </dd> | Если после элемента следует <dd>, <dt> или он последний у родителя. |
| </p> | Если после элемента следует <address>, <article>, <aside>, <blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h2>,…,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>. |
| </rt> | Если после элемента следует <rt> или <rp>. |
| </rp> | Если после элемента следует <rt> или <rp>. |
| </optgroup> | Если после элемента следует <optgroup> или он последний у родителя. |
| </option> | Если после элемента следует <option>, <optgroup> или он последний у родителя. |
| <colgroup> | Если первым внутри идёт <col> и не следует перед другим элементом <colgroup>. |
| </colgroup> | |
| </thead> | Если после элемента следует <tbody> или <tfoot>. |
| <tbody> | Если первым внутри идёт <tr> и не следует перед <tbody>, <thead> или <tfoot> у которых опущен закрывающий тег. |
| </tbody> | Если после элемента следует <tbody> или <tfoot> или он последний у родителя. |
| </tfoot> | Если после элемента следует <tbody> или он последний у родителя. |
| </tr> | Если после элемента следует <tr> или он последний у родителя. |
| </td> | Если после элемента следует <td> или <th> или он последний у родителя. |
| </th> | Если после элемента следует <td> или <th> или он последний у родителя. |
Если открывающий тег содержит один или несколько атрибутов, то тег должен указываться обязательно.
Из-за того, что многие теги можно не указывать, т.к. они подразумеваются по умолчанию, любой документ сводится к следующим частям.
- Необязательная метка порядка байтов (byte order mark, BOM).
- <!DOCTYPE html>.
- <title>.
До и после доктайпа разрешается вставлять любое количество пробелов или комментариев. Таким образом, доктайп не обязательно должен располагаться в первой строке кода.
В примере 1 показан минимальный код HTML для вывода традиционного приветствия.
Пример 1. Минимальный HTML
HTML5IECrOpSaFx
<!DOCTYPE html> <title> </title> Привет, мир!
Метка порядка байтов состоит из кода символа U+FEFF в начале документа, где она используется для определения кодировки. Рекомендуется убирать этот символ, поскольку его наличие приводит к ошибкам отображения документа в некоторых браузерах. Для этого можно использовать редактор Notepad++, в меню «Кодировки» выбрать пункт «Кодировать в UTF-8 (без BOM)» (рис. 3).
Рис. 3. Выбор кодировки
Полезные ссылки
- Подробнее о метке порядка байтов
http://unicode.
org/faq/utf_bom.html#bom1 - Редактор Notepad++
http://notepad-plus-plus.org/download
org/faq/utf_bom.html#bom1Пять вещей, которые надо знать об HTML5
Оригинал: http://diveintohtml5.info/introduction.html
Перевод: Влад Мержевич
1. Это не одна большая вещь
Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.
Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах.
Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.
2. Вам не надо откидывать имеющееся
Нравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.
Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type=»email», поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений.
Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.
3. Легко начать
«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:
<!DOCTYPE html>
Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.
4. Это уже работает
Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др.
Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.
Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.
5. Он уже здесь
Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:
Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен.
Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.HTML5 уже здесь. Давайте погрузимся в него.
HTML по теме
- Тег <article>
- Тег <footer>
- Тег <header>
- Тег <section>
- Тег <video>
- Элемент <!DOCTYPE>
Введение в HTML5 | Coursera
Об этом курсе
209 098 последних просмотров
Благодаря растущему числу программ кажется, что создать веб-страницу может каждый. Но что, если вы действительно хотите понять, как была создана страница? Существуют отличные учебники и онлайн-ресурсы для изучения веб-дизайна, но большинство этих ресурсов требуют некоторых базовых знаний. Этот курс разработан, чтобы помочь новичку, который хочет обрести уверенность и знания. Мы рассмотрим теорию (что на самом деле происходит, когда вы нажмете ссылку на веб-странице?), практическую часть (что мне нужно знать, чтобы создать свою собственную страницу?) и упущенное из виду (у меня есть страница, что мне делать? Делай сейчас?).
Гибкие сроки
Сброс сроков в соответствии с вашим графиком.
Общий сертификатОбщий сертификат
Получите сертификат по завершении
100% онлайн
Начните сразу и учитесь по собственному графику.
СпециализацияКурс 1 из 5 в рамках специализации
Веб-дизайн для всех: основы веб-разработки и кодирования
Часов для прохожденияПрибл. 13 часов, чтобы закончить
Доступные языкиАнглийский
Субтитры: арабский, французский, португальский (европейский), итальянский, вьетнамский, немецкий, русский, английский, испанский Гибкие сроки
Гибкие сроки
Сброс сроков в соответствии с вашим графиком.
Общий сертификатОбщий сертификат
Получение сертификата по завершении
100 % онлайн100 % онлайн
Начните сразу и учитесь по собственному расписанию.
СпециализацияКурс 1 из 5 в рамках специализации
Веб-дизайн для всех: основы веб-разработки и кодирования
Часов для прохождения Прибл.
Английский
Субтитры: арабский, французский, португальский (европейский), итальянский, вьетнамский, немецкий, русский, английский, испанский
Инструкторы
Коллин ван Лент, доктор философии.
Lecturer
School of Information
608,264 Learners
11 Courses
Charles Russell Severance
Clinical Professor
School of Information
3,761,917 Learners
56 Courses
Offered by
Мичиганский университет
Миссия Мичиганского университета состоит в том, чтобы служить народу Мичигана и всего мира посредством превосходства в создании, передаче, сохранении и применении знаний, искусства и академических ценностей, а также в развитии лидеров и граждан кто бросит вызов настоящему и обогатит будущее.
Reviews
4.7
Filled StarFilled StarFilled StarFilled StarHalf Filled Star7067 reviews
5 stars
78.51%
4 stars
18.33%
3 stars
2.36%
2 звезды
0,31 %
1 звезда
0,47 %0004 от PCSep 26, 2020
хорошая сессия, репетитор имеет хорошую динамику речи, ясно и легко понять, не засыпая во время моего курса, и соответствующие знания HTML, шаг, чтобы применить к полезным инструментам. спасибо
Filled StarFilled StarFilled StarFilled StarFilled Starот HVM 9 мая 2020 г.
Благодаря этому курсу я научился создавать базовую веб-страницу и многое другое. Я хотел бы поблагодарить своего преподавателя за то, что он предоставил мне такие замечательные материалы и методы для обучения.
спасибо, мадам
Заполненная Звезда Заполненная Звезда Заполненная Звезда Звездаот MO17 июня 2017 г.
Это был темп самообучения, который позволил мне добиться успеха. Коллин ван Лент отлично справляется с видео: они достаточно короткие, чтобы не потерять интерес, но при этом содержат достаточно информации для легкого изучения.
Filled StarFilled StarFilled StarFilled StarFilled Starот SPApr 16, 2020
Этот курс был очень интересным и полезным для начала веб-разработки, также преподаватель курса очень хорош, она доводит свои знания до максимальных возможностей, а также мотивирует.
Просмотреть все отзывы
О веб-дизайне для всех: специализация «Основы веб-разработки и кодирования»
Эта специализация рассказывает о том, как писать синтаксически правильные HTML5 и CSS3, а также о том, как создавать интерактивные веб-приложения с помощью JavaScript. Овладение этим набором технологий позволит вам разрабатывать высококачественные веб-сайты, которые без проблем работают на мобильных устройствах, планшетах и в браузерах с большим экраном.
Во время завершающего этапа вы создадите веб-портфолио профессионального качества, демонстрирующее ваш рост как веб-разработчика и ваши знания в области доступного веб-дизайна. Это будет включать вашу способность разрабатывать и реализовывать адаптивный сайт, использующий инструменты для создания сайта, доступного для широкой аудитории, в том числе для людей с нарушениями зрения, слуха, физическими и когнитивными нарушениями.Часто задаваемые вопросы
Еще вопросы? Посетите Справочный центр для учащихся.
Изучайте HTML5 бесплатно: введение в HTML
Разблокируйте курсНачните!
Присоединяйтесь к 18806 другим студентам
Войдите, чтобы получить
Доступ к более чем 30 бесплатным курсам
Интерактивный практический контент
Недели испытаний — код, чтобы выиграть!
Присоединяйтесь к дружному сообществу
Разблокируйте курс
Подпишитесь, чтобы получить доступ!Подпишитесь, чтобы получить доступ!
Подпишитесь, чтобы получить доступ к этому курсу и ВСЕМ другим курсам.
Вы получаете 30-дневную гарантию возврата денег, без вопросов.Подписка включает
Все курсы, буткемпы, пути
100s задач по кодированию
Сертификаты об окончании
Эксклюзивный чат для членов Pro
Подпишитесь прямо сейчас!
с
Эрик ВидаУровень курса: Начальный
Изучите HTML5, создав собственный веб-сайт менее чем за час! Этот интерактивный учебник из 15 частей является идеальной отправной точкой для начинающих, которые ищут введение в HTML для веб-разработки.
Что находится внутри
Введение в HTML
17 Уроки 57 мин
1. Вступление в HTML
4:19
2. Создание HTML документа
2:57
3. Фронтальный путь
10004 2:57
3.
: 584. Гнездование Элементы HTML
4:02
5. Элементы и сценарии головки в HTML
6:04
6. Элементы макета HTML
2:49
7. HTML Figure & Image Elements Elements Elements
2:49
7.3:36
8. Встроенные видео в HTML
4:12
9. Навие и списка. ЧАСТЬ 1)
2:56
12. ФОРМАТИРОВАНИЕ ТЕКСТА В HTML (ЧАСТЬ 2)
3:09
13. КАК СОЗДАВАТЬ ТАБЛИЦЫ (ЧАСТЬ 1)
3:30
RE 400. ТАБЛИЦЫ (ЧАСТЬ 2)
3:35
15. ССЫЛКИ НА СТРАНИЦЫ В HTML И ПОСЛЕДНИЕ ШТРИХИ
3:25
16. Бонус: формы и входы
4:47
17. Поздравляем с поступлением в HTML ✨
0:55
Вы узнаете
Как работает
HTML
Документы
Гнездование
Элементы и сценарии головки
Элементы макета
Изображения и видео
Встроение
Списки
Navbars
0005
Ссылки
Предварительные требования
Этот курс разработан для начинающих.
Во время завершающего этапа вы создадите веб-портфолио профессионального качества, демонстрирующее ваш рост как веб-разработчика и ваши знания в области доступного веб-дизайна. Это будет включать вашу способность разрабатывать и реализовывать адаптивный сайт, использующий инструменты для создания сайта, доступного для широкой аудитории, в том числе для людей с нарушениями зрения, слуха, физическими и когнитивными нарушениями.
Вы получаете 30-дневную гарантию возврата денег, без вопросов.
: 58