Переводимо сайт на html5

Переводимо сайт на HTML5

З HTML5 прибрані деякі елементи, що втратили актуальність. наприклад: , , , , , , , , , , <strike>, <tt>, <u>, <xmp>. Зате з'явилися нові теги - <section>, <nav>, <aside>, <header>, <footer> і атрибути <role> - <article>, <main>, <form>, <button>, <search>. Список неповний, але це не є темою нашої розмови.</p><p>Для цього нам необхідно видалити неактуальні елементи, поліпшити структуру і семантику вмісту сайту. Ну, з першим все зрозуміло, видалили. Якщо якийсь із видаляються тегів вами використовувався, то додайте до елементу клас і опишіть його в файлі style.css.</p> <p>Далі займемося структурою і семантикою. Для початку розберемося з новими тегами. У попередній версії мови повсюдно використовувався тег <div>. Верстка на «дівах» була «наше все»! Але сам по собі <div> не мав ніякого семантичного значення. Він міг містити і малі, і блокові елементи, і малюнок, і текст. Він нікуди не зник, наш улюблений <div>, немає. Він як і раніше буде нами використовуватися, але він вже не буде головним.</p> <p>Розглянемо основні теги по порядку, в якому вони можуть розташовуватися на сторінці:</p><p>1.<header> - шапка сайту.</p> <p>2.<nav> - навігаційне меню сайту.</p> <p>3.<section> - група логічно об'єднаних інформаційних блоків.</p> <p>4.<article> - самостійний інформаційний блок.</p> <p>5.<aside> - бічний блок, зазвичай з додатковою інформацією або навігацією.</p> <p>6.<footer> - підвал сторінки.</p> <p>Перейдемо до основних атрибутів HTML5.</p> <p>Всі їх перераховувати я так само не буду, ми розглянемо тільки основні, які нам знадобляться обов'язково. Атрибути роблять семантику сторінки ще більш зрозумілою. Вони уточнюють зміст структурних елементів, їх роль:</p> <p>2.<main> - головний інформаційний блок.</p> <p>3.<form> - якась інтерактивна форма.</p> <p>4.<button> - активний елемент, кнопка.</p> <p>5.<search> - Пошук по сайту.</p> <p>6.<banner> - логотип і назву сайту, заголовок сторінки.</p> <p>7.<complementary> - додатковий блок, відокремлений від змісту сайту.</p> <p>8.<contentinfo> - узагальнююча інформація про сайт, зазвичай в футере.</p> <p>9.<navigation> - навігаційне меню.</p> <p>10.<textbox> - поле для введення тексту.</p> <p>Грубо кажучи, робот віддасть пріоритет блоку, що знаходиться між такими тегами:</p> <p>І практично проігнорує:</p> <p>Так досягається найкраща оптимізація змісту сайту відповідно до вимог SEO. Робот швидше і правильніше проиндексирует сторінку, побудовану за таким принципом. Та й «читати» такий текст веб-майстру зручніше.</p> <p>Перейдемо до написання html сторінки.</p> <p>У підсумку ми отримаємо приблизно такий шаблон для сторінки сайту:</p> <p>Успіхів в сайтобудування!</p> <p>Схожі записи: Різновиди логотипів і їх стилі.<br> Любов і ненависть в CSS<br> Ручне сортування публікацій в Ruxe Engine<br> Аксіоматичний CSS. Частина 3. Синтаксис.<br> Аксіоматичний CSS. Частина 2<br></p> <h4>Схожі статті</h4> <ul> <li> <p><a href="/articles/buduemo-sajt-na-div-verstki-i-pidkljuchaemo-stili.php">Будуємо сайт на div-верстки і підключаємо стилі css</a></p> </li> </ul> </div> </article> </div> </div> </div> <footer class="igrzom-footer clearfix"> <p>Copyright &copy; 2024<br></p> </footer> </div> </div></body> </html>