html5新闻'feed'html结构

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做成一个部分，虽然在每个页面上有大约三个这些列表，文档告诉我避免使用它“太多”。在li中使用页眉/页脚对我来说似乎很奇怪，但同时也是合乎逻辑的。

我觉得我不知道我在做什么，它是这样工作的，但它也是正确的吗？

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>  

编辑：  哦抱歉没看到你也用过它。所以你的代码看起来是正确的。