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>

看一下html5文档，我可能不得不将周围的div设置为secion，尽管在每个页面上都有大约三个这样的列表，文档告诉我要避免使用太多。另外，在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>  

​

编辑:哦，对不起，没看到你也用过它。所以你的代码看起来是正确的。