: Markup for an HTML5 article So I have the following HTML for an article (in this case a piece of portfolio work) <article class="work"> <div class="col-row clearfix">
So I have the following HTML for an article (in this case a piece of portfolio work)
<article class="work">
<div class="col-row clearfix">
<div class="col-large">
<header>
<h1>OS X Yosemite</h1>
<p class="work-meta">The World's Most Advanced Operating System</p>
</header>
</div>
</div>
<div class="col-row container clearfix">
<div class="col-small">
<aside>
<dl>
<dt>Client</dt>
<dd>Apple, Inc</dd>
<dt>Role</dt>
<dd>Lead designer and front-end developer / co-back-end developer</dd>
<dt>Dates</dt>
<dd>2011 to present</dd>
<dt>Type</dt>
<dd>Web Application</dd>
</dl>
</aside>
</div>
<div class="col-large">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<img src="http://lorempixel.com/1024/1024">
</figure>
</section>
</div>
</div>
</article>
As you can see I make use of the HTML tags article, header, section, and aside but they are contained within various div tags to lay the article design out on the page.
The question is basically, how does breaking up the article like so affect how the HTML5 tags are seen by browsers, search engines, etc. Should I be putting the div rows inside the HTML5 tags instead and trying to move the classes onto them instead of using the divs... I've opted for the above approach because I wanted to use divs for layout, and the HTML5 tags for purely marking up what the semantic meaning of areas were.
More posts by @Phylliss660
2 Comments
Sorted by latest first Latest Oldest Best
In my opinion, in order to properly use the article tag, you better have A header, at the very beginning/start of your article, A main (which you a lacking) within the article with the bulk of your contain which may contain (At Least One section (lacking again)), A Figure (lacking) with an aside (nicely included), And A Summary tag with Details within it (near the end). And Then, after your 'article' is done, at the very end, you should include a Footer With the Author's Info. div means nothing semantically but the rest of the tags I described all have semantic value and description. I recommend a lot less div's probably (but not necessarily) and to focus on the main parts of the article first: which would be the text & the argument, plus the supporting research, documentation, links, and media (pictures and movies)... You'll get it soon! Strive my brother, Strive.
div elements mean nothing.
Consumers interested in the meaning of your content simply ignore them (that is, after extracting possible attribute values, like those used by RDFa, Microdata or Microformats). For these consumers, it wouldn’t matter if a div is a parent or a child of another element (so do whatever you like more).
However, if it’s possible for you to omit the div elements and place the class values on your meaningful elements, you should do it. Why have additional elements if they are not needed?
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2025 All Rights reserved.