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>
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!
My HTML is structured like this: The problem is that the image and each article are displayed in different lines. I tried to float them and to make them display inline, but it did not help
<img src="img/sjlk.jpg" /> <!-- Logo -->
<article>
<h2>askdfbkansdkn </h2>
<p>asdhfaksdhfk</p>
</article>
<article>
<p>selnlnl sf</p>
<p>shdfl</p>
<p>aehfonlknslfn</p>
</article>
I want the image float right to the article without changing the HTML Structure
Thank you!
You need to wrap the <article> DIVs.
<img src="img/sjlk.jpg" /> <!-- Logo -->
<div class="wrap">
<article>
<h2>askdfbkansdkn </h2>
<p>asdhfaksdhfk</p>
</article>
<article>
<p>selnlnl sf</p>
<p>shdfl</p>
<p>aehfonlknslfn</p>
</article>
</div>
CSS:
img, div.wrap {
float: left;
}
i'm still very confused about the use of "section" in html 5. I'd just like to which of the below solutions is the better one. The contents inside the list are not related to each other. So do I have to give a section to each of them or do I have to put it all in one section. See below:
Solution one:
<ul>
<li>
<section>
<header>
<h2>Services</h2>
</header>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</section>
</li>
<li>
<section>
<header>
<h2>Products</h2>
</header>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</section>
</li>
<li>
<section>
<header>
<h2>Contacts</h2>
</header>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</section>
</li>
</ul>
Solution two:
<section>
<ul>
<li>
<header>
<h2>Services</h2>
</header>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</li>
<li>
<header>
<h2>Products</h2>
</header>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</li>
<li>
<header>
<h2>Contacts</h2>
</header>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</li>
</ul>
</section>
I'm not sure why you need the list (<ul>) in the first place here. I'd remove it since it makes sense to use it for actual lists only ( or list-like elements, i.e. menus ) which is not the case here.
Now about the <section>. According to specs:
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Which eliminates your solution #2.
More:
Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.
So In your case I's do this:
<article>
<header>
<h2>Services</h2>
</header>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</article>
<article>
<header>
<h2>Products</h2>
</header>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</article>
<article>
<header>
<h2>Contacts</h2>
</header>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p>This is text</p>
</article>
And if you need a wrapper for styling purposes - you can use the good ol' <div>
The <section> element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead.
The section element
An article on topic
<section> and <div> are similar in that they are both used for sectioning. The difference is that if the intended section is for the purpose of styling, <div> should be used... but if the section is literally for content then use <section>. Have a look at the following quote:
“When an element is needed only for styling purposes or as a
convenience for scripting, authors are encouraged to use the div
element instead…A general rule is that the section element is
appropriate only if the element’s contents would be listed explicitly…
~ WHATWG”
Please note that the general idea of <section> is to list content like <li>. However, the latter is more appropriate for bullet pointing... whereas, the former is more appropriate for things like blog posts, etc.
So, I don't really recommend either of your solutions. You should use something similar to the following:
<div class="blog">
<article class="post">
<h2 class="post-title">Services</h2>
<img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
<p class="post-excerpt">This is text</p>
</article>
<article class="post">
<h2 class="post-title">Products</h2>
<img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
<p class="post-excerpt">This is text</p>
</article>
<article class="post">
<h2 class="post-title">Contacts</h2>
<img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
<p class="post-excerpt">This is text</p>
</article>
</div>
I hope that helps. All the best.
[ref: https://azizecomm.wordpress.com/2016/01/04/html5-section-vs-div/]
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 !
If I do this it fails validation
<header>
<hgroup>
<a href="#">
<h1>Title</h1>
<h2>Tagline</h2>
</a>
</hgroup>
</header>
But if I do this, then Firefox chokes on it
<header>
<a href="#">
<hgroup>
<h1>Title</h1>
<h2>Tagline</h2>
</hgroup>
</a>
</header>
What is the correct way to have the whole header as a link?
The latter is correct and seems to work fine in Firefox 4 (Firebug shows correct DOM).