Looking at MDN and w3c it seems like they are the same except the menuitem is intended to be a child of menu and the parent menu must have a type of 'popup'.
But when I look here:
https://developer.mozilla.org/en-US/docs/XUL/menu
It says menu is:
An element, much like a button, that is placed on a menubar. When the user clicks the menu element, the child menupopup of the menu will be displayed.
So with this definition two other elements are now part and parcel to the menu elements use.
So I am confused even further by the relationship of these elements.
In summary
I know there is an HTML-5 element called menu and another called menuitem. I simply want to know the intended way to use them in plain English.
But when I look here: https://developer.mozilla.org/en-US/docs/XUL/menu
That is the menu element for XUL not for HTML. It is a completely different element from a different language.
The MDN documentation for the HTML menu element is at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu
I know there is an HTML-5 element called menu and another called menuitem.
There isn't. Those elements exist in HTML 5.1 (not 5) drafts and the WHATWG Living HTML spec.
Browser support is currently very weak
Related
Currently my code looks like this:
<div class="carouselTypo">
<p class="carouselTypo__p" data-target="#active1">A</p>
<p class="carouselTypo__p" data-target="#active2">B</p>
<p class="carouselTypo__p" data-target="#active3">C</p>
</div>
The same code could also be written like this:
<ul class="carouselTypo">
<li class="carouselTypo__p" data-target="#active1">A</li>
<li class="carouselTypo__p" data-target="#active2">B</li>
<li class="carouselTypo__p" data-target="#active3">C</li>
</ul>
Now I'm wondering, which one is better or correct? Or does it not matter?
Actually if you remove the default css I don't think it does matter in this case.
but you should always prefer to use the element that represents your elements prototype,
because sometimes the browser has different behavior for different elements.
for example lets take the the anchor tag.
you can make it in tow ways:
create a button which opens the href
create an anchor tag with href
if you remove the default css the look the same but they don't,
because the browser has other way to deal with anchor tag, for example with anchor tag if you hover the anchor you will see in the bottom the url address:, or you will be able to shift-click which opens the link in a new tab.
<button onclick="document.location.href = 'https://stackoverflow.com';">
hover / shift-click doesn't work
</button>
hover / shift-click works
maybe you can make the shift-click yourself for example, but there are more different can't be done by you, for example accessibility service / extensions will probably react different with other tags.
So if you are making a list of something I recommend you to use the ul Although I don't see any different in non style behavior. (but again, for example maybe there is an extension which collects lists data and it won't work on the div method.)
The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."
The term "semantics" refers to the way that you use the inherent meaning of existing structures to create explicit meaning. HTML is comprised of tags that mean certain things by themselves. And there are established rules/guidelines/ways to use them so that your published HTML document conveys what you want it to mean.
If you list something in your document, then add an ordered list (UL) or an unordered list (OL). On the other hand, the page division (DIV) element is used to create a specific & separate piece of content.
The div element "divides." When you look at a page, there are specific parts like a content body, the footer, a header, navigation, menus, forms, etc. And you can use div tags to create these divisions. Often, the page parts correspond with a visual layout, so using explicit page divisions (DIVs) to cut up your layout in CSS is a natural fit. This way the div tags become structural.
If you misuse or overuse the div tag, it can create unintended meaning & code bloat.
To confuse matters: Google uses h3 and div to "divide" their listed search results. ul > li > h3 + div
So when you turn off all styles (Shift+Cmd/Crtl+S in Firefox w/ WebDeveloper toolbar), the divs should go away, and stack naturally. Your naked HTML should still render a nice page with a clear hierarchy: top to bottom, most important content first, and lists with bullets & numbers for listed items. And it's a good idea to add a link near the top (for non-visual users) that allows you to skip down to main content, important forms, or the main headings (like a table of contents).
Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.
It will affect your code readability. If you use ul and li, your code is more readable.
Why we use these tags? Is it okay if I'll create a navbar with only links and divs?
cause I need to do menu with structure like this
Isn't it gonna be too much nested, if I use <ul> for this?
We use list markup for menus and navigation bars because it is the most appropriate markup from a "semantic" point of view. The links in a menu or navigation bar constitute a list of similar items. As the HTML 5.2 specification says,
The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.
A navigation bar or navigation menu is a list of links; other types of menus may be lists of functions in an application. Early version of HTML, e.g. HTML 3.2 even had a menu element:
They [i.e. the DIR and MENU elements] are intended for unordered lists similar to UL elements. User agents are recommended to render DIR elements as multicolumn directory lists, and MENU elements as single column menu lists. In practice, Mosaic and most other user agents have ignored this advice and instead render DIR and MENU in an identical way to UL elements.
dir and menu were deprecated in HTML 4.01; the HTML 4.01 spec says:
We strongly recommend using UL instead of these elements.
In addition to browser support, there is another reason for using ul instead of a non-list element: accessibility. When a screen reader encounters an ul, it can announce the number of items in the list to the user. This is very useful, because it allows the user to decide whether they want to read the entire list or skip it. Announcing the length of a list is not possible when the list markup is replaced with a series of paragraphs or divs.
HTML is a semantic markup language. It is designed to describe what things are.
A menu is a list of links. Therefore we use list markup with links inside it to describe it.
Nothing stops you using list markup to describe the structure in your image:
<ul>
<li>
Item 1
<ul>
<li>Subitem it</li>
<!-- etc -->
Because when you want to create a menu, navbar, you're grouping information about your website [your links] into one place. that's where you can use lists, <ul> or <ol>.
see:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Also, it does not matter how it looks [visually], but the meaning, or the semantics, is more important here.
The spec says the following about the <nav> element (emphasis mine):
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
It never specifically says that <button> is disallowed, and nowhere it says that only <a> elements should be used for navigation (yet it mentions "links"), but all the examples seem to be a bunch of anchors in lists. The one example (11) that isn't a list still has only anchor elements for navigation inside.
The next example (12) shows an example of navigation within application, but uses anchors again.
So, are button elements allowed inside <nav>?
In HTML 5.2, section 4.8. is about links:
Links are a conceptual construct, created by a, area, and link elements, that represent a connection between two resources […]
As one would expect, the definitions of a ("a hyperlink"), area ("a hyperlink"), and link ("the link(s)" etc.), all refer to links, while the definitions of button and input don’t.
So:
A nav element should contain elements with href attribute (a/area/link). Otherwise it wouldn’t be warranted to use nav in the first place (exceptions aside).
A nav element may also contain buttons. For example, a button that is used to toggle between showing all levels of the navigation, and showing only the top-level. (However, if the buttons are used for navigation, they should be links instead of buttons anyway.)
The HTML5 Standards allows any kind of flow content inside of <nav>-tags and <button> tags are considered being flow content, but you should consider to avoid them for semantical reasons. Buttons based on <button> are UI elements which are exclusively javascript driven (or in some tricky scenarios by the default behavior of the browser when using forms) without any functionality or semantical reference towards an 3rd party reference. Therefor using <button>-tags inside of <nav>-tags makes no sense for clients/robots who do operate without considering javascript.
Modern UI-Frameworks like Bootstrap, Semantic-UI or others do provide the ability to implement buttons in multiple ways (as <button>-tags as well as <a>-tags). Taking such abilities into account, you should prefer to rely on <a>-tag based buttons for semanatic reasons.
Depends how you define "allowed".
It is valid HTML, but you may want to read up on accessibility and the difference between a button (that should signal clickable actions) and a link (that should navigate somewhere).
http://web-accessibility.carnegiemuseums.org/content/buttons/
I'm trying to find a list of elements that are tabbable.
Adding tab-index to elements make them tabbable.
Some elements are tabbable by default like <input>.
Is there a list of these elements that are tabbable by default?
And optionally, why are they tabbable by deault?
The easiest way to find answers to such questions is by looking at the spec
I believe the list you are looking for is:
a elements that have an href attribute
link elements that have an href attribute
button elements
input elements whose type attribute are not in the Hidden state
select elements
textarea elements
Editing hosts
Browsing context containers
To answer your optional question: they are "tabbable" by default for usability issues. If you follow the principals of making a good, user friendly app, it should allow for a consistent navigation and discoverability among other things.
So, by making them "tabbable", in the order they appear in code, the default behavior is to allow the user to complete a form from top to bottom, with minimal clicks and moving around, this making the "thinking process" about what should be filled next unnecessary
https://allyjs.io/data-tables/focusable.html is probably the most comprehensive list I've ever found. Not only does it go over what is "expected" by the spec but also how all major browsers actually behave.
At https://www.w3schools.com/tags/att_global_tabindex.asp, it talks about the tabindex attribute in HTML 4.01, and how only certain elements could enter the tab order through the tabindex attribute.
Those elements were: <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.
I've been working with tab stuff for a few months now, and that list seems to fit with I've noticed as naturally tabbable.
I have a CSS/HTML based menu and when i hover on a single menu item All child menu items shown. what can be the
root course for this problem ?
where should i start debugging in CSS file or HTML list ?
What can be the common curses for this ?
(Rather posting the code i prefer to solve this for own learning experience !
It sounds like a CSS selector issue. If more things are showing than you expect, it could be that the CSS selector (for :hover) is too broad and is picking up more items than you intend. You may need to make the CSS selector be more selective so that it only affects some of the child menus at a given time. You might be able to do this by defining different selectors that start with different IDs and then apply the :hover to just child elements of a specific element. If your code is a pure HTML/CSS implementation, that seems to be the most likely cause. It could also be that they way you have structured the HTML causes all of the child menu items to fall under the same parent element (or branch), so you may also need to ensure that each set of child menus has some unique parent/grandparent that you can base the CSS selectors on. Hope that helps point you in the right direction--good luck with figuring it out!