Start learning free

LESSON 3 OF 161 · FRONTEND: HTML

Links in JavaScript

Practice

A link is an a element. The words between its tags are what the visitor sees and clicks. Its href attribute says where the click goes:

<p><a href="/about.html">About us</a></p>

An href can point at three kinds of places. A path that starts with /, like /about.html, is another page of this same site. A whole address that starts with https:, like https://example.org/help, is a page on another site. And # with a name, like #contact, is a place on this same page: the element with id="contact".

Clicking a # link opens no new page. The address gets #contact at its end, and the browser scrolls to the element with that id. If no element has it, the browser has nowhere to go.

The check prints each link with where it goes, clicks See opening hours, and looks where the browser scrolls:

> open the page
  screen:
    heading 1: Corner Shop
    text: Mugs, lamps, plants and more, a short walk from home.
    link: Your cart -> /cart.html
    link: See opening hours -> #hours
    heading 2: Our products
    text: Eight things for home and office, from a $2 pen to a $50 gift card, and every price includes tax.
    heading 2: Opening hours
    text: Monday to Saturday, 9 am to 6 pm. We are closed on Sundays.
    link: How we deliver -> https://example.com/delivery
> click "See opening hours"
  screen: no change
> the address bar
  /#hours
> where the browser scrolls to
  h2 id="hours": Opening hours

Your task: under the first paragraph, add a paragraph with a link Your cart to /cart.html, and under it a paragraph with a link See opening hours to #hours. Above the hours paragraph, add the h2 Opening hours back, with id="hours". Under the hours paragraph, add a paragraph with a link How we deliver to https://example.com/delivery.


Assignment
Follow the Coding Tutorial to add three links to the shop's home page: one to another page of the site, one to a place on this page, and one to another site.


Hint
The href goes inside the opening tag, in quotes. The id is written without the #: the # belongs only in the link.


STEP 1 OF 4
    Ctrl + Enter to check

    Html Links in JavaScript

    Keep going with JavaScript1,600+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free