Обзор новых элементов HTML5
С 1999 года, когда HTML 4.01 стал стандартом, Интернет и его использование существенно изменились. W3C решил изменить основной синтаксис HTML со стандартного обобщенного языка разметки (SGML) на XML, а также совершенно другие языки разметки, такие как масштабируемая векторная графика (SVG), XForms и MathML. В настоящее время некоторые компоненты HTML 4.01 устарели, никогда не используются или не используются должным образом. Каждая часть компонентов в HTML5 смещена или перекомпонована. HTML5 включает в себя новые элементы для иллюстрации представления, отображения цифрового контента, улучшенного макета страницы и общей функциональности, а также несколько новых интерфейсов для правильного решения современных интернет-требований.
В HTML5 введено несколько новых элементов, которые предлагают определенные дополнительные функции для разработки желаемого и интерактивного сайта. Мы можем создать ваш код быстро и эффективно с помощью таких компонентов. Из-за отсутствия структуры многие правильно оформленные HTML-документы сложнее обрабатывать, чем они должны быть. Оценивая шкалы заголовков, мы должны выяснить, куда направляются разрывы сегментов. Элемент div определяет боковые панели, нижние колонтитулы, заголовки, навигационные меню и основные части содержимого.
Топ 10 новых элементов HTML5
HTML5 предоставляет новые элементы для улучшения макета документа.
1.
Элемент определяет часть страницы, которая включает отдельную структуру в документе, разделе или веб-сайте и которую рекомендуется широко распространять или использовать. Это может быть групповая публикация в журнале или ежедневный бумажный отчет, отправка в онлайн-бюллетень, замечание, отправленное клиентом, или любой другой объект, не содержащий веществ.
Пример:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Выход:
- Сохраните приведенный выше код в файле с расширением .html.
- Запустите html-файл в браузере, и вы получите вывод, как показано на рисунке ниже.
2.
Элемент указывает индивидуальный контент во многом как категоризации, карты, изображения, статьи кода и многое другое.
Пример:
Figure Element
EDUCBA - ведущий мировой поставщик основанного на навыках образования для удовлетворения потребностей более 500 000 участников в более чем 40 странах.
Выход:
Приведенный выше код будет производить вывод, как показано на рисунке ниже,
3.
Элемент используется для добавления описания для изображения.
Пример:
Figure Caption Element
EDUCBA - ведущий мировой поставщик основанного на навыках образования для удовлетворения потребностей более 500 000 участников в более чем 40 странах.
EDUCBA (Корпоративный Бридж Консалтинг Pvt Ltd)
Выход:
Приведенный выше код отображает результат, как показано на рисунке ниже,
4.
Элемент используется для указания заголовка документа или раздела на странице. Вы можете определить более одного заголовка в одном документе.
Пример:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Содержание документа идет здесь …
Выход:
Приведенный выше код отображает результат, как показано на рисунке ниже,
5.
Элемент используется для указания информации, такой как информация об авторе, информация об авторских правах, контакт, ссылки на связанные документы, карта сайта и многое другое.
Пример:
Footer Element
Copyright © 2019 www.educba.com
Контакт:
Выход:
Приведенный выше код отображает результат, как показано на рисунке ниже,
6.
Элемент используется для отображения основной, т.е. важной информации документа.
Пример:
Main Element
Заголовок информации
Основная информация
EDUCBA
EDUCBA является ведущим мировым поставщиком обучения на основе навыков …
Информация нижнего колонтитула
Выход:
Приведенный выше код будет производить вывод, как показано на рисунке ниже,
7.
Элемент используется для выделения или маркировки текста цветом фона, который привлекает пользователя для определенного текста в документе.
Пример:
Mark Element
EDUCBA - ведущий мировой поставщик основанного на навыках образования для удовлетворения потребностей более 500 000 участников в более чем 40 странах.
Выход:
Приведенный выше код отображает результат, как показано на рисунке ниже,
8.
Элемент используется для указания навигационных ссылок на странице. Эти ссылки обеспечивают связи с другими страницами в документе.
Пример:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Выход:
Приведенный выше код будет производить вывод, как показано на рисунке ниже,
9.
Элемент используется для определения отдельного раздела или конкретного региона в документе.
Пример:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
Содержимое основного заголовка будет отображаться здесь …
Первый раздел
Содержимое первого раздела будет отображаться …
Раздел второй
Содержимое второго раздела будет отображаться …
Выход:
Приведенный выше код отображает результат, как показано на рисунке ниже,
10.
Тег - это часть тега, которая предоставляет текст, который можно отобразить или скрыть, когда пользователь щелкает заголовок.
Пример:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Это ведущий мировой поставщик основанного на навыках образования для удовлетворения потребностей более 500 000 участников в более чем 40 странах.
Выход:
Когда вы запустите приведенный выше код, он будет отображать результат, как показано ниже,
Как показано на рисунке, нажмите на заголовок, он отобразит скрытый текст, как показано на рисунке ниже,
Вывод
До сих пор мы видели, как новые элементы HTML5 полезны для различных задач при создании сайта. Эти новые элементы читают документ более точно и стандартно, а также разрабатывают более сложные и эффективные веб-приложения. Новые элементы HTML5 предоставляют некоторые дополнительные функции для создания интерактивных веб-сайтов.
Рекомендуемые статьи
Это руководство по Html5 Новые элементы. Здесь мы обсуждаем 10 новых элементов HTML5 для улучшения макета документа. Вы также можете посмотреть следующие статьи, чтобы узнать больше -
- Коррекция цвета в After Effects
- 6 лучших версий HTML
- Html5 против Html4
- XHTML против HTML5
- Что такое мост?
- HTML5 Теги | Лучшие 4 тега HTML5