anchor
elements to link to content outside of your web page.
-anchor
elements need a destination web address called an href
attribute. They also need anchor text. Here's an example:
+You can use a
(anchor) elements to link to content outside of your web page.
+a
elements need a destination web address called an href
attribute. They also need anchor text. Here's an example:
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
Then your browser will display the text "this links to freecodecamp.org" as a link you can click. And that link will take you to the web address https://www.freecodecamp.org.
anchor
elements can also be used to create internal links to jump to different sections within a webpage.
+a
(anchor) elements can also be used to create internal links to jump to different sections within a webpage.
To create an internal link, you assign a link's href
attribute to a hash symbol #
plus the value of the id
attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id
attribute to the element you are linking to. An id
is an attribute that uniquely describes an element.
Below is an example of an internal anchor link and its target element:
<a href="#contacts-header">Contacts</a>diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md index b062f85747..3253249aab 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md @@ -11,10 +11,10 @@ You can nest links within other text elements.
...
<h2 id="contacts-header">Contacts</h2>
<p>Let's break down the example: Normal text is wrapped in the
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>
p
element:<p> Here's a ... for you to follow. </p>
-Next is the anchor
element <a>
(which requires a closing tag </a>
):<a> ... </a>
+Next is the anchor element <a>
(which requires a closing tag </a>
):<a> ... </a>
target
is an anchor tag attribute that specifies where to open the link and the value "_blank"
specifies to open the link in a new tab
href
is an anchor tag attribute that contains the URL address of the link:<a href="http://freecodecamp.org"> ... </a>
-The text, "link to freecodecamp.org", within the anchor
element called anchor text
, will display a link to click:<a href=" ... ">link to freecodecamp.org</a>
+The text, "link to freecodecamp.org", within the a
element called anchor text
, will display a link to click:<a href=" ... ">link to freecodecamp.org</a>
The final output of the example will look like this:Here's a link to freecodecamp.org for you to follow.
#
as your a
element's href
-Place the existing image element within an anchor
element.
+Place the existing image element within an a
(anchor) element.
Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.