How should you complete the relevant markup?

DRAG DROP
You develop a website for a company by using HTML5.
You have the following requirements:
Allow multiple news postings per page under the title “Welcome to the Semantic Web!”.
Search engines must be able to index individual news postings.
News postings must be styled by using the following CSS markup:
.posting { line-height: 150%; )
You need to structure the markup for each individual news posting.
How should you complete the relevant markup? (To answer, drag the appropriate markup to the
correct location or locations in the answer area. Use only markup that applies.)

Answer:

Show Hint

← Previous question

Next question →

Leave a Reply 8

Al

I hate this question. The requirement is to allow multiple news postings UNDER THE TITLE “Welcome to the Semantic Web!”. Additionally, search engines must be able to index individual news postings. This requirement is key, as DIV elements are not indexed by search engines. However, the HTML5 ARTICLE element is. The confusion comes in the statement, “You need to structure the markup for each individual news posting.” If this entire block of markup corresponds to an individual news posting, then the first requirement to allow multiple news postings under the title is not going to be met. Therefore, I would assume the block immediately following the closing tag represents an individual news post. So additional blocks would be added for each post. Given this assumption, the markup would have to be as follows to satisfy all the requirements:

Welcome to the Semantec Web!

…

Reply

Al

That didn’t work…try this http://jsfiddle.net/Lvxtwnc8/

Reply

Al

<div class=”posting”>
    <header>
        Welcome to the Semantec Web!
    </header>
    <article id=”newsPosting1″>
        …
    </article>
    <article id=”newsPosting2″>
        …
    </article>
    <article id=”newsPostingN”>
        …
    </article>
</div>

Reply

Thanh Phan

so what is correct answer Al?

Reply

Eduardo Fernandes

I agree with you, but I think it’s all about interpretation… It should be clearer but I guess the answer markup is for each individual postings. First of all, it would be wrong that the first element is a div in a posting about semantic web, it should be a section (if it was an option). An then the header followed by the article tag. Also, the question says the news posting should be styled using the class posting. If you set this class in a wrapper like a div, the line-height would be applied to the whole structure, including the header, not only to the posting. Based on this, I think the answer is correct as I imagine the answer as being the markup for individual news posting.

Reply