What is a structure for HTML building while you're creating a index file or skeleton of the website? For instance: 1st is a Header, then Navbar etc. And why we nest the divs? isn't it better to put divs separately?
Instead of this:
<div id="header">
<div id="menubar_container">
<div id="menubar">
<div id="welcome">
<h1>Industrial Grey</h1>
</div><!--close welcome-->
<div id="menu_items">
<ul id="menu">
<li class="current">Home</li>
<li>Our Work</li>
<li>Testimonials</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div><!--close menu-->
</div><!--close menubar-->
</div><!--close menubar_container-->
</div><!--close header-->
Just to put all divs separately:
<div id="header">
</div> <!--closing the header div -->
</div id="menubar">enter code here
</div> <!-- closing the menubar div -->
Truth be told I watched hundreds of tutorials, read hundreds of materials, but still don't get the point of nesting the tens of divs ..
Nesting DIVs can make styling the website easier.
Let's say that you want to add a margin to a specific part of your site (like in an article with multiple sections, but not the header or footer). By putting your article's main content in nested DIVs, the margin will be applied to the whole section easily.
(You won't need multiple pieces of CSS to achieve the effect.)
Also, nest DIVs helps you organise the DOM. This may make it easier for you to find a specific part of your code in the Developer tools. Your website will also be more accessible.
TLDR: Nesting DIVs are best practice.
Related
This is my website code in HTML 5 In this code we make some sections as u see header banner and nav As I dont understand why we write Header Banner And Nav separately while in same Code And whats the main reason behind making these sections? And I dont understand That Banner Code Why we Use Banner Code?
<!-- Header -->
<header id="header">
<div class="logo container">
<div>
<h1>Malik Waqar Azim</h1>
<br><br>
<p>Bachelors in Software Engineering</p>
</div>
</div>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home</li>
<li class="current">About Me</li>
<li>Contact Me</li>
</ul>
</nav>
<!-- Banner -->
<div id="banner-wrapper">
<section id="banner">
<h2>About Me</h2>
<p>I am currently pursuing bachelors in software engineering at UET Taxila.</p>
<p>I completed my intermediate and matriculation from Fauji Foundation College Lalazar</p>
</section>
</div>
Different sections in html5 language are like boxes for some content. HTML5 language make structure of document of your webpage. Every web browser has their own standard CSS style. If you didn't link custom style, it use this one to know how to show the html elements.
This banner is div - box in which there are informations about you. In this example you have id of div. The 'id' attribute is neccessery if you want to set some styles for this particular box.
Is the order of the heading, content and footer of a section matter ?
for Example,
is this logical ordering :
<article>
<h1>This is the heading</h1>
<content><p>This is the content ...</p></content>
<footer><p>this is the footer</p></footer>
</article>
same for computers comparing to the next illogical ordering :
<article>
<content><p>This is the content ...</p></content>
<footer><p>this is the footer</p></footer>
<h1>This is the heading</h1>
</article>
Semantic markup and accessibility are both important when writing HTML, you have to keep in mind what makes sense to both machines and end users.
Sure, you "could" put elements in any order and style them so they appear to be in a completely different order, but what happens when someone views your website with a screen reader or something similar.
In addition to this the order of your elements is very important when SEO is concerned, the automated search bots that crawl your website don't care what the page "looks" like and have a very structured way in which they identify key areas such as navigation, main content areas, headings and links.
Positioning isn't black and white either, you could have multiple footer elements on one page which would be perfectly fine as long as you have a way to express which footer related to the parent page which is done using an ARIA role.
<body>
<article>
Something
<footer>Something else</footer>
</article>
<footer role="contentinfo">
</footer>
</body>
This will identify the footer with the role as a "navigational landmark", as footers primarily store navigation.
The same goes for a nav element, you could use it for any type of sub-navigation within your website multiple times in whatever order you'd like in addition to using it for your primary navigation as long as you used role="navigation" on the primary nav.
http://www.w3.org/TR/wai-aria/roles
It's very easy to get carried away with using HTML5 elements but as long as you keep them structured semantically within their parent elements and give machines a way to identify key areas of your markup you will be A-OK.
<body>
<header role="banner">
<nav role="navigation">
<ul>
<li>Home</li>
</ul>
</nav>
</header>
<article role="main">
<header>
<h1>Article Heading</h1>
</header>
<aside>
<nav>
<ul>
<li>Article 1a</li>
<li>Article 1b</li>
<li>Article 1c</li>
</ul>
</nav>
</aside>
<p>Yip, dippidy doo.</p>
<section role="complementary">
<h2>Top Articles</h2>
<nav>
<ul>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
</ul>
</nav>
</section>
<footer>
<nav>
<ul>
<li>PrevArticle</li>
<li>Next Article</li>
</ul>
</nav>
</footer>
</article>
<footer role="contentinfo">
Copyright
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</footer>
</body>
In HTML, yes. Element order is significant. (That is not necessarily the case with other SGML/XML derived markup languages).
This is trivial enough to test by looking at the output in a web browser (the standard tool for presenting HTML to the reader) and noticing that the rendered document doesn't make sense.
What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element.
The W3C HTML5 spec provides a near-identical example:
Code Example:
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p>News -
Blog -
Forums</p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li>Index of all articles</li>
<li>Things sheeple need to wake up for today</li>
<li>Sheeple we have managed to wake</li>
</ul>
</nav>
</header>
...
</body>
If you're wondering about accessibility take a look here.
It is best to use a header inside the nav as it is describing the section.
Having the heading inside the <nav> container allows you to more easily style it, and manipulate the nav element as a whole. If you moved the <nav> for instance, you'd likely want the heading to go with it. It just saves work and makes thing simpler to have it inside.
You will be able to style it using:
nav h1 {
style: something funky;
}
Instead of styling all h1 elements or giving it an ID.
The first one is better because the heading should describe what to come, and is not a part of the nav. Just like h1 should not be inside p. It will probably work just fine either way though.
I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation.
Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this:
<div id="topWrap">
<div id="topNavWrap">
<nav id="utilityLinks">
<ul>
<li>Home</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav">
<ul>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
</ul>
</nav>
</div>
</div>
My question is:
In this situation is it acceptable to wrap both of these nav elements in a header element, do I just wrap my main nav and logo in a header element, or do I wrap both in one big header element?
When using Aria, should I use role="main" on my main navigation or my main header element?
Yes, it makes sense to use header for both of these.
As header has no influence on the document outline, it’s up to you use one or several header elements; it doesn’t affect the meaning. If there is no reason not to use one element (i.e., there is no content inbetween that should not be part of header), go with one element.
The ARIA role main is for the main content of a page. Navigation is typically not the main content, unless it’s the only content and purpose of a page. However, in that case you wouldn’t use the header element, as its job is to "exclude" content that is not considered to be part of the main content.
If they are using nav elements you shouldn't simply wrap them in headers. Although you can use multiple header elements in a page, they should represent the top of a 'section', a content area.
A more suitable HTML setup would be:
<header id="topWrap" role="banner">
<div id="topNavWrap">
<nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2">
<h2 class="at" id="utilityLinksH2">Site menu</h2>
<ul>
<li>Home</li>
...
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
...
</ul>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav" aria-describedby="mainNavH2">
<h2 class="at" id="mainNavH2">Service menu</h2>
<ul>
<li>Main Service Page</li>
...
</ul>
</nav>
</div>
</div>
</header>
Notable points are:
wrapping the whole lot in a header, with a role of banner. which should only be used once on a page to denote site furniture at the top of the page. (When used from the body the header applies to the, see the last example in the HTML5 spec.)
Labelling each nav with a hidden sub-heading (use .at to move it offscreen), with aria-describedby.
Main should wrap the main content of the page (that is unique to the page), generally starting just above a H1. There should be only one.
I'm building a website using HTML 5 markup, but have hit a problem regarding where to place the the NAV element - because I'm using a SPRY 'Tabbed Panel' for both the navigation and the content:
<header>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
I thought the best place to insert the NAV element would be by wrapping the UL element, but this breaks the SPRY Tabbed panel (maybe I can just fix this by changing some file paths in the CSS?).
Also, seeming as the main content of the site will be held in the 'Content' areas of the tabbed panel, I'm wondering what the best approach is for building this site, with regards to NAV and ARTICLE etc, so that is semantically correct?
Perhaps I am going about this the wrong way?
I'm not familiar with SPRY, but you are probably correct in that you will need to edit the CSS if you wish to have more semantic markup.
Assuming each "tab" is it's own article, here is how I would mark this up:
<div id="TabbedPanels1" class="TabbedPanels">
<nav>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
</nav>
<div class="TabbedPanelsContentGroup">
<article class="TabbedPanelsContent">Content 1</article>
<article class="TabbedPanelsContent">Content 2</article>
<article class="TabbedPanelsContent">Content 3</article>
</div>
</div>
It isn't a big change, but it adds at least some better semantics to the markup while still leaving the majority of the structure intact so that there don't need to be MASIVE changes to the SPRY framework code.