I have co-written this code:
<ul><p>what are you <i>still</i> doing up?</p>
<p>you waiting for <i>me</i>, so we can <em>go</em> to bed <sup><sub>together?</sub></sup></p>
<ul>there is no such thing as an unsorted list in my world</ul>
<ul>nej tak jeg vil gerne sove</ul>
<p>you went for a <b>bold</b> move...</p>
<p>camel rider hidden in the sand snake flippant eyebrow mandrake</p></ul>
As a template for a website (called Order of the Mouse) but the unsorted list does not display. How I make the unsorted list display?
You will want to use <li> tags to make your list. Like this:
<ul>
<li>there is no such</li>
<li>thing as an unsorted</li>
<li>list in my world</li>
</ul>
you need to put the elements of the list in their own <li> tags, like this:
<ul>
<li>there is no such thing as an unsorted list in my world</li>
</ul>
It looks like you may need an <li> tag nested between your <ul></ul> tags. Like this:
<ul>
<li>there is no such thing as an unsorted list in my world</li>
</ul>
This is how you write unordered lists :
<ul>
<li>Put your text here</li>
<li>More items....</li>
<li>....</li>
</ul>
Good luck !
Related
I’m adding a thematic break inside a unordered list and I’m wondering what is the correct way to do that that will keep the list accessible and semantically correct.
What I would like to do would look something like this:
<ul>
<li>These</li>
<li>Items</li>
<li>Are of</li>
<li>One kind</li>
<hr />
<li>But these</li>
<li>Are of</li>
<li>Another kind</li>
</ul>
However the <hr> element is not allowed as a child of <ul> even though it is semantically correct as a thematic break in the list items.
Another option would be to include the <hr> inside an extraneous <li>:
<li><hr /></li>
However that would be lying about the number of list items. I only have 7 items in the example above, but this would announce 8.
My third option would be to change the role of the <li> to separator:
<li role="separator"></li>
This both semantically correct and allowed in the spec, but I’m wondering if this is accessible. I.e. will assistive technology announce the correct number of items in the list and convey the thematic break among the list items.
Personally I would break it into 2 lists, perhaps with a surrounding one to keep them semantical related.
<ul>
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
To get an output like this
* line with bullet
same insertion but no bullet
I use this code
<ul>
<li>line with bullet</li>
<dt>same insertion but without bullet</dt>
</ul>
May <li> and <dt> be combined this way?
I don't believe it complies to standards. Although it appears to work. There are other solutions to get what you want.
<ul>
<li>line with bullet<br/>same insertion but without bullet</li>
</ul>
What specifically are you trying to do and why do you need this?
Couldn't you just break the line?
<ul>
<li>This item has a bullet<br>This appears on another line, without a bullet</li>
<li>This item has a bullet as well</li>
</ul>
I'm doing a lesson on Codecademy about nested lists in html.
My code is as follows:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ol>
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ol>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
However, the lesson throws the following error when I try to submit this code:
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
What am I doing wrong?
According to the error,
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
you need one unordered list inside your unordered list of profile sections. Currently, all of your internal lists are ordered lists (<ol>). Try turning one of them into a <ul>.
For example, this should match your error desciption:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ul> <!--(Unordered List!)-->
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ul>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
I'm building this menu with an <ul> tag, that will have a title and then the correspondent menus. I wanted to know how is the best practice with this kind of task and SEO too.
I though about:
<ul>
<li><h2>Books</h2></li>
<li>Portuguese</li>
<li>Italian</li>
<li><h2>Movies</h2></li>
<li>Indonesia</li>
<li>Thailand</li>
</ul>
and:
<h2>Books</h2>
<ul>
<li>Portuguese</li>
<li>Italian</li>
</ul>
<h2>Movies</h2>
<ul>
<li>Indonesia</li>
<li>Thailand</li>
</ul>
Is there a better approach? If not, which of these two is better, and why?
The second way because the first one will be rendering the h2 element inside of the unordered list. Another reason is that the second one is just cleaner and easier to manage what you have.
Mix of both is better:
<ul>
<li>
<h2>Books</h2>
<ul>
<li>Portuguese</li>
<li>Italian</li>
</ul>
</li>
<ul>
It's a lot easier to do menu more interactive this way. Take a look here.
The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE:, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.
So which of these ways is the correct way to write an HTML list?
Option 1: the nested <ul> is a child of the parent <ul>
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
Option 2: the nested <ul> is a child of the <li> it belongs in
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
Option 2 is correct.
The nested list should be inside a <li> element of the list in which it is nested.
Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.
Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.
The description list (HTML5 dl) is similar,
but allows both dt and dd elements.
More Notes:
dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).
Official W3C link (updated).
Option 2
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
Nesting Lists - UL
Option 2 is correct: The nested <ul> is a child of the <li> it belongs in.
If you validate, option 1 comes up as an error in html 5 -- credit: user3272456
Correct: <ul> as child of <li>
The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
W3C Standard for Nesting Lists
A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:
Chapter One
Section One
Section Two
Section Three
Chapter Two
Chapter Three
The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:
<ol>
<li>Chapter One
<ol>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>
Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.
Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.
If you validate , option 1 comes up as an error in html 5, so option 2 is correct.
I prefer option two because it clearly shows the list item as the possessor of that nested list. I would always lean towards semantically sound HTML.
Have you thought about using the TAG "dt" instead of "ul" for nesting lists? It's inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
VS
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
What's not mentioned here is that option 1 allows you arbitrarily deep nesting of lists.
This shouldn't matter if you control the content/css, but if you're making a rich text editor it comes in handy.
For example, gmail, inbox, and evernote all allow creating lists like this:
With option 2 you cannot do that (you'll have an extra list item), with option 1, you can.