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.
Related
I am currently working on a website, where the site will have a hero slider at the top of the page, under the navigation. Currently, I have written the code like this:
<header>
<h1 class="site-title">Site Title</h1>
<nav id="primary">
<ul class="top-level">
<li class="link">Link</li>
<li class="link">Link</li>
<li class="link">Link</li>
<li class="link">Link</li>
<li class="link">Link</li>
</ul>
</nav>
</header>
<section id="hero-banner">
<!-- Banner Content -->
</section>
But I am wondering if it would be appropriate to also include the hero slider inside of the <header> tag? In that case, the code would turn into this:
<header>
<h1 class="site-title">Site Title</h1>
<nav id="primary">
<ul class="top-level">
<li class="link">Link</li>
<li class="link">Link</li>
<li class="link">Link</li>
<li class="link">Link</li>
<li class="link">Link</li>
</ul>
</nav>
<section id="hero-banner">
<!-- Banner Content -->
</section>
</header>
Visually, I would consider the hero banner to be grouped with the rest of the <header>, but I'm not sure if reflecting this in the code would be considered semantically correct.
From w3schools:
The element represents a container for introductory content or a set of navigational links.
A element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
In the end, it's entirely up to you, it's not "bad practice" or "good practice" one way or the other.
It is better to put it outside the <header> tag. As it is not considered as an element of the menu nor the navigation bar. So you are good to go with the first code.
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.
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 simply want to navigate from one page to a specific point on another.
I have a home page with four sections:
<section>
<a name="section1"></a>
</section>
<section id="section2">
</section>
<section>
<a name="section3"></a>
</section>
<section id="section4">
</section>
Section 2 and 4 feature on every page, so my nav looks like:
<nav>
<ul>
<li>ABOUT</li>
<li>APARTMENTS</li>
<li>LANDLORDS</li>
<li>CONTACT</li>
</ul>
</nav>
The links aren't navigating to the index page or the desired section of the index page.
Now I have:
<section>
<a name="section1"></a>
</section>
<section id="section2">
</section>
<section>
<a name="section3"></a>
</section>
<section id="section4">
</section>
And my navigation:
<nav>
<ul>
<li>ABOUT</li>
<li>APARTMENTS</li>
<li>LANDLORDS</li>
<li>CONTACT</li>
</ul>
</nav>
It is still not working.
Are you sure that you have placed the files in the same directory? I've tested the code that you have provided and it's working. However, you could try this out (a different way of giving sections an id):
<section>
<a id="section1">
CONTENT
</a>
</section>
If you have done this, just use the same way of linking:
Section One
Check your JavaScript code for the line that says "event.preventDefault();".
I found this in a W3Schools Bootstrap template that included this command as part of a <nav> block that makes a nice scroll to the hashtag. Once I commented it out, the links worked fine.
I think you are facing this issue with a legacy browser (Internet Explorer 8 and below). Because I have tested it in Firefox, Chrome, and Internet Explorer 9. It's working fine. But it failed in legacy browsers.
For that, you have to use the anchor tag (a) instead of div id.
Example:
<a name="section1"></a>
<section>section content goes here </section>
<a name="section2"></a>
<section>section content goes here </section>
<a name="section3"></a>
<section>section content goes here </section>
<a name="section4"></a>
<section>section content goes here </section>
Now you can use any class name you want for your section elements...
You need an a-name tag, please see
http://www.w3schools.com/tags/att_a_name.asp
I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.