Should I use
or
?

Question

I'm new to web layout so forgive me if my question seems amateurish. I am trying to layout a landing page consisting of text boxes which will contain links to other pages on the site. The rough design is here:

http://silvercoastlife.com/wptest/landing-page-tester/

So far I have been using div to define the elements on the page but now I have come across article and wonder if I should be using this instead, especially as for SEO purposes I would like each box to have individual h1 headlines.

Thank you in advance for any advice you can offer.

dupe : http://stackoverflow.com/questions/8734350/html5-structure-article-section-and-div-usage — Gogol, Jan 06 '16 at 09:27

score 8 · Answer 1 · answered Jan 06 '16 at 09:33

Article would generally be wrapped in a <div> in HTML4, and the subsections would only be suggested by <h1>-<h6> elements. In HTML5 the article should be wrapped in <article>, and the subsections of the <article> should be explicitly indicated by wrapping them in <section> elements, perhaps in ordered list items if you’d like section numbering.

<article>
    <h1>Title</h1>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
</article>

For more you can use this reference.

score 8 · Accepted Answer · edited Jan 13 '16 at 21:01

HTML5 is made for exactly the thing you want my friend, the new HTML5 elements certainly serve a SEO purpose in that they can define a lot of portions of your website.

Here is a list of HTML5 tags

HTML5 tags can be used in a very flexible way as long as they serve the correct purpose.

For instance the <header> tag.

It could be used as a header for your website but could also be used as a header for an article. It's multi-purpose but still defines what it is.

I'm pretty sure that if you have a <header> tag within an <article> tag a smart search engine will know the difference between the information in the one within the <article> and a website <header> for instance.

Also - there's tags for every basic definition in a website (as seen in the list above)

Some of the more useful ones I'll list here

These are just some examples and they all serve a semantically different purpose like the <main> tag which is supposed to represent the main content of website or as MDN puts it:

The HTML <main> element represents the main content of the <body> of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).

Each link above in the list goes to the MDN page for the specified HTML element, you can read up on the semantics per element if you want to know exactly how they should be used.

Furthermore the <div> tag is just a convenient tag to use when things start to get vague or you just need a container that only serves positioning purposes etcetera, it's not wrong or bad to use a <div> tag anywhere either - It's just better to use tags that fit the actual content of your site for SEO purposes.

A small side-note would also be that using these new HTML5 tags could cause incompatibility with older browsers but so far everyone's caught up pretty well. so In general that shouldn't be a problem unless you need to support older browsers.

score 1 · Answer 3 · edited Jan 13 '16 at 20:48

Maybe the relevant element you are looking for is actually the <section> element as you are defining different sections related to the same page instead of separate articles on different topics.

The below is taken from the following article: http://oli.jp/2009/html5-structure1/

<div> — the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning.

<section> — a generic document or application section. A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.

<article> — an independent part of a document or site. This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer.

score 0 · Answer 4 · answered Jan 06 '16 at 09:38

You should just take into consideration that article will not be recognized in IE8. As to SEO, HTML5 tags are easier to understand by a machine. Not just the word but the intent and if used properly, like in the Suvro's example and reference, it can actually help.

Should I use or ?

4 Answers4

Should I use
or
?