I'm trying to make a semantic HTML5 code and not sure if it will be right.
Visualy I have an article/post divided in 3 cols:
IMAGE (200px) | H1+ Summary + More Link (350px) | Additional Section with 2 headers H2 (150px)
In CSS I'll float:left - figure, .post-summary, .post-aside.
Here is Ver.1:
<article>
<figure>
<img src="images/temp/entry_01.jpg" alt="">
<figcaption>Title for Case Study</figcaption>
</figure>
<div class="post-summary">
<section>
<h1>MAIN Article Title</h1>
<p>Lorem ipsum...</p>
read more
</section>
</div>
<div class="post-aside">
<section>
<h2>The Charges:</h2>
<p>Lorem ipsum...</p>
</section>
<section>
<h2>The Verdict:</h2>
<p>Lorem ipsum...</p>
</section>
</div>
</article>
Ver. 2
<article>
<figure>
<img src="images/temp/entry_01.jpg" alt="">
<figcaption>Title for Case Study</figcaption>
</figure>
<section class="post-summary">
<h1>MAIN Article Title</h1>
<p>Lorem ipsum...</p>
read more
</section>
<section class="post-aside">
<h2>The Charges:</h2>
<p>Lorem ipsum text ...</p>
<h2>The Verdict:</h2>
<p>Lorem ipsum text...</p>
</section>
</article>
Which one is right?
Depends on what you want..
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.
http://boblet.tumblr.com/post/130610820/html5-structure1
Link to article
I would use it this way (your v2):
<div> <!-- Main article div -->
<article> <!-- First article -->
<section><!-- Header, about the author... --></section>
<section><!-- related info .. --></section>
<section><!-- conclusion --></section>
</article>
<article>
<section></section>
<section></section>
<section></section>
</article>
</div>
That's not right... both of them, and the answer too... DON'T USE DIV ! USE SECTION INSTEAD !
Related
Say you want to create a page with 3 pieces of text, 3 photos, 1 (unordered) list...
<!DOCTYPE html>
<html>
<body>
<div>
<article>
<p>lorem ipsum...</p>
</article>
<img src="">
</div>
<div>
<article>
<p>lorem ipsum...</p>
</article>
<ul>
<li>...</li>
<li>...</li>
</ul>
<img src="">
</div>
<div>
<article>
<p>lorem ipsum...</p>
</article>
<img src="">
</div>
</body>
</html>
Would the above make sense? i.e. is it too much to use <article>, <div>, and <p> tags together? When would it make sense, and when can I just go with <p> only - is it a matter of being able to easier style with CSS if you have more tags, or also about the structure/readability of my code?
As you may have guessed, I'm very new to creating sites and don't have good intuition with this stuff yet. Any tips would be greatly appreciated! Cheers!
I have a problem with navigation in html5. I watched a lot of tutorials and I don't know what I'm doing wrong. I want to navigate on the same page.
<header>
<nav>
TOP
MIDDLE
BOTTOM
</nav>
</header>
<main>
<article>
<section><h1><a name=”top”></a>TOP</h1>
<figure>
<img src="1.jpg">
</figure>
<p>...</p>
</section>
Oh dear... You're using wrong quotes!
Replace <a name=”top”> with <a id="top"> and it should work.
1st error: using obsolete attribute, name instead of id.
2nd error: using wrong quotes, ” instead of ".
prefer id over name for anchors.
<header>
<nav>
TOP
MIDDLE
BOTTOM
</nav>
</header>
<main>
<article>
<section><h2 id="top">TOP</h2>
<figure>
<img src="https://placem.at/people?h=700">
</figure>
<p>...</p>
</section>
<section><h2 id="middle">MIDDLE</h2>
<figure>
<img src="https://placem.at/people?h=500">
</figure>
<p>...</p>
</section>
<section><h2 id="bottom">BOTTOM</h2>
<figure>
<img src="https://placem.at/people?h=400">
</figure>
<p>...</p>
</section>
</article>
</main>
This will allow navigation on same page to go to the top, middle, and bottom.
<header>
<nav>
TOP
MIDDLE
BOTTOM
</nav>
</header>
<main>
<article>
<section><a name="top">TOP</a>
<figure> <img src="https://placem.at/people?h=700"> </figure>
<p>...</p>
</section>
<section><a name="middle">MIDDLE</a>
<figure><img src="https://placem.at/people?h=500"></figure>
<p>...</p>
</section>
<section> <a name="bottom">BOTTOM</a>
<figure><img src="https://placem.at/people?h=400"></figure>
<p>...</p>
</section>
</article>
</main>
Please help me with used HTML5 tag main. Is this example used semantically correct?
<main role="main">
<article role="article">
<h1>Heading 1</h1>
<p>Text text text</p>
</article>
<aside role="complementary">
<div class="box"></div>
<div class="box"></div>
</aside>
</main>
Ok thanks, and this examle is correctly?
<div class="main">
<article role="article">
<h1>Heading 1</h1>
<p>Text text text</p>
</article>
<aside role="complementary">
<div class="box"></div>
<div class="box"></div>
</aside>
</div>
The <main> tag specifies the main content of a document.
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
source http://www.w3schools.com/tags/tag_main.asp
In Your example main tag contain aside, its not correct.
I am not a front-end developer, but for an HTML5 course I am taking I am trying to understand some HTML5 and styling.
I have the following code: these are the beginning of articles which will be side-by-side with image and text, my question is, how do I get them lined up side by side?
<div>
<section>
<article>
<header><h1>article 1</h1></header>
<p>Some Text</p>
</article>
</section>
<section>
<article>
<header><h1>article 2</h1></header>
<p>Some Text</p>
</article>
</section>
<section>
<article>
<header><h1>article 3</h1></header>
<p>Some Text</p>
</article>
</section>
</div>
Also, how do I get the <p> under the heading, right now it is off to the left side of the header?
First off, you shouldn't use a <section> for each <article>, instead, you probably want a the <section> to replace your <div> and have all articles nested inside of it as siblings, like so:
<section>
<article>
<header><h1>article 1</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 2</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 3</h1></header>
<p>Some Text</p>
</article>
</section>
As for putting them side by side, the best option would be using flexbox (see browser support)
Here's what I came up with:
<style type="text/css">
section {
display: flex;
}
section article {
flex: 1 100%;
}
</style>
<section>
<article>
<header><h1>article 1</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 2</h1></header>
<p>Some Text</p>
</article>
<article>
<header><h1>article 3</h1></header>
<p>Some Text</p>
</article>
</section>
With flex: 1 100%; you make sure the 3 take all of the horizontal space of their container.
Read more: CSS-Tricks: A complete guide to flexbox
I'm trying to understand the HTML5 elements. I have basic html layout below which I want to migrate to html5 layout. Please have a look at it, and let me know if i'm using it correctly. I'm not sure if I'm using <section> and <article> correctly.
HTML:
<div id = "wrapper" >
<div id = "left" >
<div class = "left-box"> ... </div>
<div class = "left-box"> ... </div>
</div>
<div id = "center" >
<div class = "center-box"> ... </div>
<div class = "center-box"> ... </div>
</div>
<div id = "right">
<div class = "right-box"> ... </div>
<div class = "right-box"> ... </div>
</div>
</div>
HTML5:
<aside id="left">
<article class="left-box"> ... </article>
<article class="left-box"> ... </article>
</aside>
<section id="center">
<article class="center-box"> ... </article>
<article class="center-box"> ... </article>
</section>
<aside id="right">
<article class="right-box"> ... </article>
<article class="right-box"> ... </article>
</aside>
PS. As I'm using a div <wrapper> to wrap everything, how i use that in html5? Thanks
HTML5:
<section id="wrapper">
<aside id="left">
<article class="left-box"> ... </article>
<article class="left-box"> ... </article>
</aside>
<section id="center">
<article class="center-box"> ... </article>
<article class="center-box"> ... </article>
</section>
<aside id="right">
<article class="right-box"> ... </article>
<article class="right-box"> ... </article>
</aside>
</section>
This is okay. Remember that html5 elements are just semantic, this means they have to tell their meaning. You have a section with in that section something aside on the left and on the right with between a section with f.e. id content. It's really not that much of a difference.
Instead of setting a wrapper you can also apply these styles directly to "body", but I would not recommend this for the time being (older browsers might give some problems). Also keep in mind that older browsers will probably not recognize these section-tags.
Article is used for... well... articles. So I don't know what you are trying to add in these center-box'es, but use section if they are not articles. It's all in the name... f.e. when you have address data you use the address-tag.
It's difficult to say whether it's semantically correct or not as we have no idea what the content of the aside, section and article elements are. These (and other) elements are to be used semantically, so the content is key.