I am creating a small site for my department. My first page is called the "Home" page and it is located inside a file called index.html. In my body tag I have a header tag where I welcome the users to the site and a paragraph tag saying what this particuylar site is for. This is the HTML code I have from the title tage to the last nav menu I have:
<title>Welcome | Finance Department</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Finance and Accounting Portal</span></h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</li>
<li><a href="accountspayable.html">Accounts Payable</li>
<li><a href="purchasing.html">Purchasing</li>
<li><a href="payroll.html">Payroll</li>
<li><a href="documents.html">Documents</li>
<li><a href="faqs.html">FAQs</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Welcome to the Finance Department Homepage</h1>
<p>This is an inter-organizational site where employees can find popular documents pertaining to financials.</p>
</div>
<img src="./img/hello.jpg">
</section>
<nav>
<ul>
<li class="current"><a href="index.html">Home</li>
<li><a href="accountspayable.html">Accounts Payable</li>
<li><a href="purchasing.html">Purchasing</li>
<li><a href="payroll.html">Payroll</li>
<li><a href="documents.html">Documents</li>
<li><a href="faqs.html">FAQs</li>
</ul>
</nav>
With this as it is now, the welcome to.. header and the This is an inter-organizational... paragraph tags are clickable and when I click them, it takes me to the FAQ page. I just want the header and the paragraph to be plain text, not clickable links.
When I inspect the header and paragraph tags that are causing issues in my browser, I have an additional <a href="faqs.html"> before my section id="showcase">. When I delete that additional tag, the header & paragraph tags are no longer clickable. But, my html does not have that additional <a href... tag so I'm confused as to where it came from. Does anyone know if how I can correct this for good?
You have not closed Hyperlinks tag in you code.
<li class="current">Home</li>
<li>Accounts Payable</li>
<li>Purchasing</li>
<li>Payroll</li>
<li>Documents</li>
<li>FAQs</li>
Check your code properly.
Related
So I'm hosting a website from github, and I want to add a blog section to it, therefore, I chose Jekyll.
And the problem is on my main page I add a Blog section to link it to the Jekyll autogenerated html site, and it doesnt show any of the css, just only shows pure html
How does I fix this problem?? Thanks
Picture
<header>
<div class="container">
<nav>
<ul>
<li> Home</li>
<li> About me</li>
<li> Resume </li>
<li> Projects </li>
<li> Hobbies</li>
<li> Blog</li>
</ul>
</nav>
</div>
I am creating a navigation bar on my pages and im having trouble moving from one html doc to another. Its weird to word so i drew a picture ( pic )
Both html documents are within the same folder and i have cleared the cache just in case. The problem is i can move from 'mainpage' to 'about' page but not in reverse. Any tips or comments?
Folder of files
Main page
<div class="icon-menu">
<i class="fa fa-bars"></i> Menu
</div>
<div class="menu">
<div class="icon-close">
<img src="images/close_icon.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</div>
About page
<div class="menu">
<div class="icon-close">
<img src="images/close_icon.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Map</li>
<li>Help</li>
</ul>
</nav>
</div>
It should work fine. Possible errors are that filename of mainpage may have an error or if you are using any framework, it may produce some error.
This code is working fine in plain html without any css or js. So provide more information in case.
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.
It seems that jsfiddle does not let me use multiple html pages so i cannot post both pages. The issue is when i click a link my nav, i notice the logo move a little to the right instead of staying in the same place. the second html page has the exact same html code and css so i don't know why the logo would move once i click a link.
<header>
<div class="header">
<h1 class="logo">New York</h1>
<nav class="main-navigation">
<ul>
<li class="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
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.