Лабораторная работа: Семантические теги

Цель:
Научиться применять семантические теги HTML для улучшения структуры веб-страницы, упрощения восприятия контента пользователями и поисковыми системами.

Критерии оценивания:

• Знает семантические теги HTML.
• Использует их для создания структурированной страницы.
• Разрабатывает веб-страницу с улучшенной читабельностью и логической организацией.

Ход работы:

1. Подготовительный этап:
   • Ознакомьтесь с семантическими тегами HTML5:
     • <header> заголовок страницы или раздела.
     • <nav> меню навигации.
     • <main> основной контент.
     • <section> логический раздел.
     • <article> самостоятельный блок контента.
     • <aside> боковая информация или заметки.
     • <footer> 2013 нижний колонтитул.
   • Поймите разницу между семантическими и несемантическими тегами (например, <div> и <span>).
2. Создание HTML-документа:
   • Откройте текстовый редактор и создайте новый файл с расширением .html.
   • Добавьте базовую структуру HTML:

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Семантические теги</title>

</head>

<body>

<!— Контент страницы —>

</body>

</html>

1. Добавление семантической структуры:
   • Заголовок и меню:

<header>

<h1>Моя семантическая веб-страница</h1>

<nav>

<ul>

<li><a href=»#about»>Обо мне</a></li>

<li><a href=»#services»>Услуги</a></li>

<li><a href=»#contact»>Контакты</a></li>

</ul>

</nav>

</header>

1. • Основной контент:

<main>

<section id=»about»>

<h2>Обо мне</h2>

<p>Я веб-разработчик, специализирующийся на создании адаптивных и удобных сайтов.</p>

</section>

<section id=»services»>

<h2>Мои услуги</h2>

<article>

<h3>Разработка сайтов</h3>

<p>Я создаю сайты с уникальным дизайном и функциональностью.</p>

</article>

<article>

<h3>SEO-оптимизация</h3>

<p>Оптимизирую сайты для улучшения их видимости в поисковых системах.</p>

</article>

</section>

</main>

1. • Боковая информация:

<aside>

<h3>Полезные ссылки</h3>

<ul>

<li><a href=»https://example.com»>Портфолио</a></li>

<li><a href=»https://example.com»>Блог</a></li>

</ul>

</aside>

1. • Нижний колонтитул:

<footer>

<p>&copy; 2024 Мой сайт. Все права защищены.</p>

<p>Связаться со мной: <a href=»mailto:example@example.com»>example@example.com</a></p>

</footer>

1. Проверка работы:
   • Сохраните файл и откройте его в браузере.
   • Проверьте корректность отображения структуры.
2. Оформление отчета:
   • Включите:
     • Полный HTML-код документа.
     • Скриншот результата в браузере.
     • Краткое объяснение применения каждого семантического тега.

Пример задания:
Создайте веб-страницу для портфолио разработчика с использованием следующих секций:

• Заголовок: Имя разработчика и меню навигации.
• Обо мне: Краткая биография.
• Проекты: Используйте <article> для описания каждого проекта.
• Контакты: Email и ссылки на социальные сети.

Советы:

• Используйте семантические теги вместо <div> там, где это возможно.
• Убедитесь, что структура страницы логична и удобна для восприятия.
• Проверьте доступность страницы (например, правильность использования <nav> для меню).

Ожидаемый результат:

• Семантически структурированная веб-страница.
• Использование всех ключевых семантических тегов.
• Читабельный и функциональный документ, соответствующий современным стандартам HTML5.