When creating a fully clickable div, remember to close the <a> tag where it starts

I am trying to make the entire div clickable, but when I embed my div code within an anchor tag, it doesn't seem to be clickable at all. Even upon checking the console, it appears that the anchor tag is closing right after opening. Can someone please provide assistance? Thank you in advance.

<a href="#">
    <div class="row">

        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="post-media">
                <a href="#"><img src="upload/testi_01.png" alt="" class="img-responsive img-thumbnail"></a>
            </div>
            <!-- end media -->
        </div>
        <!-- end col -->

        <div class="col-md-6 col-sm-6 col-xs-12">
            <p> <strong>Name (fi / intermediary ? - entrepreneur to assist for bank finance)</strong> </p>
            <p> <i class="fa fa-building"></i>&nbsp;&nbsp; Industry </p>
            <p> <i class="fa fa-tag"></i>&nbsp;&nbsp; Type Of Finance </p>
            <p> <i class="fa fa-inr"></i>&nbsp;&nbsp; Amount </p>
            <p> <i class="fa fa-map-marker"></i>&nbsp;&nbsp; location </p>
        </div>
        <!-- end col -->

        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="job-meta">
                <i class="fa fa-calendar"></i>
                <p>13th Feb, 2018</p>
            </div>
            <!-- end meta -->
        </div>
        <!-- end col -->

        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="job-meta text-center">
                <a href="#" class="btn btn-success btn-block">Connect Now &nbsp;&nbsp; <i class="fa fa-check"></i></a>

            </div>
        </div>

        <!-- end col -->
    </div>
    <!-- end row -->
</a>
javascriptjqueryhtmlcss

Answer №1

The way you structured your code is incorrect - nesting a tags is not allowed. You cannot have one a tag inside another.

A more effective approach would be to attach a click handler to the div element, and then use that to activate the a tag nested within it.

Answer №2

According to the HTML specification, links and anchors defined by the A element should not be nested. An A element should not contain any other A elements.

https://i.sstatic.net/K1Acg.png

The W3C specification explicitly states in section 12.2.2 that nested links are considered illegal.

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

Is Node.js and Express a suitable server-side package for a WebGL web application?

Currently, I am in the process of creating a webgl application. While using mongoDB for my database and three.js as my webgl library has been helpful during development, I find myself unsure about which server-side technology to incorporate into the appl ...

javascriptnode.jsexpressthree.jswebgl

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Alright: Sound.find({ what: req.query.what, where: req.query.where, date: req.query.date, hour: req.query.hour}, function(err, varToStoreResult, count) { //perform some actions }); Let's consider a scenario where only req.query.what has a ...

javascriptnode.jsmongodbexpressmongoose

Generating a JavaScript array using concealed data

var a1=$("#orderprogress").val().toFixed(2);//a1=50 var a2=$("#poprogress").val().toFixed(2); //a2=70 If I were to create an array in this format, how should I proceed? graphData = new Array( [a1 value,'#222222'],//[50,'#22222 ...

javascriptjqueryarrays

Implement an AJAX call to update the database using PHP

My bootstrap button is set up like this: <button type="button" id="turnOff" class="btn">Turn Off</button> When clicked, it triggers an ajax function in "bootstrap.min.js". Here is the ajax function in action: $('#turnOff').click(f ...

javascriptphpjqueryajaxtwitter-bootstrap

Modify an HTML document using a PHP script

I am creating a website that automatically generates an HTML template with some customizable text through a form. However, I want the ability to retrieve that text in the form after pressing a button or taking some action, so it can be edited. I've ...

phphtml

Using Three.js to rotate a sphere (globe) to a different location (city) on the sphere's surface

Currently, I am in the process of creating a spherical globe with predefined locations that are geo-mapped and represented as points. My goal is to highlight these locations by smoothly rotating the globe along its y-axis from one point to another. Despite ...

javascript3dthree.jswebgl

Error message: "Unable to access property 'scrollIntoView' of undefined - encountered in VueJS"

Currently, I am tackling an issue in my VueJS project where I need to delete a topic and then smoothly scroll to the next item after the deletion process is completed. Below is the code snippet I am using: deleteTopic: function (index) { ...

javascriptvue.js

AngularJS / JQuery - input field with no corresponding label

I am encountering an issue with "Form input without an associated label". This problem is occurring on [textarea], [select], and [input] elements. Below is the code I am using: <div class="panel-body"> <form name="f" data-ng-submit="addTodo()"&g ...

javascriptjqueryangularjsintellij-ideawebstorm

Assign the values from the axios response to variables within the exported const

Currently, I am incorporating axios into my vue.js application to perform an HTTP POST request and retrieve some variables for a vue-echart. However, I have encountered a bit of a roadblock in determining the most effective approach. The snippet below is ...

javascriptvue.jsaxios

Tips for refreshing a page upon submission

My Bootstrap Modal contains a form with Submit and Cancel buttons. The cancel button is working correctly and closes the Modal successfully. However, when I click on the Submit Button, the form submits successfully to the Web Service but the Modal does not ...

javascriptjqueryhtmlformstwitter-bootstrap

The presence of an iframe disrupts the order of the

I have a website () that utilizes CSS to keep the header, menu, and footer fixed while allowing the content to scroll. Recently, I added a photo page using an iframe and it seems to be working well (although some adjustments are still needed for different ...

htmliframe

Utilize Jquery to interact with Android's date picker interface

Currently, I am developing an application for IOS and Android using Phonegap with Cordova 2.2.0. In my development process, I am utilizing jQuery and HTML5 technologies. While working on the IOS version, I found that simply setting the input type to "dat ...

javascriptandroidjquerycordovadatepicker

Updating table rows with fresh data using jQuery

I'm having issues replacing a table with new data retrieved via ajax. The initial replacement works fine, but subsequent attempts result in duplicate rows being added instead of the existing ones getting replaced. Below is a snippet of my code: ...

jqueryajaxhtml-table

The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without suc ...

htmlcss

angular data binding returning the identifier instead of the content

I have been dealing with managed fields retrieved from a web server in the following format: { "fields":{ "relationshipStatus":[ { "fieldId":4, "name":"Committed" }, { "fieldId":2, ...

javascriptangularjsjsonangular-template

Vertically centering elements within columns using CSS Grid

I attempted to bring a unique design to life using CSS Grid. While initially exploring Isotope JS for the same layout, I encountered some difficulties. Eventually, I was able to achieve a close representation of the design through CSS grid. There are a to ...

csscss-grid

The function assigned to [variable].onclick is not being executed, despite no errors being displayed in the console

I'm new to javascript and I'm looking for help with a simple task. I want to create a code that when clicking on an image, it will open in a modal. This feature is important for viewing full-size images on my portfolio. Although there are no erro ...

javascriptcsssimplemodal

"Error: The chai testing method appears to be improperly defined and is not

I am trying to set up a Mocha and Chai test. Here is my class, myClass.js: export default class Myclass { constructor() {} sayhello() { return 'hello'; }; } Along with a test file, test.myclass.js: I am attempting to a ...

javascriptunit-testingmocha.jschai

Tips for changing the anchor tag color without the cursor hovering over it

Hello, I am learning CSS and I've been practicing some coding. #IconHover:hover { background-color: #F18B13; color: #fff; height: 50px; width: 180px; } a:hover { color: #fff; text-decoration: none; } <table id="IconHo ...

css

Here's how to use the useState hook directly in your React components without

Currently, I am using the code snippet below to import useState: import * as React from 'react' import {useState} from 'react' I wanted to see if there is a way to condense this into one line, so I attempted the following: import * a ...

javascriptreactjstypescript