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
Related
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
This question already has answers here:
Does the <li> tag in HTML have an ending tag?
(4 answers)
Closed 4 years ago.
I have been working on a dropdown menu that now works. Just one strange thing is happening that I can't explain/don't understand. Here is a relevant piece of the code:
<ul>
<li><p>Music Theory 1 </p></li>
<li><p>< </p>Music Alphabet
<ul>
<li><a id="l0" class="lesnitem" href="#">Piano Keyboard</a></li>
<li><a id="l1" class="lesnitem" href="#">Note Types</a></li>
...
Notice the absence of the closing "li" tag on the second "li"
If I put it in, the behavior changes drastically. the inner "ul" is no longer hidden and it is laid out differently (across instead of down), so the absence is affecting the CSS, but I don't see it.
I guess I'm Ok with leaving it out, but it grates on me.
Could this have something to do with the inner "a" tag?
Can anyone help me understand this?
The end tag for a <li> is optional. If you don't put it in explicitly it will be automatically inserted before the next <li> or </ul> (or </ol>).
If you insert it manually before the <ul> then you are moving the nested <ul> so it is no longer inside the <li>.
Instead, you try to create the <ul> as a child element of another <ul> which is forbidden in HTML.
You've got a nested list -- that is, a list inside of another list. The way you do this is that you create a new list inside of a list item of the parent list. This is commonly used for "sub menus" in CSS drop downs.
Example:
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third item with a sub list
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
</ul>
What is commonly done with CSS menus is that the sub list is "hidden" using CSS (eg. by applying display: none) and then when you hover over the containing list item, it is displayed.
Here's an example of a very rudimentarily styled menu using this structure:
#submenu ul {
display: none;
}
#submenu:hover ul {
display: block;
}
ul li {
cursor: pointer;
}
<ul>
<li>First Item</li>
<li>Second Item</li>
<li id="submenu">Submenu (hover to show)
<ul>
<li>Submenu item 1</li>
<li>Submenu item 2</li>
</ul>
</li>
</ul>
Note, of course, that </li> is an optional tag. You can create a list like this:
<ul>
<li>First Item
<li>Second Item
</ul>
What your browser will do is guess at where the closing tag should be and implicitly insert it there. In this case, it is inserting the closing tag after the word "item" in both of those list items.
It is, of course, considered good practice to explicitly close all of your tags.
To specifically answer your questions:
Could this have something to do with the inner "a" tag?
No. This has nothing to do with your "a" tags. As mentioned </li> is technically optional.
But in the case of the code you posted, you're using a nested list setup, not relying on the optional-ness of the closing tag. I can say this assertively because if you had actually closed that li tag that has the sub-list in it, you'd have a ul as a child of a ul, which is not allowed.
Can anyone help me understand this?
Hopefully the above did so. But to summarize:
The </li> tag is technically optional. You don't have to use it, but it's good practice to always close your HTML tags.
The presence of the anchor tags inside of the list items is irrelevant.
In the specific example you posted, you have a nested list or sub-list; this is done by putting a new list inside of an <li> tag.
I am trying to implement some BASIC css onto my website - it is a simple tree type menu.
Here is the test page I have created for it:
http://www.worldheritagetrip.com/1309-2/
Here is the working jsfiddle:
https://jsfiddle.net/fadmrdbm/
and the code:
<ul class="collapsibleList">
<li>
<label for="mylist-node1">Click to open list 1</label>
<input type="checkbox" id="mylist-node1" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<label for="mylist-node2">Click to open list 2</label>
<input type="checkbox" id="mylist-node2" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
and the css:
.collapsibleList li > input + * {
display: none;
}
.collapsibleList li > input:checked + * {
display: block;
}
.collapsibleList label {
cursor: pointer;
}
I have copied the html and css EXACTLY to my wordpress page and it fails :(
Can someone spot the problem?
The problem is that Wordpress has added extra tags to your HTML in order to try and help with the output.
Take a look at this jsfiddle - in it, the HTML from your site for the element in question is directly added from the rendered wordpress output and the same problem exhibits itself. Wordpress has added a p tag,
The declaration .collapsibleList li > input + * hits any tag, regardless of type, that is directly following an input. In your original jsfiddle, you used the HTML you pasted into WordPress, without the extra added tags, so the ul was directly after the input. With Wordpresses added p tag, the ul is now not directly following the input.
You can even see this in your page, the list is appearing when it shouldn't, but the click is also acting on the p tag and that is showing and hiding itself and creating the extra whitespace that you can see there.
Select the p tag in the inspector. You'll see the margin-bottom that is making the whitespace changes and you'll also see the css selector above applied to it. Also in the inspector you can just delete the p tag (and don't refresh the page) then see that your list works as expected as it falls back into the css selector defined.
You can get rid of erroneous WordPress tags by making sure you leave no white-space in the HTML, or you could look at a JavaScript solution that would probably be more robust.
For the record, JSFiddle takes the contents of your boxes and ensures they load, so you can drop something in their and see it working in an isolated sense but it won't direct you towards issues with external libraries, wordpress processing or missing definitions.
How are you implementing your CSS? In your HTML with or in a seperate file? If it is seperate, you need to link your CSS file with <link href="CSSFILE.css" rel="stylesheet" type="text/css"> . It will also need to be in the same directory.
Is there any HTML element that I can use to wrap other elements to use as a placeholder? For example,
<ul>
<placeholder id="list-placeholder">
<li>item 1</li>
<li>item 2</li>
</placeholder>
<li>last item</li>
</ul>
Then I'd be able to access #list-placeholder via JavaScript and append children to it.
I don't think I can use <div> because divs aren't valid in all contexts (such as a list); furthermore, they may be inadvertently styled (I want my placeholder to be invisible).
Browsers don't render the contents of <template> whereas I do want to render what's inside my placeholder
Likewise, <script> tags with a custom type don't render their contents either
No, in HTML, there is no general wrapper element—which is what this is really about. What comes closest is ins and del elements, which can wrap both inline and block elements and have transparent content model. But even they are not allowed e.g. as a child of a ul element.
Instead of trying to use a wrapper e.g. for some li elements in order to apped children to it, set an id attribute on the last of the li elements in question and insert siblings after it. This is more natural in terms of DOM, since then all the li elements will be children of ul, instead of being partly children, partly grandchildren.
According to W3, only a <li> can be a child of a <ul>, therefore, the answer to your question is no. There is not a valid way to wrap two <li>s that are children of a <ul>.
If you have to, you could use a <span>. I have created an example, while not valid, this runs correctly in all modern browsers.
Example snippet and some proof below:
function showList(){
document.getElementById('list-placeholder').style.display = "block";
document.getElementById('showList').style.display = "none";
}
<ul>
<span id="list-placeholder" style="display:none;">
<li>item 1</li>
<li>item 2</li>
</span>
<li>last item</li>
</ul>
<input type="button" value="Show more list items!" onclick="showList()"/>
If you don't HAVE TO use a wrapper, you can and should use the following VALID code:
function showList(){
var hidden = document.getElementsByClassName('hidden')
for (i=0; i<hidden.length; i++){
hidden[i].style.display = "list-item";
}
document.getElementById('showList').style.display = "none";
}
.hidden
{
display:none;
}
<ul>
<li class="hidden">item 1</li>
<li class="hidden">item 2</li>
<li>last item</li>
</ul>
<input type="button" value="Show more list items!" id="showList" onclick="showList()"/>
Use a class to select hidden items instead of a wrapper. That's the correct syntax for your question.
Also, there are set <script> types, just like there are set <input> types (text, button, radio, checkbox, range, etc.). That is why you should specify the type, so the browser understands your code.
Hope this helps!
w3 html validator will tell me that this is wrong:
<a href="http://www.bla.com>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</a>
in order to get a validated as HTML 4 strict (or just for writing things correctly)
What is the better way to write it:
no div's and ul's - just span's with classes that I need to design:
<a href="http://www.bla.com>
<span class="div">something</span>
<span class="ul">
<span class="li">first</span>
<span class="li">second</span>
</span>
</a>
without <a>
<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
=========================
sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.
I vote for option 1: Anchor + descriptive class names:
The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
The class attributes describe their role, as a substitute for the <ul>, <li> elements. These elements can be styled using CSS.
Your structure looks a bit odd though: Why do you want to nest a list in an anchor?
Really you should have <a> tags inside each of the div, ul and li tags:
<div></div>
<ul>
<li>first</li>
<li>second</li>
</ul>
This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.