Задать вопрос
Anemo
@Anemo
html

Семантичен ли код?

Углубляюсь во фронтенд разработку, столкнулся с таким термином, как семантика, но не уверен что пишу код правильно.

На просторах интернета много противоречивой информации, и каждый имеет свое имхо. Интересно было бы узнать, насколько семантичен код приведенный ниже (большие смущения по поводу тега "section")?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<header>
		<div class="logo"></div>
		<nav class="top-menu">
			<ul>
				<li><a href="">Page1</a></li>
				<li><a href="">Page2</a></li>
				<li><a href="">Page3</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<article>
			<h1>Lorem</h1>
			<p>Lorem ipsum dolor sit amet.</p>
		</article>
		<aside>
			<nav class="side-menu">
				<ul>
				<li><a href="">Page4</a></li>
				<li><a href="">Page5</a></li>
				<li><a href="">Page6</a></li>
			</ul>
			</nav>
		</aside>
	</section>
	<footer></footer>
</body>
</html>
  • Вопрос задан
  • 2950 просмотров
Комментировать
Подписаться 6 Оценить Комментировать
Решения вопроса 1
Pazys
@Pazys
Вот шпора по семантике HTML5 (PDF)

В вашем случае вы в section просто вложили 2 структурных элемента. Считаю это неуместным, так как вы ничего не отделили. А точно семантически было бы так:
<article>
        <section>
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet.</p>
        <section>
        <section>
            <h2>Lorem</h2>
            <p>Lorem ipsum dolor sit amet.</p>
        <section>
    </article>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
SanDiesel
@SanDiesel
HTML CSS JS
да нормальный у тебя код)) что ты паришься...section абсолютно уместен, если у тебя несколько статей на странице будут размещаться, тем более если новости или вкладки какие. Если есть сомнения забей инфу по тегам и смотри спецификацию по ним, на пример на htmlbook точка ru
Ответ написан
Комментировать
Комментировать
SanDiesel
@SanDiesel
HTML CSS JS
Наткнулся сегодня, вспомнил, решил вам закинуть
ruseller.com/lessons.php?rub=1&id=1208
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Телеграм бот
22 нояб. 2024, в 02:56
10000 руб./за проект
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Ещё заказы