{"id":18774,"date":"2020-07-01T04:11:10","date_gmt":"2020-07-01T11:11:10","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18774"},"modified":"2020-12-29T13:06:17","modified_gmt":"2020-12-29T21:06:17","slug":"html-image-links","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-image-links\/","title":{"rendered":"How to Create HTML Image Links"},"content":{"rendered":"\n

Images are common components of any web page. They are also a great way to create a link to another page. By using a combination of anchor tags with an href attribute and image tags, we can create an image that works as a link between two pages. You can accomplish this by following the steps below: <\/p>\n\n\n\n

<\/p>\n\n\n\n

  1. Create a div element. This will hold our image element, our anchor tag and anything else we might want to use to describe the link. <\/li>
  2. Next, create an anchor tag. <a> tags have hypertext references (href\u2019s) that point a link to another page. Set the href to whichever site or file you want your link to go to. <\/li>
  3. In between the opening and closing <a> tag, let\u2019s create an <img> tag. Remember that image tags are self-closing. Add an attribute called src<\/em><\/strong> <\/em>that will point to the url or path to the image you are using for your link. <\/li>
  4. Create something that will describe the image so the user knows it\u2019s clickable. This could be a <caption> tags, a <div> tags, an <h2> element, a <p> tag \u2013 whatever you want it to be.<\/li><\/ol>\n\n\n\n

    A working sample is in the code editor below. Definitely take some time to play around with it! 
    <\/p>\n\n\n\n

    <!DOCTYPE html>\n<html lang="en">\n<head>\n   <meta charset="UTF-8">\n   <meta name="viewport" content="width=device-width, initial-scale=1.0">\n   <title>Image Link<\/title>\n   <style>\n       div {\n           width: 500px;\n           display: flex;\n           flex-flow: column wrap;\n       }\n       img {\n           width: 100%;\n       }\n       caption {\n           width: 100%;\n           height: 50px;\n       }\n   <\/style>\n<\/head>\n<body>\n   <div>\n       <a href="https:\/\/www.goldengate.org\/" target="_blank" referrerpolicy="no-referrer">\n           <img src="https:\/\/images.unsplash.com\/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Golden Gate Bridge"  refer\/>\n       <\/a>\n       <caption>\n           An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge.\n       <\/caption>\n \n   <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    One final note: It is tempting to put an <a><\/code> only around the caption \u2013 since that\u2019s what the link is referring to. Users have come to expect that if they click on a picture, a new tab will open with the link destination (this is what the target=\u201d_blank\u201d syntax is doing). So, keep the <a><\/code> tag surrounding the link and leave the text to describe the picture \u2013 or put the <a><\/code> tag around both the text and <img><\/code>. Both ways are viable options. <\/p>\n\n\n\n