CODEWITHSUNDEEP
html
Gideon
Gideon

Reputation: 2014

html5 news 'feed' html structure

For the first time in six months I'm creating a new website instead of maintaining a crappy old website. Because I'm a fan of doing things correctly I am doing research on how the set this thing up.

Because this website needs to be responsive and modular I am looking into good structures for certain elements. I made a mockup of what I want to use in paint. Don't look at the coloring, its just to show what I want to achieve, hehe.

enter image description here

And this is the code I was thinking of using:

<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>

Looking at the html 5 documentation, I maybe have to make the surrounding div a secion, though on each page there are around three lists of these present and the documentation told me to avoid using it 'too much'. Also the use of header/footer in a li seems odd to me, but logical at the same time.

I feel I have no idea what I'm doing, it is working like this, but is it also correct?

Upvotes: 1

Views: 3217

Answers (2)

Euan T
Euan T

Reputation: 2141

Looks pretty much right to me, though the news item titles should possibly be heading tags? Also, I assume the news stories are sorted in date/time order descending? If so, an ol would make more sense as it is an ordered list.

Upvotes: 1

Tan
Tan

Reputation: 2178

I dont think there is any right or wrongs. Its more how u want it. I would do something like this.

article is a html5 element if you really want to only use 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: Oh sorry didnt see that u used it too. So your code looks correct .

Upvotes: 1

Related Questions