Is it possible to use the Href attribute on a li element within a b

preview of website homepage

Having trouble with the link not working for li b elements.

Is this an impossible task?

I need assistance moving the navbuttons down to align with the logo. Additionally, I aim to change the logo image for every navbutton (refer to image)

<ul>

  <li><a href="home"><img src='images/logo1.jpg' width='550 height='400' onmouseover="this.src='images/logo.jpg';" onmouseout="this.src='images/logo1.jpg';" /></a></li>
  <li><b href="music"><img src='images/m.jpg'/></b></li>
  <li><b href="news"><img src='images/j.jpg'/></b></li>
  <li><b href="contact"><img src="images/s.jpg"/></b></li>
  <li><b href="about"><img src="images/g.jpg"/></b></li>
  <li><b href="contact"><img src="images/p.jpg"/></b></li>
  <li><b href="about"><img src="images/c.jpg"/></b></li>
</ul>


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;}
li {
    float: left;}

li a {
    display: block;
    padding: 0px 0px;
    text-decoration: none;}

li b {
    display: block;
    padding: 280px 0px 0px 0px ;
    text-decoration: none;}

li b:hover{

Any help will be greatly appreciated, as I am still new to this.

Answer №1

href is considered an "attribute" in web development terminology. Each HTML element (such as <a> and <b>) has its own set of supported attributes, making it impossible to use an attribute meant for one element on another. However, certain attributes like class are widely supported across various elements.

To answer your question directly, the <b> element does not work with the href attribute.

One workaround is to enclose most elements within an <a> tag to create a hyperlink. Here's an example:

<a href="http://www.google.com"><b>Go To Google</b></a>

It's important to note that the value of the href attribute must be a valid URL or URI to function correctly. Using something like home won't generate the expected link behavior. Visit MDN's article on "What is a URL?" for further clarification.

For future guidance, explore MDN's HTML element reference for an extensive list of elements and their supported attributes.

Answer №2

It is not recommended to use href with the b element.

According to the MDN reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/b

The reference specifies using standard attributes only, as outlined here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

I suggest replacing all instances of b tags with a tags. If you wish to maintain the appearance of bold text, you can achieve that through CSS styling.

Adhering to using the appropriate HTML elements for their intended purpose is considered a best practice.

For more insights, refer to What are the benefits of using semantic HTML?

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

Creating a fixed list with top-sticking elements on a webpage using HTML

Creating a single page webapp using Vue/Vuetify, I am facing an issue with building a list (v-list) of items on the right side that requires scrolling. Even though the list is longer than the page height, I want to prevent the rest of the page from scrolli ...

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically. While I have made significant progress, I have encountered a small i ...

"Enhancing User Experience with Hover Effects in HTML using .common

I'm pretty new to coding and currently working on a Github repository. On the same page, I have 12 clickBoxes that each have a hover effect applied where a PNG appears upon hovering. However, I've run into an issue where either the hover effect w ...

Multi-tier Dropdown with Dynamic Size Adjustment

I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...

Arrangement of divs to showcase Background images

Apologies in advance for any errors in my code or question, as I am still learning about coding. Please forgive the spacing in links and lack of correct use of characters - < - I'm having some trouble posting code :) I am working on a website call ...

What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle: When the page loads, will mypic.jpg be downloaded by the browser? #test1 { display: none; } #test2 { background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pic ...

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

I don't have much experience with CSS, but I'm really eager to customize the appearance of my chart. The chart is generated by a vue.js library and comes with pre-defined CSS classes. However, I'm uncertain about how to access and modify the ...

Use CSS to align one item to the left and center the rest on the page

Is there a way in CSS to achieve the following layout: a single block element anchored to the left side of the page the other elements centered on the page (not centered in relation to the remaining space) If there isn't enough space for this layout, ...

Eliminate the CSS triggered by a mouse click

Having some difficulty toggling the switch to change the background color. Struggling with removing the applied CSS and getting it to toggle between two different colored backgrounds. Code Sample: <!Doctype html> <html lang="en"> <head> ...

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

Mobile displays showing truncated text that is hidden until hovered over

I am seeking guidance on how to display truncated text in an Angular app on mobile devices... td { word-break: break-all; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } td:hover{ overflow: visible; white-space: n ...

Bootstrap seems to be struggling with recognizing the last child of a button group. What steps can I take to troubleshoot and resolve this

I'm facing a small but annoying issue with my button group. The last button in the group appears rectangular instead of having rounded corners at the top right and bottom right. This is because the a.btn element is followed by a modal within the btn-g ...

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

Adjust the date input alignment in mobile browsers

I am trying to align the entered date to the left in input[type='date']. However, when testing on mobile browsers like safari and chrome, the date remains centered within the input. mobile example This is the code I have been working on: .co ...

Designing a component with Bootstrap-inspired flair

We are currently in the process of transitioning our ASPX CMS website to a new platform, and some of the retired pages will be hosted on a separate website under a subdomain. The new website will be utilizing Bootstrap 4.6, whereas our existing CMS site re ...

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

How can I assign a class to my Typography component in Material UI?

When using my material-ui component, I wanted to add an ellipsis to my Typography element when it overflows. To achieve this, I defined the following styles: const customStyles = (theme) => ({ root: { textAlign: "left", margin: theme.spacing( ...

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

Styling the CSS tables with alternating row styles for rows 1 and 2, followed by a different style for rows 3 and 4. This pattern will repeat

I've been struggling to create a CSS table style using tr:nth-child to alternate row colors: Row 1 - Blue Row 2 - Blue Row 3 - White Row 4 - White ... and so on. I can't seem to get it right! Can anyone help me out with this? Appreciate an ...