Середньостатистична веб сторінка

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

  • Який найкращий спосіб структурування розмітки?
  • Як інші роблять це?

Подібні питання постійно цікавлять нас. Хочеться достеменно знати, як інші люди пишуть розмітки в ці дні, так як нові веб-технології постійно з'являються. Таким чином, веб-розробники з багатьох країн об'єдналися задля детального дослідження, і вони зіткнулися з набором даних з більше ніж 8 мільйонів сторінок топ двадцятки результатів видачі Google.

Дослідження, які були проведені раніше

Ще в 2005 році Ян Хіксон, редактор специфікації HTML5, зробив аналіз зразка приблизно мільярда документів, з метою побачити з чого складається мережа. Мільярд - це величезна кількість, але для Google немає нічого неможливого. З такої величезної кількості документів він витягнув цінну інформацію про популярні імена класів, елементи, атрибути і відповідні метадані. Видатні результати були пізніше опубліковані в якості Web Authoring статистики, яка і досі є найпотужнішим дослідженням  веб-авторингу з коли-небудь зроблених.

Більш недавно, в 2008 році, завдяки Аналізу Opera Метаданих і Mining Application сканера, МАМА, в кінцевому підсумку було проаналізувано близько 3,5 млн URL. Брайан Уїлсон, автор цієї вражаючої роботи, розширив дослідження, публікуючи результати з докладним викладом структури сторінок, в тому числі HTML, CSS і JavaScript.

Один з аналізів з Web Authoring статистики, який згодом довів свою важливість у прогресуванні HTML5 розробки, був список найпопулярніших імен класів в цих HTML-документах. Сканер Opera MAMA також шукав найбільш поширені імена класів і на додаток до результатів Google, вони опубліковали релевантні результати щодо популярних ID значень атрибутів  до елементів.

Що це дослідження додає до загального розуміння?

Дані для цього дослідження виходять із 8,021,323 індексованих сторінок, зібраних з кращих двадцяти результатів Google, використовуючи близько 30 мільйонів ключових слів, обраних за їх значенням та обсягом. Ми запустили  Google пошук для кожного з них і взяли URL-адреси для топ 20 результатів видачі, додали їх до списку і видалити дублікати.

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

Наскільки свіжі ці дані?

Останній набір даних від 20 травня 2016 року.

Це нове дослідження ніколи не перевершить попереднє дослідження Google, зроблене ще в 2005 році. Суть його також не в перевершенні великого дослідження Opera. Мова йде про пошук нових і актуальних поглядів на фактичну розмітку, яка використовується найбільш популярними і успішними веб-сторінками в Інтернеті.

Отже, як на сьогодні виглядає середньостатистична сторінка HTML? Погляньте на скріншоти нижче і перегляньте дослідження для повної статистики.

Статистика

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

Більшість веб-сайтів використовують 26 різних HTML елементів, плюс-мінус кілька, та з цікавим піком у 9 елементів.

Двадцять шість елементів використовуються на більшості сторінок, впорядкованих за частотою

Не дивно, що Head і HTML використовуються на всіх сайтах. Трохи дивно, що Body є на 99% - можливо, був дуже великий сайт із дивною помилкою? Також дивно, що табличні елементи у нижній частині списку досі містяться на майже третині всіх сайтів.

Серед описів типів документів (document type declarations), які визначають, яка версія (X) HTML сторінки використовується, остання HTML5 doctype (тип документів) явно лідирує. em>Doctype - ценайперший рядок HTML документа, який визначає, яку версію (X) HTML сторінка використовує:

Майже дві третини всіх веб-сайтів декларують себе на HTML5.HTML, який відомий як кореневий елемент, огортає вміст веб-сторінки і його можна знайти відразу після оголошення doctype. Метадані містять таку інформацію про сторінку, як стилі, скрипти і дані, щоб допомогти пошуковим системам або браузерам  використовувати і відображати сторінки.

Якщо ми подивимося на всі елементи, які конкретно вказують браузеру і пошуковим системам сайту на те, як сайт стилізувати, ми дізнаємося про приблизно 175 мільйонів елементів, а ось як вони відсотково розташувалися:

Контент секціонування

Елементи контент секціонування дозволяють організувати контент на логічні частини. Розбивка 105 мільйонів елементів на  секціонування контенту виглядає наступним чином:

H3 є найбільш популярними елементами заголовків і елементами загального контент секціонування.

Елементи текстового контенту корисні для організації контенту в межах body, і вони допоможуть вам визначити мету цього контенту. З мільярда елементів текст контенту:DIV має явне лідирство.

Яке майбутнє мережі?

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

Веб-компоненти - це HTML-пов'язана технологія, яка дозволяє, по суті, створювати і використовувати власні елементи, як ніби це звичайна HTML. Крім того, ви можете навіть створювати власні версії стандартних HTML-елементів.

Ніхто не може передбачити майбутнє. Ми можемо тільки здогадуватися, як середньостатистична веб-сторінка буде виглядати через десять років з цього моменту. Наступного разу ми проводемо це дослідження (ми розглядаємо квартально), чи побачимо такі речі, як ріст веб-компонентів?