Can Link Tags be Used outside the <li> Tag in WordPress Widgets?

Is it possible to link the <li> tags in widgets?

For example, normally the <a> tag is inside the <li> tag:

<div class="widget_archive">
    <h3 class="footer-widget-title">Archive</h3>        
        <ul>
            <li><a href="http://url.tld/2013/10/" title="Oktober 2013">Oktober 2013</a>&nbsp;(7)</li>
        </ul>
</div>

But I want it like this:

<div class="widget_archive">
    <h3 class="footer-widget-title">Archive</h3>        
        <ul>
            <a href="http://url.tld/2013/10/" title="Oktober 2013"><li>Oktober 2013 &nbsp; (7)</li></a>
        </ul>
</div>

I want the user to be able to click on the entire element, not just the link text.

htmlcsswordpress-themingwordpress

Answer №1

Absolutely! It is indeed possible. The content is displayed nicely on browsers, although it does not comply with W3C HTML standards.

When attempting to validate this code on W3C, you may encounter an error message stating:

Element a not allowed as child of element ul in this context.

To perform the validation test on W3C, you can click HERE and even select a doctype for validation.

<div>

    <ul>
        <li>
            <a href="#">
                Link 1
            </a>
        </li>
        <li>
            <a href="#">
                Link 2
            </a>
        </li>
    </ul>

</div>

li {    
    display: inline;    
}
a {
    display: block;
    background: yellow;
    width: 200px;
    height: 30px;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as: Item1 Item2 Item3 Item4 Item5 Is it possible to achieve the following collapsed format: Item1 Item2 Item3 =menu= Or: =menu= Item3 Item4 Item5 This method ...

htmlcsstwitter-bootstrapbootstrap-5

What is the proper way to utilize document.getElementById() within a standalone js file?

As I dive into learning web development for the first time, I've decided to keep my scripts organized in separate files. However, I'm facing a challenge when trying to access elements from these external files. Below is a snippet of the JavaScri ...

javascripthtmlwebgetelementbyid

datepicker in bootstrap 4 obscured by the div

I am currently utilizing Bootstrap datepicker v4. However, I am facing an issue where the datepicker view is getting hidden behind the 'map' div. I have attempted to solve this problem by adding overflow: visible, but unfortunately, it does not s ...

jqueryhtmlcssbootstrap-4leaflet

The theme for Wordpress in 2015, also known as

Is there a way to automatically resize and fit the cover picture in the twenty fifteen theme to make it a square cover instead of the default rectangular one? I've been trying to change the dimensions of the cover image container but can't seem t ...

htmlcsswordpressthemes

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

htmlcss

Create a notification menu in Bootstrap using Bootply, which conveniently displays a numerical badge at the top

I am interested in implementing a bootstrap notification menu similar to the one found at this link: http://www.bootply.com/oasBuRC8Kz# However, I would like to add the number of notifications to the upper right corner of the glyphicon. I have gone throug ...

csstwitter-bootstrapglyphicons

Utilizing Ajax to dynamically update the content of a div element

As a newcomer to Ajax, I am trying to use xmlhttprequest to dynamically change the content of a div by fetching HTML from different URLs. However, my code doesn't seem to be working as expected. Can someone help me identify what I might be doing wrong ...

javascripthtmlajaxxmlhttprequestserver-side

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

htmlioscss

How can I efficiently make a dropdown menu with search functionality instead of using datalist?

I am currently working on creating a custom searchable input field that makes backend calls. Instead of using datalist, I want to design a unique UI with ul and li items. While I have successfully implemented the search functionality, I am facing a glitc ...

javascripthtmlcssangular

What is the best way to adjust image size according to the dimensions of the parent container using CSS

I am working on a card game using Bootstrap styling and I have a container with a background image of a card table (1000x1000). As I resize the browser window, the card table image shrinks to 800x800, then to 500x500, and finally to 200x200. My issue is th ...

htmlcssbootstrap-4

How to implement a modal popup in Vue.js using an anchor tag

As a newcomer to Vue.js, I'm facing an issue with creating a link in my navbar component that, when clicked, displays a modal component. I've noticed that the solutions I found are for buttons which use the data target attribute, but this isn&apo ...

javascripthtmlvue.js

Enhance your design with dynamic hover effects

I need assistance with modifying the menu structure generated by Wordpress. Specifically, I want to change the background of #header-nav li ul.children li a when #header-nav li ul.children li ul.children li a:hover is active. Could someone provide guidanc ...

javascriptcss

Only a select few expandable elements in the jQuery accordion

How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu: Home, Support, Sales, Other The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a spec ...

javascriptjqueryhtmlcssaccordion

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

Dealing with issues when trying to send an ajax post request

I'm currently trying to implement a search bar on my WordPress website that will allow users to search through all of my blogs. However, I've encountered two errors that are giving me some trouble. I suspect it may have something to do with the U ...

phpajaxwordpress

Tips for ensuring uniform button height across all cards

I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code: * { margin: 0px; pad ...

htmlcssflexbox

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

CSS - Flex items not being affected by justify-content

Working on a small tech challenge and implementing flexbox. Despite setting display: flex; on the parent div, using justify-content with space-evenly in the same CSS property doesn't seem to have any effect. CSS snippet: .relatedFlex { display: f ...

htmlcssflexbox

In Chrome, there is a conflict between the screen width when using `position: absolute` and `position: fixed` if there is vertical

I'm in the process of developing a website with a video banner set to fixed positioning in the background, and a div that has absolute positioning covering part of the video on the bottom half. However, I've encountered an issue - when I add this ...

javascripthtmlcssgoogle-chromecss-position

I seem to be having trouble with jQuery. Every time I try to submit my form, nothing happens

I am currently working on creating a web page for a numerical game, but I am facing difficulties with my jQuery implementation. Despite checking all my placements, nothing seems to happen when I click on the Submit button. Any assistance would be greatly a ...

javascriptjqueryhtml