html5 news 'feed' html structure

Question

Впервые за шесть месяцев я создаю новый сайт вместо того, чтобы поддерживать дрянной старый веб-сайт. Поскольку я являюсь поклонником правильного ведения дел, я занимаюсь исследованием того, как это задано.

Поскольку этот веб-сайт должен быть отзывчивым и модульным, я изучаю хорошие структуры для определенных элементов. Я сделал макет того, что я хочу использовать в краске. Не смотрите на раскраску, просто чтобы показать, чего я хочу достичь, хе-хе.

И это код, который я думал об использовании:

<div class=""> 
    <header class="new-icon"> 
     News feed title 
    </header> 
    <ul> 
     <li> 
      <article> 
       <header>News item title</header> 
       <p>Lorem ipsum</p> 
       <p>Lorem ipsum</p> 
       <p>Lorem ipsum</p> 
       <footer> 
        <a href="#">Read more</a> 
        <span>category</span> 
       </footer> 
      </article> 
     </li> 
    </ul> 
    <footer> 
     <a href="#"> 
      Read more 
     </a> 
    </footer> 
</div> 

Глядя на документации HTML 5, я, возможно, придется сделать окружающему Div в secion, хотя на каждой странице находятся около трех списков этих присутствующих, и в документации мне было сказано, чтобы я не использовал ее слишком много. Также использование верхнего/нижнего колонтитула в ли мне кажется странным для меня, но логичным в то же время.

Я чувствую, что понятия не имею, что я делаю, он работает так, но верно ли это?

Answer 1

Выглядит почти правильно, хотя заголовки новостей, возможно, будут заголовками тегов? Кроме того, я полагаю, что новостные сюжеты отсортированы по дате/времени по убыванию? Если так, то ol будет иметь больше смысла, поскольку это упорядоченный список.

Answer 2

Я не думаю, что есть какие-либо права или обиды. Его больше, как вы этого хотите. Я бы сделал что-то вроде этого.

статья является элементом html5, если вы действительно хотите использовать только html5.

<article class="post"> 
<header> 
<h1>This is Blog Post Title</h1> 
<div class="post-meta"> 
    <ul> 
     <li class="author">Author Name</li> 
     <li class="categories">Save in Categories</li> 
    </ul> 
</div> 
</header> 

<div class="post-content"> 
    BLABLABLA 
</div> 

EDIT: Ой извините не увидел, что и использовал его тоже. Таким образом, ваш код выглядит правильно.