Hi, Are website menus made using the unordered list tag <ul><li></li></ul> in HTML and then styled with CSS? I guess you link each list element to the appropriate page? If not, how are they made? Regards, Chris
Thought so just wanted to clear it up. Thanks. I guess I'll learn more about this when I dealve into CSS.
Note, a menu can be made both by using an unordered list, but also an ordered list - depends a bit on what the menu contains. But yes, in most cases, an UL is perfectly valid. And, of course, there are menus using multiple ULs, ULs within other LIs (to create dropdowns, for instance) and so forth.
It's not mandatory to make the menu out of a list. You can make it out of divs also for example. In most cases is a UL though.
If you do decide to not use a list structure, you are screwing over assistive technologies; pissing on accessibility. You are also making life difficult for yourself by screwing over the cascade in cascading style sheets.
And... because it's done by big names doesn't mean it's the correct way, or even smart. Facebook should really not be used for any example except how not to code a website - the underlying code for Facebook is horrible. Really, really horrible. I understand a lot of the choices they've done, by all means, but it sucks donkey balls. Also, if you turn off things like images, javascript and/or CSS, the page doesn't really work at all.
Your view does not change the fact that many of the popular websites don't use UL for nav menu - this is simply a fact, which I stated before. I personally use UL but there are many cases where UL is not used.
huge differences UL stands for unordered list - ie bullet points and your site's navigation (ie menu) is a list A div is just a container for information on the page, you know nothing about how it's meant to be used or what it will contain so, when we talk about accessibility that's a really important distinction when we talk about search engines indexing our sites it's a really important distinction
Yes. But again, that doesn't mean it's correct, semantic use. It's really that simple. That "lots of pages" don't know jack about accessibility and semantic use of HTML elements just shows they don't really know what they're doing. Or that they don't care. Either way, it's _wrong_. It's that simple.
It's wrong by W3C standards or whoever maintains HTML in my opinoin, just like gay marriage is wrong according to the bible standards ect... But that won't stop gays from getting married, and incorrect used of HTML code. I'm glad I found this forum, there is so much knowledge for a newbie like me.
I guess it's important to make a distinction between what people do and what people should do. The advice you get here is going to focus on the "best practice" and encourage you to do that stuff. There will always be shortcuts for people who want to go that route.
Not really in love with your expansion on the definition. A perceived correlation of the wrongness of gay marriage, a religious dogma and therefore irrational, to ignorance of html recommendations does not belong in this forum. HTML is a system for marking the content of an html page to tell the UA just what that content is. To use the wrong element tag is to reduce the potential power of the UA to render the content in ways that best pass on the sense of the document. gary //edit: Oops, @sarahk I was typing while you were posting essentially the same thing. ~g
Anyways that being said, this post is answered already. Thanks. Also, <div></div> would be used to section a menu container? Nevermind, I haven't even started learning about <div> yet. I'll learn about it before asking questions.
An explanation regarding usage of spans and divs: "Divs and spans are the way to go as they're invisible to screen readers. Stebner was tabbing through the far too many lists on mica.edu and they gave no clue as to where he was on the page and no information other than "List, 10 items. List, 6 items..." With divs and spans, the content is immediately available to the screen readers."
One implies a meaning -- this is a short list of choices or bullet points (bullet points as in the grammatical sense, not as in it has bullets drawn before each item), vs. "this is a generic container that implies no meaning and exists JUST as a hook for presentation". DIV and SPAN are "semantically neutral" which means they have zero impact on the meaning of what you wrap. Technically anchors have the same lack of meaning, as you might be saying "this is a link" but you aren't changing or implying meaning to the text it wraps! As such if you just use div, or div+span, or DIV wrapping a bunch of anchors... or HTML 5's idiotic NAV tag... well, this: <nav> <a href="/">Home</a> <a href="/about">About Us</a> <a href="/faq">FAQ</a> <a href="/forums>Forums</a> </nav> Code (markup): is grammatically and semantically the same as a run-on sentence that reads "Home About Us FAQ Forums" -- which is a pretty gibberish sentence. You aren't implying any semantic meaning to say anything more than "The UA can optionally skip this section to get to the content" (what NAV means) and "These words are links" -- it does not imply a grammatical separation of those words or any meaning. The result being flipping the double bird at users with accessibility needs... and sure, a LOT of big websites flip the bird at users with accessibility needs; you want to hear someone relying on a screen or braille reader bitch, point them at the accessibility DISASTER that is Facebook with its basically telling a large portion of the population to go **** themselves. (I often wonder if they're Drumpf followers given the blatant bigotry of their site development methodology! They have this whole "**** the cripples" mentality to their codebase and design!!! Well, in addition to their "who gives a shit how much bandwidth we waste" idiocy) @Blizzardofozz, I don't know what screen reader they were using in your example, but it sounds like one of the buggy broken piles of manure like Apple's that nobody with actual accessibility needs uses. Certainly doesn't sound like what a LEGITIMATE accessibility UA like JAWS would do. Dunno what you got that from, but it sounds like people who know dick-all about accessibility or HTML. Anyone telling you span and div for a menu is better than a list, is probably talking out their ass or making shit up! Even if the "content is immediately available" there's nothing to break it up and a screen reader SHOULD read it as a flat sentence with no separation of what's what link-wise until AFTER it's read the whole thing... since again anchors do not imply meaning and as such should be read flat as if the anchor wasn't there. ... at least if the UA in question is bothering to follow the actual semantic rules of HTML -- which admittedly given the number of jackasses vomiting up code and flat out ignoring the rules of HTML, wouldn't be surprising for cheap rubbish UA's or sloppy extensions to follow suit. But again, content trumps all that. When you have content people want, it's often shocking the flaming hoops people will jump through to get at it. If it weren't for content, FB would have gone the way of myspace ages ago.
Thank you Deathshodow for taking the time to provide such an insightful, informative answer. Regards, Chris