Skip to main content

HTML Links and Images

Images can be used to display photos, logos and graphics on a webpage.

Use the a element to create a hyperlink.

<a href="page.html"results.php">GoView totournament Pageresults</a>

Result:Link text should describe the destination without relying on “click here”.

When clicked, the browser will open the specified page.

Linking to Another Website

Use a full web address when linking toFor an external website.link opened in a new tab:

<a href="https://www.google.example.com"
   target="_blank"
   rel="noopener">
    Visit Googlethe example website</a>

Result:

Only

Visit Google

Openingopen a Linknew tab when useful, and make the behaviour clear in asurrounding New Tab

Add the target="_blank" attribute.text.

<a href="https://www.google.com"
   target="_blank"
   rel="noopener noreferrer">

    Visit Google

</a>

Result:

Visit Google

The rel attribute improves security when opening new tabs.

Linking to an Email Addressand page sections

Use the mailto: protocol.

<a href="mailto:teacher@school.help@example.com">
    Email Teacherfictional support</a>
<a href="#testing">Jump to testing evidence</a>

<h2 id="testing">Testing evidence</h2>

Result:Use example.com addresses in demonstrations rather than real school or personal details.

Email

Images

Teacher

<img src="images/fictional-team.jpg"
     alt="Fictional Falcons team logo">

WhenAlternative clicked,text communicates the user'image’s emailpurpose. programA willdecorative open.

image

Creatinguses an Image

empty

Use the img element.alternative:

<img src="images/dog.jpg"divider.svg" alt="Photo of a dog"">

TheDo srcnot attributeput specifiesessential words only inside an image. Avoid using width and height attributes to distort the imageaspect location.ratio; use responsive CSS.

The alt attribute provides alternative text if the image cannot be displayed.

Photo of a Dog

Setting Image WidthFigures

Use the width attribute.

<img src="images/dog.jpg"
     width="100"
     alt="Photo of a dog">

The image will be displayed at 100 pixels wide.

Photo of a Dog

Responsive Images

A responsive image automatically scales to fit different screen sizes.

<img src="images/dog.jpg"
     style="max-width:100%;"
     alt="Photo of a dog">

This is useful for:

    Phones Tablets Laptops Desktop computers

    Using an Image as a Link

    Images can also be used as buttons.

    <a href="dogs.html"figure>
  <img src="images/dog.jpg"leaderboard-example.png"
       alt="Dog"Leaderboard with the Falcons ranked first on 12 points">
  <figcaption>Example leaderboard produced from fictional data.</figcaption>
</afigure>

    When

    Check

    the
    image Link text is clicked,meaningful. the browserExternal willnew open the specified page. Dog

    A commontabs use ofrel="noopener".

     Demonstrations use fictional addresses and data.  Informative images ishave displayingpurposeful aalternative websitetext. logo. 
    <img src="images/logo.png"
     width="200"
     alt="Company Logo">

    Creating an Image Gallery

    MultipleDecorative images canuse be displayed together.

    <img src="images/dog1.jpg"
     width="200"
     alt="Dog".
    1"> <img src="images/dog2.jpg" width="200" alt="Dog 2"> <img src="images/dog3.jpg" width="200" alt="Dog 3">

    Complete Example

    <!DOCTYPE html>

<html>

<head>
    <title>Links and Images</title> </head>resize <body>without <h1>Linksdistortion.
and
Images</h1>

    <a href="page.html">
        Internal Page
    </a>

    <br><br>

    <a href="https://www.google.com"
       target="_blank"
       rel="noopener noreferrer">

        Google

    </a>

    <br><br>

    <a href="mailto:teacher@school.com">
        Email Teacher
    </a>

    <br><br>

    <img src="images/dog.jpg"
         width="300"
         alt="Photo of a dog">

</body>

</html>

    Quick Reference

    <a href="page.html">

    <a href="https://website.com">

    New Tab

    target="_blank"

    <a href="mailto:someone@email.com">

    Image

    <img src="image.jpg"
     alt="Description">

    Image Width

    width="300"

    Responsive Image

    style="max-width:100%;"

    <a href="page.html">

    <img src="image.jpg">

</a>

    You now know how to create hyperlinks and display images in HTML.

    Next tutorial: HTML Lists and Tables

    Back to top