Елементи верхнього рівня:
<!DOCTYPE> - ОБОВ'ЯЗКОВА ІНСТРУКЦИЯ оголошення ТИПУ документа
<html>ВСЯ СТРУКТУРА web-сторінки</html>
<head>СЛУЖБОВА ІНФОРМАЦІЯ для браузера та пошукових систем</head>
<body>ВЕСЬ КОТЕНТ web-сторінки</body>
Основні частини структури web-сторінки:
<body>
<!-- Шапка сторінки -->
<header>
контент Шапки сторінки
</header>
<!-- Унікальний контент сторінки -->
<main>
весь Унікальний контент сторінки
</main>
<!-- Підвал сторінки -->
<footer>
контент Підвалу сторінки
</footer>
</body>
Тег <header>:
<body>
<!-- Шапка сторінки -->
<header>
<a href="./">Логотип сайту</a>
<nav>
<!--Меню навігації по інших сторінках -->
<ul>
<li><a href="./">Page-1</a></li>
<li><a href="./">Page-2</a></li>
<li><a href="./">Page-3</a></li>
</ul>
</nav>
</header>
.
.
.
</body>
Тег <main>:
<body>
.
.
.
<!-- Унікальний контент сторінки -->
<main>
<section>
<article>
<h1>Солодкий пиріжок</h1>
<img src="посилання на зображення пиріжка" alt="пиріжок" />
<p>
Дуже смачний печений пиріжок
з різними наповнювачами:
вишнею, персиком сливою або полуницею.
</p>
<p>Ціна: 50 кредитів</p>
</article>
</section>
<section>
<h1>Найпопулярніші пиріжки цього тижня</h1>
<!--Всередині кожного <li> може бути картка пиріжка -->
<!-- з секції «Тег <article>» -->
<ul>
<li><a href="./">Смажений з грибами</a></li>
<li><a href="./">Смажений з м'ясом</a></li>
<li><a href="./">Печений з яблуками</a></li>
<li><a href="./">Печений з сиром</a></li>
</ul>
</section>
</main>
.
.
.
</body>
Тег <footer>:
<body>
.
.
.
<!-- Підвал сторінки -->
<footer>
<!-- Копірайт -->
<p>Всі права захищені © lpj.dev</p>
<!-- ⚠️ Посилання на соцмережі, не <nav> -->
<address>
<!-- Список адресних посилань -->
<ul>
<li><a href="./">Facebook</a></li>
<li><a href="./">Twitter</a></li>
<li><a href="./">Instagram</a></li>
</ul>
</address>
</footer>
</body>
Повна структура web-сторінки:
<body>
<!-- Шапка сторінки -->
<header>
<a href="./">Логотип сайту</a>
<nav>
<!--Меню навігації по інших сторінках -->
<ul>
<li><a href="./">Page-1</a></li>
<li><a href="./">Page-2</a></li>
<li><a href="./">Page-3</a></li>
</ul>
</nav>
</header>
<!-- Унікальний контент сторінки -->
<main>
<section>
<article>
<h1>Солодкий пиріжок</h1>
<img src="посилання на зображення пиріжка" alt="пиріжок" />
<p>
Дуже смачний печений пиріжок
з різними наповнювачами:
вишнею, персиком сливою або полуницею.
</p>
<p>Ціна: 50 кредитів</p>
</article>
</section>
<section>
<h1>Найпопулярніші пиріжки цього тижня</h1>
<!--Всередині кожного <li> може бути картка пиріжка -->
<!-- з секції «Тег <article>» -->
<ul>
<li><a href="./">Смажений з грибами</a></li>
<li><a href="./">Смажений з м'ясом</a></li>
<li><a href="./">Печений з яблуками</a></li>
<li><a href="./">Печений з сиром</a></li>
</ul>
</section>
</main>
<!-- Підвал сторінки -->
<footer>
<!-- Копірайт -->
<p>Всі права захищені © lpj.dev</p>
<!-- ⚠️ Посилання на соцмережі, не <nav> -->
<address>
<!-- Список адресних посилань -->
<ul>
<li><a href="./">Facebook</a></li>
<li><a href="./">Twitter</a></li>
<li><a href="./">Instagram</a></li>
</ul>
</address>
</footer>
</body>
Приклад розмітки web-сторінки на codepen.io:
Приклад розмітки web-сторінки:
Studio.dev
Features
-
Experience
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius repellendus voluptates sequi natus accusantium adipisci ratione laborum sunt, modi nemo?
-
Technology stack
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius repellendus voluptates sequi natus accusantium adipisci ratione laborum sunt, modi nemo?
-
Support
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius repellendus voluptates sequi natus accusantium adipisci ratione laborum sunt, modi nemo?
Our technology stack
- HTML
- CSS
- JavaScript
- React
- Next.js
- Node.js
- PostgreSQL
⚠ корисне джерело інформації ⚠
⚠ корисне джерело інформації ⚠
Приклад коду без помилок:
Squoosh
Squoosh - сервіс оптимізації зображень.
Переваги
- Працює в браузері
- Не завантажує систему
- Зручний інтерфейс
Приклад коду з помилками:
Squoosh - сервіс оптимізації
зображень.- Працює в браузері
- Не завантажує систему
- Зручний інтерфейс
Переваги
Приклад коду з помилкою вкладання тегів:
⚠ корисне джерело інформації ⚠
- Markup Validation Service - основний сайт перевірки (валідаціяї) коду
- Спеціальний онлайн сервіс (валідатор) - перевіряє код HTML-документа щодо відповідності стандарту
- ДЗ-4: Макет головної сторінки WebStudio створений за допомогою figma
⚠️ Гарна підказка з ДЗ-4 для розумників: ⚠️
Генерація валідного посилання на приклад коду ДЗ-4:
Згенероване посилання: