All links in my code work except these ones-CodePudding

This is my html code sofar

<header>
    <div >
        <a href=""><img src="Images/samsung-logo.png" alt="Samsung Logo" width="150"></a>
        <ul >
            <a href=""><li>Contact</li></a>
            <a href="#assortiment-scroll"><li>Assortiment</li></a>
        </ul>
    </div>
</header>
<div >
        <video src="videos/S22-Ultra-unboxing.mp4" muted loop autoplay></video>
        <div >Nieuwe S22 Ultra</div>
        <a href=""><div >Discover</div></a>
</div>

The last link with work but the first 3 don't. Am I not seeing something or ...

EDIT: when I first started the project it did work. And I haven't changed anything to the header since.

To make it easier: https://jsfiddle.net/x7ewtvqu/

CodePudding user response：

<header>
    <div >
        <a href=""><img src="Images/samsung-logo.png" alt="Samsung Logo" width="150"></a>
        <ul >
            <li><a href="#">Contact</a></li>
            <li><a href="#">Assortiment</a></li>
        </ul>
    </div>
</header>
<div >
   <video src="videos/S22-Ultra-unboxing.mp4" muted loop autoplay></video>
   <div >Nieuwe S22 Ultra</div>            
   <div ><a href="#">Discover</a></div>
</div>

Element a not allowed as child of element ul in this context. Also when you using a div element a not allowed as a parent child.

CodePudding user response：

using div in a tag is semantically incorrect. You should use span tag.
don't use li in a tag. Use a in li tag.

if you want to use div in a tag just use:

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>

or use:

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

<header>
        <div >
        <a href=""><img src="https://media.istockphoto.com/vectors/abstract-business-arrow-up-logo-icon-vector-design-template-vector-id1140553971?k=20&m=1140553971&s=612x612&w=0&h=7-a1JjWAf8c5qKF46FRgdFg-3jva9qo80hqh0z_Y34A=" alt="Samsung Logo" width="150"></a>
        <ul >
            <li><a href="#">Contact</a></li>
            <li><a href="#assortiment-scroll">Assortiment</a></li>
        </ul>
    </div>
</header>

<div >
        <video src="videos/S22-Ultra-unboxing.mp4" muted loop autoplay></video>
        <div >Nieuwe S22 Ultra</div>
        <a href="#"><span >Discover</span></a>
</div>

CodePudding user response：

The reason why your anchor tags are not working is a combination of using display: inline; styles and position: absolute;. To fix this issue, update your styles to be accurate to this JSFiddle. I have also corrected some of your syntax.