основи HTML
HTML код вказує браузеру, як рендерить контент. Розмітка є базовою структуру сторінок. Протягом десятиліть HTML вважався наріжною технологією в інтернеті поряд з CSS і JS. Стандарти HTML і CSS регулюються консорціумом всесвітньої мережі.
HTML документи завантажуються з серверів і говорять браузеру, як відображати текст, посилання, зображення та інтерактивні форми.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Історія HTML
Нові версії HTML фокусувалися на підвищенні доступності інтернет технологій, а не на рендеринге старих версій. Наприклад, крім нових опцій по створенню макетів в HTML4 покращився розміщення елементів для слабозорих користувачів.
Як результат, покращився архівне індексування, що призвело до підвищення точності пошуку. Крім того, з'явилася дуже якісна типографіка. У HTML4 веб-дизайнери також отримали додатковий контроль над швидкістю і порядком рендеринга контенту.
HTML або HTML5: еволюція веб-розробки
Тому був реалізований HTML5, покликаний вирішити ці проблеми і надати більш плавний і послідовний досвід користувачам і розробникам.
поступове впровадження
HTML4 був стандартом протягом 15 років, тому багато розробників досі ним користуються. Браузери ще довго будуть підтримувати цей стандарт. Старі браузери можуть «ігнорувати» новий HTML5 код при рендеринге контенту. За фактом все сучасні браузери добре підтримують HTML5 специфікацію: Chrome, Firefox, Opera і Safari. HTML5 постійно розвивається, тому браузери в нових версіях додають підтримку нових властивостей. На наше щастя, всі основні браузери одночасно додають підтримку нових властивостей, як тільки ті виходять.
Можете перевірити свій браузер на підтримку HTML5 за допомогою HTML5test.
Більшій частині розробників не доведеться лагодити свої старі сайти. Однак якщо ви пов'язуєте своє майбутнє зі створенням сайтів, вам слід дізнатися про переваги HTML5 перед HTML.
HTML або HTML5: що нового?
були вилучені застарілі елементи, такі як center, font та strike;
поліпшення правил парсинга зробило його більш гнучким і сумісним;
з'явилися нові елементи video, time, nav, section, progress, meter, aside і canvas;
нові атрибути для інпут, в тому числі email, URL, dates і times;
нові атрибути, в тому числі charset, async і ping;
нові API з офлайн кешуванням і підтримкою drag-and-drop і т.д;
підтримка векторної графіки без сторонніх програм типу Silverlight або Flash;
підтримка MathML поліпшила відображення математичних позначень;
завдяки JS Web worker API, JS тепер може працювати у фоновому режимі;
глобальні атрибути типу tabindex, repeat і id тепер можна застосовувати до всіх елементів.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Які переваги для користувачів є в HTML5 в порівнянні з HTML?
Ми розібралися з технічною стороною питання, а які переваги несе HTML5 для звичайних користувачів? Нижче я склав список цих нововведень, які ви могли помітити або не помітити:
частина даних можна зберігати на пристрої користувача, тобто додатки можуть працювати без інтернет з'єднання;
веб-сторінки можуть відображати більше шрифтів з більш широким діапазоном кольорів, тіней та інших ефектів;
об'єкти на сторінці можуть рухатися разом з курсором;
браузери можуть відображати інтерактивну 3D графіку за допомогою графічного процесора комп'ютера.
Відкинувши необхідність в сторонніх плагінах, HTML5 прискорює доставку більш динамічного контенту.
Які переваги для веб-розробників є в HTML5 в порівнянні з HTML?
Основний упор в HTML5 робився на те, щоб дати розробникам більше гнучкості, що в свою чергу повинно було привести до більш захоплюючого користувача досвіду. HTML5 задумували заради кількох цілей:
1. Однакова обробка помилок
У всіх браузерах є парсери для обробки синтаксичних і структурних помилок в HTML коді. До недавнього часу стандарти цього процесу ніде не були прописані.
Тому розробникам браузерів довелося тестувати HTML документи з помилками в інших браузерах, щоб шляхом зворотного інжинірингу створити процес обробки помилок.
У житті HTML помилки неминучі. За даними Rebuildingtheweb в 90% сторінок присутні помилки в коді. Оброблювач помилок просто необхідний для правильного відображення сайтів. Як наслідок, закодована обробка помилок економить розробникам браузерів багато часу і грошей. Не можна занижувати переваги чітко заданого алгоритму парсинга.
2. Покращена підтримка властивостей для веб-додатків
Іншою метою HTML5 було - змусити браузери працювати, як платформи додатків. Сайти стали набагато складніше, тому розробники навчилися обходити розширення браузерів і інші серверні технології. HTML5 дозволяє контролювати продуктивність сайту. Безліч хаков на Flash і JS, використовуваних в HTML4, увійшли в нову специфікацію мови. Ці зміни забезпечують більш плавний і швидкий користувальницький досвід.
3. Удосконалена семантика елементів
Семантичні ролі деяких існуючих елементів покращилися, що зробило код більш інтуїтивним. Нові елементи section, header, article і nav можуть замінити більшу частину тегів div, які ускладнюють процес пошуку помилок.
4. Максимальна підтримка мобільних пристроїв
Інші помітні поліпшення
З запуску HTML5 пройшло кілька років, і кілька великих компаній перевели свої сайти на новий стандарт. Безліч розробників діляться своїми думками про HTML і HTML5. Самі згадуються особливості:
1. Підтримка користувальницьких data-атрибутів
До виходу HTML5 додавати в теги призначені для користувача атрибути було ризиковано. У HTML4 атрибути не заважали повного рендерингу сторінок, але документи з ними не проходили затвердження на що призводило до рендерингу в режимі сумісності. Атрибут data- * вирішив цю проблему.
Атрибут data- * можна використовувати по-різному, але його основне завдання - зберігати додаткову інформацію про елементи. Дані зберігаються у вигляді простої рядки. Призначені для користувача дані дозволили розробникам створювати більш захоплюючі сторінки без підключення Ajax і серверних технологій.
2. Більше ніяких кук
Об'єкт localStorage належить до глобального простору імен window, тобто він доступний з будь-якої точки скрипта. У локальне сховище можна поміщати тільки рядки, однак за допомогою методів JSON.stringify () і JSON.parse () можна з легкістю поміщати туди все нові дані. Є й інший об'єкт sessionStorage, що дозволяє зберігати дані до тих пір, поки користувач не закрив вікно браузера.
3. Автофокус на полях форми
Атрибут автофокусу дозволяє розробникам вказати поле, яке отримає фокус після завантаження сторінки. В одному документі можна вказати атрибут autofocus тільки для одного елемента, користувач може переписувати значення, вибираючи інше поле. Наприклад, якщо додати атрибут autofocus до поля Last Name, як показано на скріншоті нижче, то після завантаження сторінки поле Last Name автоматично підсвічується.
4. У тегах script and link більше не потрібно вказувати атрибут type
У HTML5 мається на увазі, що теги script і link посилаються на скрипти і стилі, тобто необхідність у використанні атрибуту type відпала.
Майбутнє HTML і HTML5
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
