href null link

[DrPR]

This is a HTML/XHTML philosophical question.

I have been using a drop down menu on my web site for years that uses nested unordered lists. I got the code from another fellow. It works fine with Firefox, Internet Explorer, Edge, and Safari on a Macbook Pro and iPhones. It works mostly with Opera and Chrome (drop down menu works OK but cursor behaves strangely). It doesn't work on some Apple tablets - but who cares? The code is XHTML 1.0 and it passes the W3C code validation.

The menu has this structure:

<div>

    <ul>

        <li><a href="#"> ... </a>

            <ul>

                <li><a href="[local page link]"> ...</a> </li>

and so on.

My question: What is href="#" supposed to do? It looks like a null (non-existing) fragment, or incomplete fragment. If you move the cursor over this menu object the cursor changes from the default arrow to the pointer (hand with finger), implying that if you click the menu object you will go somewhere.*  But there is no real link, so should the cursor change? The drop down menu works without the href="#" statement.

In fact, clicking on this menu object appears to redraw the current page from the top. If the screen is scrolled so the top of the page is not visible when you click on the menu object the screen redraws with the top of the page visible. So it appears that href="#" is a link to the top of the page.

I have read people proselytizing that the "#" incomplete fragment is sloppy coding, lazy work, evil ... and so on. Any thoughts?

What about href=""? Another null link? I have seen this used in some HTML code.

****

The web site is:

http://www.okieboat.com

if you want to see the menu in action or look at the code.

Phil

*NOTE: I have a "cursor: default" statement in the CSS to force the cursor to remain an arrow when it is over the null link objects. This doesn't work in Opera or Chrome, but works in the other browsers.

 

Edited October 25, 2017 by DrPR

[Ingolme]

The "#" usually links to the top of the page, it's a specific form of the hash part of the URL, which links to certain sections within a page without reloading. People usually use it on links that are controlled by Javascript so that if the Javascript doesn't run the page won't be reloaded.

There's no real problem with it, but it is kind of pointless to use the "#" in your link. It comes from a very old practice when Internet Explorer would only listen to click events on <a> elements. Now that click events work on anything, if you don't need a link then use a different element instead, you could put the event handler straight on the <li> element. If you do need a link, then make the href attribute point to a meaningful page. The page you're linking to uses a CSS based menu, so Javascript isn't involved, but the same principles can apply. The :hover pseudo-selector could be placed on a <span> or <div> instead of a link if they wanted to prevent clicking from opening a new page.

Using href="" points to the current page, it's a perfectly valid link. If you need to point a link to the current page, that's a reliable way to do it.

The website you're linking to has some really old code. XHTML Transitional was intended to help people transition from HTML 3.2 to XHTML without having to rewrite a whole lot of their code back in 1999, but a lot of people just got stuck in the transition and never moved further. People continued using Transitional XHTML because they thought it was easier than following the stricter standards. Even then, XHTML itself has been phased out because the W3C couldn't pull themselves together to finish XHTML 2.0 and WHATWG stepped up to create HTML 5 instead.

I would advise that you pay more attention to mobile and tablet devices because the comprise around 60% of web traffic today. If you're still working with XHTML you have a whole lot of catching up to do to create proper websites today.

[DrPR]

Ingolme,

Thanks. I knew href="#" and href="" worked, but there are a lot of kludges that really aren't good coding that browsers seem to work with anyway. I didn't know why those <a> elements were in the original code. I have been thinking about getting rid of them because the menu seems to work without them - but it has been easier to just leave it alone.

****

I chose XHTML instead of HTML I guess because I am a nit-picker. I just liked the fact that you had to close statements and not leave things hanging for the whims of the browser. To me it was easier to read. Back in the early days of "C" I was always getting my posterior kicked when I accidentally screwed up types, indirection, etc. C++ solved a lot of problems by being really picky about such things. I guess I am like that.

"Really old code" is being polite. I have been using XHTML for more than a decade. I have thought about looking into HTML 5, but it might be just another XHTML (I remember when that was to become the ultimate markup language). I remember when FORTRAN was the "ultimate" programming language, so everyone had to use it. I learned programming with BASIC. Then Pascal came along, and everyone had to switch. I even programmed in FORTH and STOIC (UG!) because those were to become the "ultimate" languages. Never tried A, B or APL. Then came C, ADA, and finally C++. Finally? I doubt it! I have also programmed in binary machine languages, assembly languages and a few other flash in the pan languages whose names I don't even remember!

It was like the Twelve Days of Christmas - on the first day programmers gave to me binary. On the second day ... assembly and binary. And so on. So I am no longer enthralled with changing to the latest fad language - and there are dozens of them! As long as XHTML 1.0 works in browsers I'll probably stay with it. Maybe in another five years I'll switch to HTML 5 - if it is still around.

I really am not very concerned with all of the cell phones. Who is going to try to read a 70 page web site on a tiny screen? Kids who just use their phones for texting certainly aren't! I can read it on an iPhone 5, and even use the pull-down menus by zooming in. My site is formatted for 1024 bit wide screen, and it won't be long before everything has at least that many pixels (maybe they already do). This allows me to format the pages to keep text aligned with related images without everything becoming a random jumble.

Besides, I'd rather spend my time hiking!

Phil

 

 

[brunogiubilei]

use this:

<a href="javascript:void(0);"></a>

with this, you pass to the function href a none parameter

[DrPR]

Bruno,

 

Thanks. I have seen that trick used in other code.

But I think I will use Ingolme's suggestion and eliminate the <a> statement completely. That should solve the problem of the cursor changing from an arrow to the pointer hand with finger over a non-link href. That way I solve two problems with one fix, and maybe the code will work the same in all browsers.

Phil

[Ingolme]

16 hours ago, DrPR said:

Ingolme,

Thanks. I knew href="#" and href="" worked, but there are a lot of kludges that really aren't good coding that browsers seem to work with anyway. I didn't know why those <a> elements were in the original code. I have been thinking about getting rid of them because the menu seems to work without them - but it has been easier to just leave it alone.

****

I chose XHTML instead of HTML I guess because I am a nit-picker. I just liked the fact that you had to close statements and not leave things hanging for the whims of the browser. To me it was easier to read. Back in the early days of "C" I was always getting my posterior kicked when I accidentally screwed up types, indirection, etc. C++ solved a lot of problems by being really picky about such things. I guess I am like that.

"Really old code" is being polite. I have been using XHTML for more than a decade. I have thought about looking into HTML 5, but it might be just another XHTML (I remember when that was to become the ultimate markup language). I remember when FORTRAN was the "ultimate" programming language, so everyone had to use it. I learned programming with BASIC. Then Pascal came along, and everyone had to switch. I even programmed in FORTH and STOIC (UG!) because those were to become the "ultimate" languages. Never tried A, B or APL. Then came C, ADA, and finally C++. Finally? I doubt it! I have also programmed in binary machine languages, assembly languages and a few other flash in the pan languages whose names I don't even remember!

It was like the Twelve Days of Christmas - on the first day programmers gave to me binary. On the second day ... assembly and binary. And so on. So I am no longer enthralled with changing to the latest fad language - and there are dozens of them! As long as XHTML 1.0 works in browsers I'll probably stay with it. Maybe in another five years I'll switch to HTML 5 - if it is still around.

I really am not very concerned with all of the cell phones. Who is going to try to read a 70 page web site on a tiny screen? Kids who just use their phones for texting certainly aren't! I can read it on an iPhone 5, and even use the pull-down menus by zooming in. My site is formatted for 1024 bit wide screen, and it won't be long before everything has at least that many pixels (maybe they already do). This allows me to format the pages to keep text aligned with related images without everything becoming a random jumble.

Besides, I'd rather spend my time hiking!

Phil

 

 

You can use HTML 5 with XHTML syntax, it's referred to as "XHTML 5". HTML 5 will not be going anywhere, it's referred to as the "Living Standard". The computer world is always updating, if you don't keep up you end up in technical debt. It's alright if your job isn't web development, but if you do it as a job you have to keep up to date.

Phones already have a lot of pixels, but they don't represent websites at their native resolution because text would be way too small to read, instead phones act as if they had fewer pixels so that the text is large enough to be readable on them. It's up to you if you want to keep your sites as they are, but if you have stakes in your websites it would do good to make them mobile-friendly.

12 hours ago, brunogiubilei said:

use this:

<a href="javascript:void(0);"></a>

with this, you pass to the function href a none parameter

Never do this. It's merely a piece of code people copied and pasted from other people, generation to generation. Do you know what "javascript:void(0)" means?