making a <ul> list creates a ekstra bulletpoint - html

I have a pice of code that creates the list shown bellow.
home
page2
page3
I want to remove the unused dot, and understand where it is coming from.
<ul>
<li>Home
<li>
<li> page2 </li>
<li> page3 </li>
</ul>

Actually, you forgot to close
<li>
It should be:
<li>Home</li>

The second open <li> signifies a new <li> nested within another, hence, an empty bullet point.
It is a syntax error, and must be a </li> rather than a <li>
<doctype html>
<html>
<body>
<ul>
<li>Home</li>
<li> page2 </li>
<li> page3 </li>
</ul>
</body>
</html>

<li> with only the opening tag is perfectly valid, when this is followed by another <li> or by any ending tag.
In your case the second <li> creates a new empty bulletpoint as browsers see your code like this:
<ul>
<li>Home
{</li>}<li>
{</li>}<li> page2 </li>
<li> page3 </li>
</ul>
The {</li>}'s (without {}) are the tags what browsers add before next starting tag to end previous <li> elements.
The same is true for example for <p> as well.
More information: https://www.w3.org/TR/html5/syntax.html#optional-tags

Related

How do I get subfolders to show in a dropdown?

I'm just learning html to build a team site at work. I'm getting the hang of it pretty easily, but I'm having an issue with subfolders not showing in a dropdown. The html is linked to css for a design, but I know the problem isn't with the css.
I'm not exactly sure what to try as I mentioned I am just learning how to code the html.
<li class="top"><span class="down">Folders</span>
<ul class="hsolinks">
<li><span class="down">HIPAA Security Office</span></li>
<ul class="hsolinks">
<li>Access</li>
<li>Audit</li>
<li>LAN File Access</li>
<li>Training</li>
</ul>
The expected result is that the folders "ACCESS", "AUDIT", "LAN FILE ACCESS", and "TRAINING" would show under the HIPAA Security Office in a css dropdown. However, when I place the code into SharePoint it only shows an arrow, but no folders in the dropdown under HIPAA Security Office.
Also, there is additional code under this which is why I have only closed one ul tag. I hope I'm clear with what I'm trying to do!
The <li> element always needs to be surrounded by a <ul> element. But you can have a <ul> inside an <li> if needed. Something like so will work
<ul>
<li class="top">
<a href="#nogo4" id="hsolinks" class="top_link">
<span class="down">Folders</span>
</a>
<ul class="hsolinks">
<li>
<a href="#" target="_parent" class="hsolinksfly">
<span class="down">HIPAA Security Office</span>
</a>
<ul class="hsolinks">
<li>
Access
</li>
<li>
Audit
</li>
<li>
LAN File Access
</li>
<li>
Training
</li>
</ul>
</li>
</ul>
</li>
</ul>
For more information and examples about the <ul> <li> elements read: ul: The Unordered List element

Nesting lists not working even with the </li>

This is the block of code I am having trouble with on a website. From all the looking I have done the <li> and </li> should work just fine. However when I run it on the site it causes this list to be linked to the next list as if I never closed the list tag. If I remove everything and bring the </li> to right behind the </a> it works fine, but if say I put a space or press enter it acts as if the </li> does not exist.
<li>contact
<ul class = "contact">
<li>email</li>
<li>phone</li>
<li>skype</li>
<li>twitter</li>
<li>facebook</li>
</ul>
</li>
<li> home
</li>
even something as simple as this the </li> gets ignored.

Link to top of list

I have an html page with several lists nested within one parent list. I want to create a link at the bottom of each list that when clicked will take the user to the top of the list item.
I understand that it is possible to create a link to the top of the page like this:
Top of Page
An example of what I'm looking for would be
Top of List
The href can point to whatever the id of your list is.
So, if you have
<ul id="MyList">
<li>Example one</li>
<li>Example two</li>
<li>etc...</li>
</ul>
you could link to it with:
Top of list
The initial example you give, linking to "#" jumps to the top of the page, because that's essentially an unused id, which will always go to the top of the page.
You need the # symbol to reference ids:
<ul id="firstlist">
<!-- List goes here -->
</ul>
Go to top
use <a name="name"> tag
JSFIDDLE
<li>list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> <a name="name"> here </a></li>
<li> list </li>
<li> list </li>
go to top

Convert an ASCII list into an HTML list with Ruby

Given the following list:
links = %w(
/foo/bar/baz
/foo/bar
/foo/42/43/44/test
/foo/42
/foo/test/test2
)
I would like to obtain an HTML unordered list such as:
<ul>
<li>
foo
<ul>
<li>
bar
<ul>
<li>baz</li>
</ul>
</li>
<li>
42
<ul>
<li>
43
<ul>
<li>
44
<ul>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
test
<ul>
<li>test2</li>
</ul>
</li>
</ul>
</li>
</ul>
I through I may be a good idea to do it in functionnal style, with a method which call itself. Have you got an example of code to do this? Thanks a lot.
Iterate strings on list
Scan the string with a regex something like /(/\w+)/
Iterate the scan results and build your html
I think that's just it .
OR you could use a some javascript to generate a tree-ish thing / whatever you need

Find node with href of <a> tag like "?"

I have the following HTML:
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
History
</li>
<li>
Contact
<ul>
<li>
Email
</li>
<li>
Phone
</li>
</ul>
</li>
</ul>
</li>
<li>
FAQ
</li>
</ul>
I want to be able to select nodes based on part of the a tag href using an XPATH expression.
I don't have the full href, only the last part.
So say I want to find the node that links to "History.aspx" I would use something like:
//#href()[. = 'History.aspx']
It looks like you want //a[contains(#href, 'History.aspx')] to get the entire anchor node. if you want just the href path, then //a[contains(#href, 'History.aspx')]/#href.
Hope that helps.