I have following code and I want to know how I can remove the extra space the browser puts when rendering.
<p> text text1 text 2</p>
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>
Just use CSS for lists. This page has a lot of resources and examples.
Related
I try to tidy the following html code, and I get an strange result. li elements are not aligned.
Is it correct to have al ul tag and text inside an a
<a> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
Why It could happens?
ul tag is a block element tag - a tag is a inline-block element tag - it is not recommended to put block elements within inline-block elements.
If you had a basic navigation it would look like
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
As explained earlier - within the ul tag you can assign the a tags to navigate to other links/webpages.
The accepted ways of providing indentation to your code is by using 2-space or 4-space indentation (Every time you open a child tag in the next line give it 2/4 space ). Although in HTML indentation does not matter, your code will work perfectly fine with whatever way you wish to do indentation.
tidy code (2-space indentation):
<a href="Link_to_anything"> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
I have added href attribute , as the purpose of the <a> tag is to link the contents inside to another web page or part of a web page
DEFINITION:
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.
The anchor tag can hold most tags inside it like <img>, <p>, <h1> to <h6>,etc. You can perfectly add <ul> tag within the <a> tag
When I insert some Text between two list items, the Text is aligned with the text of the list items and thus looks as if it were part of the preceding list item.
How do I get the Text inserted between two list items to be aligned with the bullet of the list items or, better yet, to stick out a bit.
This is about the plainest of plain html. (I am really a user of LaTeX---where I know how to do it!)
Here is an image:
Than you probaply need is to define two lists and between them insert the text your want.
<ul>
<li>item1 from list1</li>
</ul>
Between two lists
<ul>
<li>item1 from list2</li>
</ul>
If you insert text between two list items in HTML, you will produce invalid HTML. But what may be worse is that you will have a heard time styling it because there would be no clear way in CSS to target that content
Invalid
<ul>
<li>Item 1</li>
Some other text
<li>Item 2</li>
</ul>
Solution
You can however create 2 separate lists and inbetween use any HTML you want. You can also use paragraphs inside list items, or even embed lists in inside list items.
<ul>
<li>Item 1
<p>More text as part of the list item</p>
</li>
</ul>
<p>Some other text</p>
<ul>
<li>Item 2 contains another list
<ul>
<li>item 2a</li>
<li>item 2b</li>
</ul>
</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>
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.
well, I am trying to write parallel checkbox menus in html, but somehow my logic is not helping. May be some of you experts can just help me a bit. This is how I want my menus to look
[] Menu 1 [] Menu 2
[] Item 1 [] Item 5
[] Item 2 [] Item 4
Item 1, 2 are under Menu 1 and 5,4 are under Menu 2. Square brackets indicate checkboxes.
Items under menus are actually collected dynamically and their numbers under different menus can vary.
I would suggest using lists and floated divs. Lists can make it easy to nest as many checkbox trees as you'd like.
<div style="float:left;">
Menu 1
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul>
</li>
</ul>
</div>
<div style="float:left; margin-left:30px;">
Menu 2
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul>
</li>
</ul>
</div>
This would have double nesting. You can make as many checkboxes as you want at a certain indent interval by just adding more list items <li> to a given unordered list <ul> tag.
If your question is only about HTML and CSS, you can use padding and margin attributes to make appropriate indent.
If yuor question about programming logic for generating such tree structure, write please what language you are using.
You might want to look at the jquery library jstree. I use that for my treeview, it's definitely the most advanced treeview available.
it is amazingly configurable, and easy to use.
it has a checkbox plugin that I use in my project. That works perfectly for me.
The development is very active, so even if you might find an issue, the developer is very reactive and will help you.
take a look here : http://jstree.com
and the checkbox demo is here
good luck :)