Обяснени семантични HTML5 елементи

Семантичните HTML елементи са тези, които ясно описват тяхното значение по човешки и машинно четим начин.

Елементи, като например , и всички се считат семантичните защото точно описват целите на елемента и вида на съдържание, което е вътре в тях.

Какво представляват семантичните елементи?

HTML първоначално е създаден като език за маркиране, за да опише документи в ранния интернет. Тъй като интернет нарастваше и беше приет от повече хора, нуждите му се промениха.

Там, където първоначално интернет беше предназначен за споделяне на научни документи, сега хората искаха да споделят и други неща. Много бързо хората започнаха да искат да направят мрежата да изглежда по-хубава.

Тъй като първоначално мрежата не е била създадена, за да бъде проектирана, програмистите са използвали различни хакове, за да оформят нещата по различни начини. Вместо да използвате

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

С напредването на използването на визуално проектирани оформления програмистите започнаха да използват общ „несемантичен“ маркер като . Те често дават на тези елементи атрибут classили idатрибут, за да опишат тяхната цел. Например, вместо това често се пише като .

Тъй като HTML5 все още е сравнително нов, тази употреба на несемантични елементи все още е много разпространена в уебсайтовете днес.

Списък на новите семантични елементи

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

Елементи, като например , , , , , и действа повече или по-малко като елементи. Те групират други елементи заедно в раздели на страници. Когато обаче маркерът може да съдържа какъвто и да е вид информация, е лесно да се идентифицира какъв вид информация ще отиде в семантичен регион.

Пример за семантично оформление на елементи от w3schools

Семантични елементи, оформящи страница от w3schools

Защо да използвам семантични елементи?

За да разгледаме предимствата на семантичните елементи, ето две части HTML код. Този първи блок код използва семантични елементи:

Докато този втори блок код използва несемантични елементи:

Първо, много по - лесно се чете . Това е може би първото нещо, което ще забележите, когато разглеждате първия блок с код, използвайки семантични елементи. Това е малък пример, но като програмист можете да четете стотици или хиляди редове код. Колкото по-лесно е да прочетете и разберете този код, толкова по-лесно ви прави работата.

Той има по-голяма достъпност . Не сте единственият, който намира семантичните елементи по-лесни за разбиране. Търсачките и помощните технологии (като екранни четци за потребители с увредено зрение) също могат да разберат по-добре контекста и съдържанието на вашия уебсайт, което означава по-добро изживяване за вашите потребители.

Като цяло семантичните елементи също водят до по- последователен код . При създаване на заглавна използвайки методи на семантични елементи, различни програмисти могат да пишат това като , , , или просто . Има толкова много начини, по които можете да създадете заглавен елемент и всички те зависят от личните предпочитания на програмиста. Създавайки стандартен семантичен елемент, той улеснява всички.

От октомври 2014 г. HTML4 беше надстроен до HTML5, заедно с някои нови „семантични“ елементи. До ден днешен някои от нас все още може да са объркани защо толкова много различни елементи, които изглежда не показват големи промени.

и

„Каква е разликата?“, Може да попитате. И двата елемента се използват за разделяне на съдържание и да, определено могат да се използват взаимозаменяемо. Въпрос е в коя ситуация. HTML4 предлага само един тип елемент на контейнер, който е . Въпреки че все още се използва в HTML5, HTML5 ни предостави и по начин, който да замести .

Елементите и са концептуално подобни и взаимозаменяеми. За да решите кой от тях да изберете, вземете под внимание следното:

  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 елементи и се задълбочава във всеки от тях.