On this page http://html5doctor.com/nav-element/, it mentions how to use the <nav> tag for semantic reasons.
In every example, it uses the <ul> tag, and mentions using it.
Is this required by the HTML 5 specification or is it just recommended by the author?
No, it doesn't.
HTML 5.1 Nightly 4.3.4 The nav element
A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
<nav>
<h1>Navigation</h1>
<p>
...
...
</p>
<p>
...
...
</p>
</nav>
HTML shortened for simplicity and brevity.
Related
Here is my code:
<html>
<head>
<style>
div p h1 {
background-color: red;
}
</style>
</head>
<body>
<div>
<p><h1>hello2</h1></p>
</div>
</body>
</html>
I think thats why:
The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.
This is basic HTML (or any other markup language). You should separate the paragraph, <p></p> from the heading, <h1></h1> element.
If you want to put a sub heading below your main heading, I suggest you do something like
<div>
<h1>Main heading</h1>
<h2>Smaller heading</h2>
<p>Some information or a quote</p>
</div>
It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section which is meant for gathering topically similar elements.
A lot more could be said, but I suggest you get ahead and read more about HTML and markup language. A good place to start is http://www.w3schools.com/html/html_basic.asp and http://www.w3schools.com/html/html_elements.asp …
If you specifically wonder what elements can be nested inside a paragraph check out the answer on this question: List of HTML5 elements that can be nested inside P element?
Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p. Once this has occurred, the selector no longer matches anything.
Use the W3C markup validator to ensure the validity of your document
<div>
<h1>hello2</h1>
<p>im the best</p>
</div>
Because your header is like the title of an article - you don't put the title in a paragraph. Using the <p> tags, you're just writing the content for the article, so you wont be able to style a header tag in a p tag as you will most likely be styling your header and content differently
If you are having issue with HTML Structure See the Lynda HTML5 course really worth Your Time It Clarifies how to structure your document. Along with reasons why. You will have a better understanding of What is Style and what is structure which most people struggle with I would include myself.
Also has links to the official web standards "World Wide Web Consortium", Yes I know it's a paid for service but it help me avoid or understand why HTML and CSS react the way it does when you move element in to invalid place.
Understand that h1-h6 Tag are not meant for styling as I previously thought from my earlier days in HTML. Yes we used them because it seemed to make since or easyer to target with CSS. But the h1-h6 are more to structure of importance off the section or content on the page. I would use a div if it's or a span or Bold tag.
Great resource is developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
Here is a good example: Of structure from the link above!
<body>
<!-- Main header used across all the pages website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<!-----------***** As you can see the h1-h6 is for structure not style****** -->
<h2>Article heading Rank2</h2>
<p>This is Paragraph</p>
<h3>subsection Rank3</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
<h4>Another subsection Ranked</h4>
<p>This is Paragraph </p>
<h3>Another subsection Ranked</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
</article>
<aside>
<h2>Related</h2>
<ul>
<li>beside the seaside</li>
<li>beside the sea</li>
</ul>
</aside>
</main>
<!-- main footer that is used across all the pages of site -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
But really Check out the Lynda HTML 5 Essentials Tutorials!
When a document it's structured correctly it's readable and more applications and devices. Like Readers.
<header>
<nav>
<ul>
<li> Home
</li>
<li> Articles
</li>
<li> Contact
</li>
</ul>
</nav>
</header>
And CSS no "."
header {}
nav {}
As I can see, there is <header></header> and <nav></nav>
Lets say if my website has 2 nav section how to implement two different CSS?
In advance, thanks.
Give each nav a specific class or id
like
<nav id="first_nav"></nav>
CSS
#first_nav{
}
They are html5 elements.
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:
It is a new version of the language HTML, with new elements, attributes, and behaviors,
and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.
see more info here
As if you have more than one element such like as nav then you could use its parent and the nav itself to get the selector more specific:
header nav{}
footer nav{}
I was wondering if putting <div> inside <nav> is considered bad practice, since most of the time I see <nav> used in connection with <ul> and <li> elements.
For example:
<nav id="content" class="box_navi">
<div><img src="img/projekte250.png" alt="Projekte" title="Projekte"/></div>
...
<div><img src="img/shop250.png" alt="Shop" title="Shop"/></div>
</nav>
I understand that <ul> is used to maintain readability of the navigation if css would be disabled (or when printed).
In my case I use images as navigation, so I don't see an advantage in using <li> over <div> also I did not encounter any problems with the way it is now.
Am I missing an important point?
There is great emphasis on correct semantics in HTML.
You are using <nav> because all the elements with in it are for navigation.
There nothing fundamentally wrong with using <div> elements however you should always think about the purpose of each element you using so if you make a (ordered) list of something use <ol> if you use unordered list <ul> and so on.
A lot of website use <ul> because navigation is literally a list of links which makes it correct.
You menu is a list of images so you can use <ul> there too but I don't think you'll have any rendering problems using <div> elements
Can we use multiple tags on the same page in html5?
I've read this article on Zeldman.com but it's not entirely clear to me
i.e.
<header><nav>links here</nav></header>
<footer><nav>links here</nav></footer>
Yes, absolutely. You can have multiple header, nav, and footer tags sans penalty.
As long as you're making sure you are using tags semantically and you aren't putting them in invalid places (they're block-level elements, so you can't put them inside an inline element, for example) then you shouldn't worry too much about what the sticklers are saying. It's all to easy to get caught up arguing about tiny details instead of moving forward on your project.
Yes, having multiple <nav> elements is absolutely ok.
You just have to make sure you're making them distinguishable for people using screen readers. You can do it by labelling each <nav> using aria-label.
<nav aria-label=’primary’>
<ul>
...List on links here...
</ul>
</nav>
<nav aria-label=’secondary’>
<ul>
...List on links here...
</ul>
</nav>
Or, if one of the <nav> as visible text on screen that can be identified as labelling element, you can use aria-labelledby like follows:
<nav aria-label="Site Menu">
<ul>
...List on links here...
</ul>
</nav>
<article>
<h1>Title</h1>
...
<nav aria-labelledby="id-1">
<h2 id="id-1">
Related Content
</h2>
<ul>
...List on links here...
</ul>
</nav>
</article>
You can read more about using Multiple Navigation Landmarks.
The answer is yes. You can have a <nav> tag in the footer, for more info check mdn <nav> documentation.
I'm using the new HTML5 tags and and I was wondering which of the following two options is preferable:
OPTION 1
<article class="menu">
<section>
<header>
<h4>Breakfast</h4>
</header>
<ul>
<li>
<article class="menu-item">Cereal</article>
</li>
<li>
<article class="menu-item">Bacon & Eggs</article>
</li>
<li>
<article class="menu-item">Waffles</article>
</li>
</ul>
</section>
<section>
<header>
<h4>Lunch</h4>
</header>
<ul>
<li>
<article class="menu-item">Peanut Butter & Jelly</article>
</li>
<li>
<article class="menu-item">Ham Sammich</article>
</li>
<li>
<article class="menu-item">Soup</article>
</li>
</ul>
</section>
</article>
OPTION 2
<article class="menu">
<section>
<header>
<h4>Breakfast</h4>
</header>
<article class="menu-item">Cereal</article>
<article class="menu-item">Bacon & Eggs</article>
<article class="menu-item">Waffles</article>
</section>
<section>
<header>
<h4>Lunch</h4>
</header>
<article class="menu-item">Peanut Butter & Jelly</article>
<article class="menu-item">Ham Sammich</article>
<article class="menu-item">Soup</article>
</section>
</article>
I'm currently using the first option with the tags due to habits leftover from HTML 4.01, however it seems to me that they are completely redundant and unnecessary in HTML5. Which is more correct?
For example, in this article here they don't use tags:
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
Should? Not necessarily. Can? Yes.
I have a situation in which I am doing something similar to your first example with <figure>. In this case the containing element is <nav>. The figures are a list of items with a photo and title. It is a list of navigation items which are also figures. Thus nav > ... > li > figure.
A figure isn't an article, of course. But it is permitted by the spec with both <figure> and <article>. Permitted contents of <li> are "flow content", which includes,
section or nav or article or aside or header or footer or figure
Among others. The whole list is long. So it depends on what feels right to you in your specific situation.
Are these article summaries that are serving as navigation to the full text of articles ordered by date? I might do something similar to what I did above with figure if I wanted the <li> for an additional container or because I liked it that way.
Is it the full text of articles, and not something you'd think of as a list of articles? Omit the list.
HTML no matter what version is just a semantic markup for a collection of data. If using a list to split apart the articles makes sense semantically, then that is the correct way. If it does not, then it is incorrect. If you are just worried about minimalistic bytes to send across the wire, then you could do without the list in any version of html and replace it with paragraph tags.
Typically semantic markup has a little more to do with how you are presenting the data, than just the data alone. For instance, if you want to use something like EasySlider, then you have to put the items in a list because that is the convention it uses. The same data presented in a different way could require an entirely different markup.