padonnak
@padonnak

HTML5 как правильно оформить главную страницу?

Всем привет, углубляюсь в разметку но везде пишут по разному, собственно сделал вот такой шаблон правильно или нет?

<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body>
<!-- header -->
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-2 " id="headerBox">
<!-- LOGO -->
<div class="logo pull-left">
<a href="" class="logo-link">
<img rel="noreferrer" src="" alt="" id="logo"></a>
<a href="javascript:void(0)" class="menu-icon"></a>
<div class="clearfix"></div>
</div>
<!-- Инфомация погода курс валют -->
<div class="pull-right header-info">
<ul>
<li class="header-name"><a href="/" title="">title</a></li>
<li class="clearfix"></li>
<li class="" title=""><a href="" target="_blank">ВК</a></li>
<li class="" title=""><span class="glyphicon glyphicon-usd"></span> 61.7515 <span class="glyphicon glyphicon-euro"></span> 64.4809</li>
<li class="" title="Погода">Погода -31</li>
<li class="clearfix"></li>
</ul>
</div>

<div class="clearfix"></div>
<!-- Навигация (МЕНЮ) -->
<nav class="main-menu-list">
<div class="menu-menu-1-container">
<ul class="main-menu-ul">
<li id="menu-item" class="menu-item"><a href="" title=""><strong>menu</strong></a>
<li class="menu-item"><a href="" title="">menu</a></li>
<li class="menu-item"><a href="" title="">menu</a></li>
<li class="menu-item"><a href="" title="">menu</a></li>
</ul>
</li>
<li class="menu-item"><a href="" title=""><strong>menu</strong></a></li>
</ul>
</div>
<div class="clearfix"></div>
</nav>
<!-- КОНЕЦ Навигации (МЕНЮ) -->
</div>
</div>
</div>
</header>


<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-2">

<!-- навигация home->cat->news -->
<ul class="breadcrumb" id="crum">
<li><a href="/">home</a></li>
<li><a href="/">cat</a></li>
<li class="active">news</li>    
</ul>
  

<!-- H1 страници -->
<div class="title-page"><h1 class="breadcrumb">Объявления</h1></div>

 

<main>
<!-- статья 1 -->
<article class="post" itemscope itemtype="http://schema.org/Article">
<div class="post-preview">
<img rel="image_src" src="" class="image-board" alt="title" itemprop="image">
<h2 itemprop="name" class="hyphenate text" lang="ru"><a href="" itemprop="url">title</a></h2>
<p itemprop="description">description</p>
</div>
</article>
<!-- статья 2 -->
<article class="post" itemscope itemtype="http://schema.org/Article">
<div class="post-preview">
<img rel="image_src" src="" class="image-board" alt="title" itemprop="image">
<h2 itemprop="name" class="hyphenate text" lang="ru"><a href="" itemprop="url">title</a></h2>
<p itemprop="description">description</p>
</div>
</article>
<!-- статья 3 -->
<!-- статья 4 -->
<!-- статья 5 -->
</main>


<!-- Навигация вперед назад -->
<div class="page-navigation">
<a href="" title="">next</a>
</div>
<!-- футер -->
<footer class="footer">
<a href="" title="">cat</a>
<a href="" title="">cat</a>
<a href="" title="">cat</a> 
</div>
<div class="clearfix"></div>
<span>name <a href="" target="_blank">name</a> </span>© <a href="/" title=""><strong>site</strong></a> YEAR </div>
</footer>
</div>
</div>
</div>
</body>
</html>
  • Вопрос задан
  • 604 просмотра
Пригласить эксперта
Ответы на вопрос 3
sfi0zy
@sfi0zy Куратор тега HTML
Creative frontend developer
Вам бы для начала провериться, а то как-то странно говорить про правильность, когда там теги открываются и закрываются где попало...
Ответ написан
Ankhena
@Ankhena Куратор тега HTML
Нежно люблю верстку
собственно сделал вот такой шаблон правильно или нет?

нет

1. Для оценки целесообразности использования тегов имеет смысл приложить макет и стили.

2. Теги должны правильно открываться и правильно закрываться. Внутри nav начинается бардак.

3. Куча лишних оберток. Возможно, они оправданы макетом, но нам этого не показали.
Например,
<div class="title-page"><h1 class="breadcrumb">Объявления</h1></div>

С какой целью div?
Аналогично, внутри nav, да и почти везде.

4.
<li class="header-name"><a href="/" title="">title</a></li>
<li class="clearfix"></li>
<li class="" title=""><a href="" target="_blank">ВК</a></li>

Объясните смысл среднего li?
Подумайте сами. Есть у Вас заголовок списка. Потом сам список. (Опять таки, по коду, без макета) Почему они оказались в один ul засунуты?

5. Вообще с clearfix явный перебор.
Ответ написан
Комментировать
LenovoId
@LenovoId
svg, css,js
в поле head : meta chrset надо указать , так же meta viewport , title , link css
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы