Пояснення семантичних елементів HTML5

Семантичні елементи HTML - це ті, що чітко описують їх значення у зручній для читання людині та машині.

Такі елементи, як , і все вони вважаються семантичними , тому що вони точно описують призначення елемента і тип контенту , який знаходиться всередині них.

Що таке семантичні елементи?

HTML спочатку був створений як мова розмітки для опису документів у ранній мережі Інтернет. У міру зростання Інтернету та його прийняття більшою кількістю людей його потреби змінилися.

Там, де Інтернет спочатку був призначений для обміну науковими документами, тепер люди хотіли поділитися й іншими речами. Дуже швидко люди почали бажати зробити Інтернет приємнішим.

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

для опису інформації за допомогою таблиці програмісти використовували б їх для розміщення інших елементів на сторінці.

У міру використання візуально розроблених макетів програмісти почали використовувати загальний «несемантичний» тег, наприклад . Вони часто дають цим елементам classабо idатрибут, щоб описати їх призначення. Наприклад, замість цього часто писали як .

Оскільки HTML5 все ще відносно новий, таке використання несемантичних елементів все ще дуже поширене на веб-сайтах сьогодні.

Перелік нових семантичних елементів

Семантичними елементами, доданими в HTML5, є:

Такі елементи, як , , , , , і діяти більш-менш як елементи. Вони групують інші елементи разом у розділи сторінки. Однак там, де тег може містити будь-який тип інформації, легко визначити, який саме тип інформації буде йти в семантичній області.

Приклад семантичного розміщення елементів w3schools

Семантичні елементи, що викладають сторінку w3schools

Навіщо використовувати семантичні елементи?

Щоб розглянути переваги семантичних елементів, ось дві частини HTML-коду. Цей перший блок коду використовує семантичні елементи:

Поки цей другий блок коду використовує несемантичні елементи:

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

Він має більшу доступність . Ви не єдині, кому семантичні елементи легше зрозуміти. Пошукові системи та допоміжні технології (наприклад, зчитувачі екрану для користувачів із вадами зору) також можуть краще зрозуміти контекст та вміст вашого веб-сайту, що означає кращий досвід для ваших користувачів.

Загалом, семантичні елементи також ведуть до більш послідовного коду . При створенні заголовка з використання не-семантичні елементи, різні програмісти могли б написати це як , , або просто . Існує стільки способів, що ви можете створити елемент заголовка, і всі вони залежать від особистих переваг програміста. Створюючи стандартний семантичний елемент, це полегшує роботу кожного.

З жовтня 2014 року HTML4 було оновлено до HTML5 разом із деякими новими «семантичними» елементами. До цього часу деякі з нас все ще можуть заплутатися, чому так багато різних елементів, які, здається, не демонструють якихось серйозних змін.

і

“Яка різниця?”, Можете запитати ви. Обидва ці елементи використовуються для розділення вмісту, і так, їх однозначно можна використовувати як взаємозамінні. Справа в тому, в якій ситуації. HTML4 пропонував лише один тип контейнерного елемента, а саме . Хоча це все ще використовується в HTML5, HTML5 надав нам і таким чином, щоб замінити .

Елементи and є концептуально подібними та взаємозамінними. Щоб вирішити, який із них вам слід вибрати, візьміть до уваги наступне:

  1. Стаття призначена для самостійного розповсюдження або повторного використання.
  2. Розділ - це тематичне групування змісту.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

і

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

Company A

  • Home
  • About
  • Contact us

The element should be used where you want a main heading with one or more subheadings.

Heading 1

Subheading 1

Subheading 2

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is

Original text


to

and including .

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Before HTML5, our menus were created with

    ’s and
  • ’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

    • Home
    • About
    • Contact us

    If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

    ©Company A

    The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

    ©Company A Date

    The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

    Tuesday, 31 October 2017

    Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

    and

    is for wrapping your image content around it, and is to caption your image.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Learn more about the new HTML5 elements:

    • w3schools надає прості та зрозумілі описи багатьох елементів новин та те, як / де їх слід використовувати.
    • MDN також забезпечує чудові посилання на всі елементи HTML і заглиблюється в кожну.