Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm quite new to html/css/js so apologise in advance if this is a newbie question.
Every time I see a navigation bar people tend to use ul/li. However I think you can achieve the exact same result just by using and formatting the 'a' tags thus reducing the html code, like the example below:
html:
<body>
<header>
<nav class="top-nav">
About me
Education
Work
Interests & Hobbies
Contact
</nav>
</header>
</body>
css:
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Header section.*/
header {
text-align: center;
color: white;
}
/* Navigation */
.top-nav {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: black;
padding: 20px 0;
width: 100%;
}
.top-nav a {
text-decoration: underline;
color: white;
}
.top-nav a:hover {
font-style: italic;
}
Is there anything wrong with doing this in terms of semantics, etc? If so, why and what are the advantages of using the ul/li tags?
Here's the fiddle for this.
Thank you!
I understand that your question is about semantics.
There is no explicit precision about the form of the content of the navigation element <nav> (whether it use <li> <ol> or just <a>).
If you have a peek at the nav element you can see how it relates to the accessibility navigation role.
Likewise, you can look at the ul element and how it related to the accessibility list role.
So the semantic difference would be that a series of <a> is more related to plain text entries that link somewhere. When encapsulated in a <ul> it takes the meaning of a list of links. The latter is probably more explicit to define the concept of a navigation menu.
If you want to add a dropdown below every item the you will need to have ul tags to achieve that result. You just cannot simply add a dropdown menu by using anchor a tags thats why you will see most of the people using ul tags followed by li tags inside to make the dropdown menu. If you just want to show the items on your navbar and dont want to have a dropdown then this approach may be okay..:)
Related
This question already has answers here:
HTML5 nav element vs. role="navigation"
(6 answers)
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Duplicate This question has been answered, is not unique, and doesn’t differentiate itself from another question.
Often, in books, tutorials, and some actual webpage, I see navigation bars marked up as <li>s elements in a <ul> element in a <nav> element, like this:
.site-nav {
display: flex;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.site-nav > li > a {
border: 1px solid black;
padding: 1em;
text-decoration: none;
}
li { padding: 1em; } /* just for better appearance here on SO */
<nav>
<ul class="site-nav">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</nav>
However, why shouldn't I prefer a solution like the following, where the <nav> contains directly all the contents of the <li>s from the example above?
.site-nav {
display: flex;
justify-content: space-around;
list-style-type: none;
}
.site-nav > a {
border: 1px solid black;
padding: 1em;
text-decoration: none;
}
<nav class="site-nav">
first
second
third
</nav>
One advantage I see is the lower specificity needed to target the <a> links (or whatever I'd put in their place, e.g. <button>s), but I still know too little about HTML to understand the implications of one or the other solution, especially as far as accessibility is concerned.
The answer is straight forward, semantics and accessibility.
If I arrive at your second example without the <ul> with a screen reader then I have no idea how many links there are.
If I arrive at the first, correctly marked up example with a screen reader I will hear something similar to "navigation landmark, list of 3 items".
This lets me know that there are 3 links in the list so I can visualise where I am in the navigation as I move between them.
HTML tags have (with some exceptions like div and span) semantic meaning. And you need to check what effects their presence or absence could have.
In the spec.whatwg.org: 4.3.4 The nav element
You have this example:
<nav>
<h1>Navigation</h1>
<p>You are on my home page. To the north lies <a href="/blog">my
blog</a>, from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many school papers are littered.
…
So there you have a full text in the nav element. For a blind person, the screen reader will read this text so that You are on my home page. To the north lies my blog can be understood as You are on my home page. To the north lies my blog. With the information that my blog is a link pointing to the blog.
For your last example:
<nav class="site-nav">
first
second
third
</nav>
What do you think how should the screen read present the content of nav to the person, as the sentence first second third with the information that each word of this "sentence" is a link? This does not make much sense, right?
That's why you group the links using a ul or ol element. To give it the semantic meaning that first second third isn't a sentence but a list of items.
You probably could assume that a particular screen reader could be intelligent enough to determine that your second example does not contain a sentence. But then you rely on an optional behavior a screen reader might have introduced to get around the problem when sites don't introduce enough semantics.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello I am making a dummy promotion page and I am not sure why I have so much
spacing under my h1 tags.
Also for my footer, my li's dont seem to inherit the hover effect?
My li:hover works locally but not when I transfer it over on ftp.
Poking around on your site I found some problems (Chrome inspect is a powerful tool)
In your css/style.css you're setting the hover style on the < li> element, but it's the < a> element you should change the styling of. Change nav li:hover and h1 to this:
nav a:hover {
background: #222; // Looks better
color: #1CDFED;
text-decoration: underline;
}
h1 {
display: inline-block;
margin: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
body {
font-family: verdana;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden; /*1.Why after deleting this line the menu diappear？*/
background-color: #666;
}
ul li {
float: left; /*2.Why after deleting the menu become a column shape？*/
}
ul li a {
display: inline-block; /*3.Why after deleting the menu become smaller？*/
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
ul li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<body>
<h2>Menu Demo 2:</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Contact</li>
</ul>
</body>
</html>
I am a newbie in CSS. This is just a very simple menu demo, but I thought for 3 hours and still didn't understand it. I have put my 3 questions in the code, that is:-
[1] Why did I delete that line 'overflow: hidden;' in 'ul' tag and then the menu just disappear?
[2] Why after deleting the line 'float: left;' in 'li' tage then the whole menu become a column shape？I think below that line I set 'a' tag as 'display:- inline-block'...... And what is the use for 'float: left' here?
[3] Why did I change 'display: inline-block' to 'display: inline', and then the whole menu become smaller and padding-top & padding-bottom for every 'a' tag doesn't work?
The overflow: hidden contains the floated lis inside the ul by creating a blocking context, there is a in-depth explanation here:
Adding CSS border changes positioning in HTML5 webpage
The float: left pulls everything over to the left hand side, and in your case in a line, without a float: left or right the default is none which means elements will just stack which is why you're getting a column style layout.
The inline-block, or a block in other uses, makes the element incorporate the padding, in the example you provided, into its height. For example, if you had text 10px high and 20px padding on the top and bottom, the element would be 10px as the padding would get ignored, with adding a display type of block or inline-block this takes it into account and renders at a height of 50px.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've seen a fair amount asked about this in certain areas, but the answers I found didn't resolve my problem. I'm trying to make a nav menu, and can't get the list style set to none, nor will it display inline. Here is the HTML/CSS I had written:
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
I don't know if it's interfering elements elsewhere on the page, but I tried creating it both inside and outside my header with the same result...which was basically none. I'm wanting to remove the bullet points, center the elements and/or add padding between them, and style the text with the font on the res tof the page, but after getting the element to appear, any stylization I add via CSS isn't applying.
I'm editing because apparently the post was labelled 'off-topic', so I reworded the above text a bit. Also wanted to point out I'm not using embedded css, I'm applying it from an external .css file, which has cooperated just fine until this issue. Thanks for the help guys.
Your css is correct. However, did you enter the code exactly the way you display it above?? Your css needs to go inside a <style> tag if you want it on the same file as your markup. Like so:
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
<style>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
</style>
Demo
What you have written above should work.
I took your code and plugged it in fiddle and it displayed just fine.
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
http://jsfiddle.net/uL3sonrx/1/
You must have something affecting it in your css. Try inspecting it through Firebug or Chrome developer tools to see all the styles applied to it.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I'm having a problem with my css nav styling. The code works on every other page, just not my first page in my drop down. When I open the page, the nav bar changes to a deep purple instead of my chosen color #E7DDDC.
Link to the page that isn't working
Ps. Sorry I'm new at coding and on here as well. Can't seem to find out how to post the code in my question.
This is because the default visited link colour has not been specified in your projects_style.css file. To add it you must use,
a:visited {
color: #E7DDDC;
}
To disable it, you need to replace,
a:link {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
with the one below,
a {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
To specify different colours for different link states, you need to use
a:link
a:visited
a:hover
a:active
You can change in your css,
Add the following styles,
#nav ul li a {
color: #E7DDDC;
}
It might solve your issue.