Is there a way to create interconnections in all the HTML code I produce, without needing to use

Here is the code I am currently using. Strangely, everything below MSN.com turns into a link. I have double-checked my CSS and suspect that the issue lies there. However, I wanted to first explore if there might be an underlying problem in the HTML side of things?

<a href="http:msn.com" target="blank"><img class="makeBlock" src="images/scenery.jpg" alt="This is a clickable image"></a><br><br>
<!-- One way to utilize this functionality is to have a nice image button saved and use that to link to stuff -->

<!-- An array of images that are thumbnail size that can be clicked to go to a new window for the bigger version -->
<a href="http://yahoo.com" target="blank"><img src="images/scenery.jpg" alt="thumbnail size to link" width="width 52" height="70">
<a href="http://yahoo.com" target="blank"><img src="images/scenery.jpg" alt="thumbnail size to link" width="width 52" height="70">
<a href="http://yahoo.com" target="blank"><img src="http://freeforcommercialuse.net/wp-content/uploads/2017/08/msp_1701_4269.jpg" alt="thumbnail size to link" width="width 52" height="70">
<a href="http://yahoo.com" target="blank"><img src="images/scenery.jpg" alt="thumbnail size to link" width="width 52" height="70">
<a href="http://yahoo.com" target="blank"><img src="images/scenery.jpg" alt="thumbnail size to link" width="width 52" height="70">
<a href="http://google.com" target="blank"><img src="images/scenery.jpg" alt="thumbnail size to link" width="width 52" height="70">

<br>
<br>

</div>

<!-- The following creates an image map using coordinates so users can click on different areas and go to diverse locations -->

<img src="http://freeforcommercialuse.net/wp-content/uploads/2017/08/msp_1701_4269.jpg" usemap="#scenery">
<map name="scenery">
<area shape="rect" alt="Left side strong side" coords="0,10,536,614" href="https://nba.com" target="blank"></area>
</map>

<!-- An unordered list is known as a bullet list. An ordered list uses numbers -->

<ul>
    <li>Sun</li>
    <li>Moon</li>
    <li>Test</li>
</ul>

<ol>
    <li>Ordered Sun</li>
    <li>Ordered Moon</li>
    <li>Ordered Test</li>
</ol>

<table>
    <tr>
        <td>Apples R1C1</td>
        <td>Oranges R1C2</td>
    </tr>
    <tr>
        <td>Pears R2C1</td>
        <td>Peaches R2C2</td>
    </tr>
</table>

Answer №1

Make sure to add closing tags for all anchor elements in your code. The correct structure should be <a></a>.

Here's an example using one of your previous examples:

<a href="http://google.com" target="_blank">
   <img src="images/nature.jpg" alt="thumbnail linking to image" width="50" height="70">
</a>

Answer №2

It appears that you consistently forget to properly close your a tags with the </a> closing tag.

Answer №3

The closure of the </a> tag in your code is not done correctly.

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

I find the SetInterval loop to be quite perplexing

HTML <div id="backspace" ng-click="deleteString(''); decrementCursor();"> JS <script> $scope.deleteString = function() { if($scope.cursorPosVal > 0){ //$scope.name = $scope.name - letter; ...

Displaying the Form div again without refreshing the page after a success message is shown through PHP AJAX

I am new to PHP and Ajax. My goal is to submit a form without refreshing the page, which I have successfully achieved. However, after submitting the form, a success message is displayed. What I want is for the success message to fade out and then show the ...

"Implementing a 960 Grid System with an HTML5 Header Element

Exploring 960.gs and HTML5 as a beginner has led to some challenges. My current project involves an image spanning 2 grid units, followed by a div taking up 5 units on the same line, with a line break needed before displaying a heading. I attempted the la ...

Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

I am looking to align 3 divs inside a container div, with the arrangement of [LEFT] [CENTER] [RIGHT]. The container div should be 100% wide without a fixed width, and I want the center div to stay centered even when resizing the container. The left and ...

Make the navigation arrow bigger in bootstrap 4

I need help creating a carousel with two navigation arrows in Bootstrap 4. Below is the code for the carousel controls: <!-- Carousel controls --> <a class="carousel-control left carousel-control-prev" href="#myCarousel" ...

What could be the reason behind the appearance of borders in my modal window?

I can't seem to find the source of the 2 silver borders in my modal. I've checked the CSS code, tried using developer tools, and looked through the entire code but still can't figure it out. Here is the JSX code I'm working with: impor ...

Tips on automatically populating a textbox without the need for a button click

I am currently using the following code: <input type="text" value="<?php echo empty($this->session->store['actual_info']['actual_total_marketing_budget']) ? '' : $this->session->store['actual_info' ...

Integrate the ID attribute in CSS to create a scrolling background

I resorted to using Google Translate, so please don't inquire why. Currently, I'm working on a script where I am attempting to incorporate a variable (using JavaScript) into a CSS file. <span id="s-map"></span> {background: ...

The text and buttons exceed the size limits of the popup box

Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom. Everything within the box looks fine on screen resolu ...

Maintain the div in its current location when zooming the map

I created a multi-layer map and added a div to it. However, the issue arises when I zoom in on the image, causing the div to change its position unexpectedly. For example, if I place the div over India and then zoom and drag the image, the div ends up in U ...

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

Activate Click, or Pop-up Box

I've been attempting to log in to the Udemy site using JavaScript, but I'm having trouble triggering the click action on the "log in" link. Unfortunately, the .click() method doesn't seem to be working when I try to select the element. The l ...

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

Inserting jQuery into a Div container

I am attempting to execute a jQuery function within a dynamically generated div (subpage) through JavaScript. I'm relatively new to this, so please bear with me. Within the index.html file, I am filling a div using a JavaScript load command. <ul& ...

ul background transparency only works with absolute positioning if using a Transparent PNG

Encountering a strange issue was the order of the day, as I found myself faced with an unordered list featuring a background image in the form of a semi-transparent PNG. To my surprise, the transparency only became visible once I designated the unordered l ...

Troubleshooting issues with mail subscriptions using Ajax and PHP

My Idea for Implementation I successfully set up a subscription form using PHP initially. However, I wanted to enhance the user experience by implementing an Ajax feature that would display a nice image and a "thank you" message without reloading the pag ...

Steps for using selenium to select a radio button

Looking to leverage Selenium in Python 3.9 for button clicking automation. Link to the website https://i.stack.imgur.com/KWsKG.png The goal is to click on "Effective Date", then select "July 2021", and finally click "OK". Initially, the first two steps ...

Drop and drag to complete the missing pieces

Here is a drag and drop fill in the blanks code I created. The challenge I'm facing is that I want users to be able to correct their mistakes by moving words to the right place after receiving points. <!DOCTYPE HTML> <html> <head&g ...

Tips for customizing the appearance of a specific cell in the first column of a Material UI table

Currently, I am modifying the material ui table found in this codesandbox link. My goal is to adjust the style of the first column's cell in the table when it is selected to match the image provided below. https://i.sstatic.net/DGubN.png It seems lik ...