Огляд нових елементів 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 (Корпоративне місто Консультант Пвт Лтд)
Вихід:
Наведений вище код відображає результат, як показано на зображенні нижче,
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 New Elements. Тут ми обговорюємо топ-10 нових елементів Html5 для вдосконалення верстки документа. Ви також можете переглянути наступні статті, щоб дізнатися більше -
- Корекція кольору в ефектах
- Топ 6 версій Html
- Html5 проти Html4
- XHTML проти HTML5
- Що таке міст?
- HTML5 Теги | Топ-4 тегів HTML5