从语义上更正HTML中的网站地图 [英] Semantically correct sitemap in HTML
问题描述
我试图为我们的网站开发/设计一个主菜单/网站地图。
简要说明菜单应该看起来像一个目录树，每个项目在菜单上应展开以显示更多菜单项或链接到网站上的其他页面。
最重要的是，每个项目都应具有要添加的功能网站收藏夹应用程序，以便每个用户可以更快地找到深埋在菜单结构内的项目。
由于我疯狂的OCD确保一切正确地完成并达到最好的标准，我有问题让我的标记在语义上是正确的和可访问的。
以下是我到目前为止： p>
< ul>
< li>
< ul>
< li>
< a href =example1.html>折叠菜单项1< / a>
< / li>
< li>
< a href =example2.html>将菜单项1添加到收藏夹< / a>
< / li>
< li>
< a href =example1.html>菜单项1< / a>
< ul>
< li>
< ul>
< li>
< a href =example3.html>打开菜单项1的
第一个孩子< / a>
< / li>
< li>
< a href =example4.html>将菜单项1的
第一个孩子添加到收藏夹< / a>
< / li>
< li>
< a href =example3.html>菜单项1的第一个
子< / a>
< / li>
< / ul>
< / li>
< li>
< ul>
< li>
< a href =example5.html>打开菜单项1的
第二个孩子< / a>
< / li>
< li>
< a href =example6.html>将菜单项1的
第二个孩子添加到收藏夹< / a>
< / li>
< li>
< a href =example5.html>菜单项1的第二个
子< / a>
< / li>
< / ul>
< / li>
< / ul>
< / li>
< / ul>
< / li>
< li>
< ul>
< li>
< a href =example7.html>展开菜单项2< / a>
< / li>
< li>
< a href =example8.html>将菜单项2添加到收藏夹< / a>
< / li>
< li>
< a href =example7.html>菜单项2< / a>
< / li>
< / ul>
< / li>
< li>
< ul>
< li>
< a href =example9.html>打开菜单项3< / a>
< / li>
< li>
< a href =example10.html>将菜单项3添加到收藏夹< / a>
< / li>
< li>
< a href =example9.html>菜单项3< / a>
< / li>
< / ul>
< / li>
< / ul>
正如您所看到的，事情开始变得非常复杂 非常快速。
这是传达这些信息的最佳方式，还是我将这件事情复杂化了？
你能想到一个更好的方法来做到这一点吗？ 。折叠/打开/添加到收藏...这些元素不属于树，但你把它们当作是它的一部分。
你的树应该具有以下结构：
< ul>
< li>
< span>菜单项目1< span>
< ul>
< li>
< span>子节点1< / span>
< / li>
< li>
< span>子节点2< / span>
< / li>
< / ul>
< / li>
...
< / ul>
这是树的基础。现在你应该添加动作（打开/添加...等）。他们可能被放置在 span 元素之后的另一个独立列表中。然后使用 class 从 actions 列表中分隔 childNodes 列表：
...
< li>
< div>
< span>菜单项目1< / span>
< ul class =actions> ...< / ul>
< / div>
< ul class =childNodes> ...< / ul>
< / li>
...
呃...理论上课不是必需的，但它很重要更容易处理类而不是 网站的基本功能不应该依赖于JavaScript。这就是为什么我使用JS添加整棵树是不好的主意。像 add to favs 这样的操作应该在没有JS的情况下可用，但是您可以随意控制该操作并覆盖它的功能。所以在HTML中你有： 但是使用JS你可以这样做（伪代码）： 这是同时提供良好可用性和功能的最佳方式。 关于打开/折叠操作。这些需要JS的本质，所以可以通过JS将它们添加到动作列表中。但是再一次......记住非JS用户。 HTML / CSS应该显示一棵树 - JS应该折叠它的分支。 I am trying to develop/design a main menu/site map for our website. The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site. On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure. Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible. Here's what I've got so far: As you can see, things start to get very complicated very quickly. Is this the best way to convey this information or am I over complicating the matter? Can you think of a better way for me to do this? IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it. Your tree should has following structure: That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after Well... in theory classes aren't required but it's much easier to handle with classes rather Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have: But using JS you do something like this (pseudo-code): It's the best way to provide good availability and functionality at the same time. About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches. 这篇关于从语义上更正HTML中的网站地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ ... ul> li> div>
< a href =/ tree / action / add_to_favs？id = 123> Add要求< / a>
actionLink.addEventListener（click，function ...
var id =取得id：123
在这里做ajax请求
返回false;
}）;
<ul>
<li>
<ul>
<li>
<a href="example1.html">Collapse "Menu Item 1"</a>
</li>
<li>
<a href="example2.html">Add "Menu Item 1" to Favourites</a>
</li>
<li>
<a href="example1.html">Menu Item 1</a>
<ul>
<li>
<ul>
<li>
<a href="example3.html">Open "Menu Item 1's
First Child"</a>
</li>
<li>
<a href="example4.html">Add "Menu Item 1's
First Child" to Favourites</a>
</li>
<li>
<a href="example3.html">Menu Item 1's First
Child</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example5.html">Open "Menu Item 1's
Second Child"</a>
</li>
<li>
<a href="example6.html">Add "Menu Item 1's
Second Child" to Favourites</a>
</li>
<li>
<a href="example5.html">Menu Item 1's Second
Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example7.html">Expand "Menu Item 2"</a>
</li>
<li>
<a href="example8.html">Add "Menu Item 2" to Favourites</a>
</li>
<li>
<a href="example7.html">Menu Item 2</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example9.html">Open "Menu Item 3"</a>
</li>
<li>
<a href="example10.html">Add "Menu Item 3" to Favourites</a>
</li>
<li>
<a href="example9.html">Menu Item 3</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<span>menu item 1<span>
<ul>
<li>
<span>child node 1</span>
</li>
<li>
<span>child node 2</span>
</li>
</ul>
</li>
...
</ul>
span element. Then just use class to separate childNodes list from actions list:...
<li>
<div>
<span>menu item 1</span>
<ul class="actions"> ... </ul>
</div>
<ul class="childNodes"> ... </ul>
</li>
...
... ul > li > div > ul selectors etc.According to first comment
<a href="/tree/action/add_to_favs?id=123">Add to favs</a>
actionLink.addEventListener("click", function...
var id = take id: 123
do ajax request here
return false;
});
