Стандарт HTML5 був доопрацьований і випущений у 2014 році, і саме це має бути HTML, коли перша версія була запущена всі ті роки тому. HTML 2.0 був першим справжнім «стандартом», опублікованим ще в 1995 році. Через два роки був опублікований HTML 3. Ще два роки пізніше було введено HTML 4.01 і з тих пір він є робочим конем Інтернету.
Перший «робочий проект» HTML5 був представлений ще в 2008 році, тоді дивно широка підтримка браузера. HTML5, про який ми знаємо сьогодні, сильно відрізняється від HTML минулого, і тут ми будемо обговорювати лише те, що змінився останній стандарт з його випуском. З моменту запуску HTML5 він отримав широке прийняття, і всі його функції та можливості тепер підтримуються всіма основними браузерами. Тут ще є кілька гикавок, але загальний HTML5 добре засвоївся з сучасним досвідом в Інтернеті.
Як веб-розробник, ви можете бути або старим професіоналом, який освоїв старі стандарти, або новачком з цікавістю спостерігати за розробкою нових стандартів у кулуарах. У будь-якому випадку вам доведеться з часом почати перехід на HTML5.
HTML проти HTML5 інфографіки
Перший крок до переходу на HTML5 або навчання - зрозуміти різницю між старішим і останнім стандартом. Ось деякі ключові відмінності між HTML та HTML5:
-
HTML5 - жива мова
HTML5 - це жива мова. Дивовижно бачити, що може зробити HTML5, але також важливо знати, що HTML5 не є повністю стандартизованою версією, як HTML4, якій більше десяти років і стандартним набором є незмінним.
Якщо ви вступаєте в HTML5, вам доведеться зробити кілька оновлень. Атрибути та елементи додаються та регулярно змінюються щороку. Це також залежить від того, наскільки ви використовуєте багаті елементи, але це, безумовно, один із ризиків, пов’язаних із використанням рідини, змінюючи мову, як HTML5.
-
HTML5 простіше
Хоча HTML5 має такі ризики, як постійні оновлення, як правило, не відставати від змін та оновлень через простіший синтаксис порівняно з HTML4. Наприклад, у вас є дуже проста декларація на початку сторінки, щоб встановити її як сторінку HTML5:
Просте оголошення Doctype - це одне із спрощень, внесених у синтаксис HTML, який сумісний з усіма версіями HTML4 і аж до XHTML1. Однак HTML5 не сумісний із SGML.
Рекомендовані курси
- Безкоштовне навчання програмуванню Python
- Курс сертифікації безкоштовного тестування програмного забезпечення
- Безкоштовні курси програмування Java
- Повний курс PERL
-
Новий елемент
HTML5 постачається з низкою нових елементів і усуває декілька інших (про які ми розповімо через деякий час), але одним з його ключових елементів є те, що сильно вплинуло на використання Adobe Flash на веб-сайтах. Незважаючи на те, що Flash все ще використовується на кількох веб-сайтах, HTML5 було прийнято багатьма, і багато людей думають, що це з часом зробить Flash застарілим. Тільки час вирішить це; до цього часу каскадний елемент HTML5 зарекомендував себе як хороша альтернатива Flash.
Елемент можна використовувати для малювання графіки різних форм і кольорів за допомогою сценаріїв, як правило, JavaScript. Елемент - це просто контейнер для графіки; для визначення графіки потрібно використовувати сценарій. За замовчуванням полотно - це прямокутна область без вмісту та меж. Ринок такий:
Важливо вказати атрибут id, а також ширину та висоту для визначення розміру полотна. Ви можете додати атрибут стилю для визначення меж.
Ви також можете використовувати JavaScript, як у наведеному нижче прикладі:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = “# FF0000”;
ctx.fillRect (0, 0150, 75);
-
Нові та елементи
Ще одне велике доповнення, до якого входить HTML5, - це нові та елементи, що вказують на нову анатомію веб-сторінок. За допомогою цих нових тегів більше не потрібно ототожнювати два елементи з тегом.
Технічні характеристики визначають елемент заголовка як представлення групи "навігаційних" або "вступних" посібників. Таким чином, елемент може бути використаний для визначення вступу до розділу сторінки або до самої сторінки. Ось фрагмент коду, в якому використовується елемент заголовка.
Назва
Автор Автор Подано в Web 2.0
Основна частина тексту
Характеристики HTML5 посилаються на футовий елемент, що представляє "колонтитул для його найближчого предка в розділі вмісту або кореневий елемент секціонування" і, як правило, містить інформацію щодо розділу, наприклад, ім'я автора, дані про авторські права, посилання на документи тощо.
За логікою, колонтитул розміщується внизу веб-сторінки. Але він також може бути розміщений в кінці розділу сторінки. Ось кілька прикладів кодування, що використовує елемент нижнього колонтитулу:
Заголовок вмісту
Автор Автор Подано в Web 2.0
Основна частина тексту.
Теги: Командна строка, Компас, CSS, Sass, Термінал
10 лайків
Тут колонтитул містить теги допису та допис "Facebook любить".
-
І елементи
Тепер, якби ви переглянули вищезазначені приклади, ви помітили б ще кілька нових елементів, як-от. Цей елемент разом із елементом дає змогу відмітити конкретні розділи вашого макета та дуже корисні для оптимізації пошукових систем. Елемент статті визначається як відображення самостійного компонента веб-сторінки, що підлягає незалежному багаторазовому використанню або розповсюдженню. Це може бути газета, допис на форумі, стаття журналу, запис у щоденнику чи щось інше.
Елемент статті, як правило, має власний заголовок в елементі заголовка і, можливо, навіть колонтитулі, як ви бачили у наведеному вище прикладі. Ви можете просто думати про цей елемент як запис у блозі або незалежний вміст; хитра частина - визначення того, що є незалежним. Простіше кажучи, незалежний зміст - це той, який має сенс сам по собі.
Хороший спосіб дізнатися, чи не є вміст незалежним, це запитання, чи є сенс у RSS-стрічці. Статті в блозі та статичні сторінки мають сенс, а на деяких сайтах є канали коментарів. Але абзац у статті не мав би сенсу відокремлений від решти змісту. Ось фрагмент коду з колонтитулом та тегами для публікації.
Заголовок вмісту
Опубліковано: 24.02.2016
Основна частина тексту
Ліцензія Creative Commons Attribution-ShareAlike
Елемент розділу відповідно до специфікацій W3C, що представляє "загальний розділ" програми чи документа. Його можна сплутати з тегом, тому давайте вияснимо плутанину прямо зараз. Тег розділу використовується, коли вміст у ньому має бути згрупований окремо від решти сторінки з однією темою, і коли його слід розглядати як запис у структурі сторінки. Однак елемент div визначається як "загальний контейнер", що означає, що він не відокремлений від самої головної сторінки, окрім власних атрибутів заголовка, мови та класу.
-
Нові та елементи
Нові та елементи HTML5 є частиною специфікацій інтерактивних елементів, але вони є одними з найменш обговорених елементів розробниками. З огляду на той факт, що Інтернет перетворився на більш просто пов'язані сторінки та документи, ці елементи є вітальним доповненням для більшої інтерактивності в Інтернеті.
Елемент не слід плутати з елементом, який визначається як навігаційний тег HTML, який представляє блок навігації по сторінці. Зазвичай він містить посилання, щоб користувачі могли переходити через розділи на сторінці або на іншу сторінку. З іншого боку, тег меню представляє команди меню для простоти в настільних та мобільних додатках. Ось приклад елемента в дії:
Привіт Світ
Тим часом, елемент - це ще один спосіб впорядкувати зображення та текст. Він використовується разом з елементом для розмітки ілюстрацій, діаграм та фотографій. Нижче наведено короткий фрагмент коду, який містить в собі обидва елементи.
-
Нові та елементи
Це два основних доповнення до стандарту HTML5. Звуковий тег, як і відеотег, дозволяє розробникам вбудовувати музику та аудіо на свій веб-сайт. На відміну від попереднього стандарту, ви не обмежуєтеся додаванням міді-музики, хоча все ж є деякі обмеження щодо типу використовуваних файлів. Більшість веб-переглядачів, які стосуються Webkit, підтримують звичайні MP3-файли, а інші підтримують лише формат OGG. Хороша новина полягає в тому, що є тонни файлових перетворювачів, і ви можете просто поставити дві версії аудіофайлу; правильна версія буде підібрана автоматично.
Ви можете використовувати звуковий тег, як і будь-який інший елемент. Ось приклад фрагменту:
Звуковий тег також має ряд атрибутів для додаткових елементів керування, включаючи атрибути подій, а події включають вікна подій, події форми, медіа-події та події миші. Відео елемент також має ряд атрибутів вмісту, включаючи SRC, глобальні атрибути, цикл, контроль, попереднє завантаження та плакат. Атрибути SRC, циклу, автовідтворення та елементів керування є досить зрозумілими та однаковими для всіх медіа-елементів, тоді як глобальні атрибути є загальними для всіх елементів. Вони включають редактор, приховане, контекстне меню тощо.
Є кілька інших мультимедійних атрибутів та елементів, які поставляються з HTML5, як елемент треку, який забезпечує текстові доріжки для відеоелемента.
-
Нові форми
HTML5 тепер поставляється з формою та елементами. Якщо ви не плануєте використовувати багато таблиць на сторінці, ви також можете видалити атрибут та ознайомитись зі змінами, внесеними перед тим, як рухатися вперед.
-
Більше і елементів
Це означає, що всі атрибути, які дозволяють розробникам створити ідеально викладену тоновану таблицю, наприклад, бордюр, bgcolor, вирівнювання, висота, правила та інше. Усі ці атрибути замінюються CSS.
-
Не більше, і
Це чудово для тих розробників, які відпрацьовували HTML в перші дні. Атрибути набору фреймів, фреймів і noframes повністю видалено разом з іншими, такими як blink, basefont тощо. Вам доведеться керувати, не використовуючи таблиці для компонування. Таблиці все ще є частиною HTML5, але вони більше не призначені для пікселів. Технічні характеристики говорять, що таблиці не повинні використовуватися для посібників з розкладкою та для управління макетом сторінки.
Висновок
Як ви добре бачите, в HTML5 є багато змін, і користуватися ним потрібно обережно і обережно. Вам також потрібно оновити свої знання з мови, оскільки вона змінюється з часом і отримує більше оновлень. Потрібно припинити використання елементів, які HTML5 видалив із себе, і використовувати нові елементи HTML5, які обов'язково залишаться, як теги заголовка або колонтитула.
Ви бачили вище - це просто спрощена версія кількості змін, внесених HTML5 під час її запуску. Але будьмо чесними тут; немає нічого простого чи повільного в тому, як HTML5 приймається, а новий стандарт додає безліч можливостей, які мають вирішальне значення для сучасного користувацького досвіду. Вам потрібно бути в курсі нової мови, а також вивчити деякі CSS, які відіграють більшу роль, ніж раніше.
Хороша річ у цих змінах - це те, що, хоча вони великі, вони є на краще, і це розуміють усі зацікавлені сторони, які тут беруть участь. Веб-браузери будуть більш потужними, коли вони рухаються до хмари, з можливістю більше працювати з ними. З такими речами, як Ajax, з вбудовуванням відео та аудіо тощо, буде набагато простіше кодувати прямим методом і дозволяти браузеру брати на себе великі обов'язки. Наприклад, нові елементи структури, такі як фігурка, колонтитул, резюме та розділ, всі відносяться до структури документа, а візуалізація залишається у браузері.
Схожі статті: -
Ось кілька статей, які допоможуть вам отримати більш детальну інформацію про HTML та HTML5, тому просто перейдіть за посиланням.
- HTML і XML
- HTML5 vs Flash Top 9 відмінностей (з Інфографікою)
- HTML проти XHTML
- HTML5 проти Flash
- Дивовижні відмінності HTML5 від JavaScript
- 10 дивовижних корисних порад щодо програмування Python (трюки)