Shadowing Practice: HTML Links and Navigation Explained | HTML for Beginners #5 - Learn English Speaking with Video
Choose a practice mode
Each mode opens a full-screen practice room.
86 sentences
If sentences are too short or too long, click Edit to adjust them.
1
Welcome back to TechAura!
2
Imagine visiting a website and finding absolutely no clickable links.
3
You couldn't visit another page, open an article, or navigate to another website.
4
That would make browsing the internet pretty difficult, right?
5
Luckily, HTML gives us something called hyperlinks.
6
They're what make it possible to connect web pages together.
7
Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.
8
Let's get started.
9
Let's start with the basics.
10
A HTML link, also called a hyperlink, connects one web page to another resource.
11
That resource could be another web page, a website, a document, or even a specific section of the current page.
12
When you click a link, your browser follows its destination.
13
This is one of the most important features of the World Wide Web.
14
But how do we create one?
15
Let's find out!
16
To create a link in HTML, we use the A element.
17
A stands for anchor.
18
Here's a simple example.
19
We start with the opening A tag.
20
Inside it, we have something called an attribute.
21
It's called href.
22
href specifies where the link should take the user.
23
In this example, the destination is Google's website.
24
Then, between the opening and closing tags, we write the text that users can click.
25
Here, it's visit Google.
26
Finally, we close the A element.
27
Now, let's see the result.
28
And that's it, you've just created your first HTML hyperlink.
29
Let's take a closer look at href.
30
href is short for hypertext reference.
31
It tells the browser the destination of the link.
32
There are different ways to use it.
33
First, we have external links links.
34
These take users to another website.
35
For example, when someone clicks this link, the browser navigates to YouTube.
36
Next, we have internal links.
37
These take users to another page within your own website.
38
For example, this link points to a page called About HTML.
39
Notice that we don't need to write the complete website address when linking to a page in the same website.
40
The browser uses the relative path to find the destination.
41
Now, what if you want a link to open in a new browser tab instead of replacing the current page?
42
HTML provides an attribute called target.
43
When we use target with the value blank, the browser opens the destination in a new tab or window.
44
Here's an example.
45
We add target equals blank inside our anchor tag.
46
And that's all.
47
But there's one more detail worth knowing.
48
For external links that open in a new tab, adding rel equals no opener is a good security practice.
49
It prevents the newly opened page from accessing the original page through the browser's opener property.
50
So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.
51
Now, let's use everything we've learned to create something practical.
52
A navigation menu.
53
Most websites have a navigation menu at the top.
54
It helps visitors move between different sections or pages.
55
To create one, we use the nav element.
56
Nav represents a section of a web page containing navigation links.
57
Inside it, we add our anchor elements.
58
Let's create four links.
59
The home link, the about link, the services link, and the contact link.
60
Each link has its own destination.
61
And just like that, we've created a simple HTML navigation menu.
62
Now, you might be wondering why the menu doesn't look very beautiful.
63
That's because we're only using HTML.
64
We'll learn how to style navigation menus using CSS in a future lesson.
65
Here's another useful trick.
66
You can create a link that takes visitors directly to a specific section of the same web page.
67
We call this an anchor link.
68
First, we give an element a unique ID.
69
In this example, our heading has an ID called contact.
70
Then, we create a link using href with a hashtag followed by that ID.
71
When someone clicks the link, the browser navigates to the element with the matching ID.
72
This is especially useful for long articles, frequently asked questions, and table of contents sections.
73
Now it's your turn, let's test what you learned.
74
Your challenge is to create a simple navigation menu for your own website.
75
It must contain a home link, an about link, a contact link, one external link to Google,
76
and one link that takes visitors to a specific section of your web page.
77
Pause the video and try writing the code yourself.
78
Excellent!
79
You've just created your first navigation menu and learned how to connect different pages and sections.
80
You're making great progress!
81
And that's everything for Episode 5!
82
Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.
83
In our next episode, we'll discover how to add images to web pages using HTML.
84
Don't forget to subscribe to TechHora.
85
Keep learning, keep building, and stay curious.
86
See you in episode 6!
Download App
Everything you need to speak fluently
AI PronunciationScore every sentence
IPA PracticeMaster every sound
VocabularyBuild your word bank
Vocab GameLearn while playing
FOR YOU
Recommend Video
B12
291 sentences
HTML Tag Text Basics | HTML5 Element Text Tutorial
Daily ConversationUniversity Students
A28
103 sentences
English Podcast - Level A1 - A2 | Your Future With English
Travel EnglishTeensDaily Conversation
B21
103 sentences
you will never ask about pointers again after watching this video
Daily ConversationUniversity Students
B11
347 sentences
React Native for Beginners tutorial
Daily ConversationUniversity Students
B11
92 sentences
Understanding the Elements of Design | Graphic Design Basic
Daily ConversationUniversity Students
B11
371 sentences
Learn 97% of Harvard's CS50 in 25 minutes
Daily ConversationUniversity Students
B26
24 sentences
Usability Heuristic 3: User Control & Freedom
Daily ConversationUniversity StudentsWorking Adults
B21
22 sentences
Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)
Daily ConversationUniversity Students
B2120 sentences
LINUX isn't Hard Once You Understand This (File Directories)
Daily ConversationUniversity Students
C11
466 sentences
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Daily ConversationUniversity Students
B1119 sentences
Links | HTML | Tutorial 8
Daily ConversationUniversity Students
B114 sentences
The Internet and Us
Daily ConversationUniversity Students
Vocabulary and speaking notes for this lesson
This speaking lesson is built on the video “HTML Links and Navigation Explained”. The speaker keeps coming back to these words: link, page, create, website, Html. This video has 86 sentences and 824 words to shadow. The speech runs for 5:20. The speaker talks at a natural 154 words per minute, close to everyday conversation. Only 79% of the words are among the 3,000 most common in English, so the vocabulary is demanding.
Key vocabulary in this video
15 words from the video worth learning, with pronunciation and meaning:
| Word | Pronunciation | Meaning |
|---|---|---|
| menu noun | /ˈmɛn.juː/ | The details of the food to be served at a banquet; a bill of fare. |
| navigation noun | /nævɪˈɡeɪʃən/ | The theory, practice and technology of charting a course for a road vehicle, ship, aircraft, or spaceship. |
| destination noun | /dɛstɪˈneɪʃən/ | The place set for the end of a journey or to which something is sent; place or point aimed at. |
| browser noun | /ˈbɹaʊ.zəɹ/ | One who or which browses. |
| element noun | /ˈɛləmənt/ | One of the simplest or essential parts or principles of which anything consists, or upon which the constitution or fundamental powers of anything are based. |
| anchor noun | /ˈæŋ.kəː/ | A tool used to moor a vessel to the bottom of a sea or river to resist movement. |
| navigate verb | /ˈnæv.ɪ.ɡeɪt/ | To plan, control and record the position and course of a vehicle, ship, aircraft, etc., on a journey; to follow a planned course. |
| connect verb | /kəˈnɛkt/ | To join (to another object): to attach, or to be intended to attach or capable of attaching, to another object. |
| visitor noun | /ˈvɪzɪtɚ/ | Someone who visits someone else; someone staying as a guest. |
| attribute noun | /ˈæt.ɹɪˌbjut/ | A characteristic or quality of a thing. |
| resource noun | /ɹɪˈzɔːs/ | Something that one uses to achieve an objective, e.g. raw materials or personnel. |
| blank noun | /ˈblæŋk/ | The white spot in the centre of a target; hence (figuratively) the object to which anything is directed or aimed, the range of such aim. |
| practical adjective | /ˈpɹæk.tɪ.kəl/ | Relating to, or based on, practice or action rather than theory or hypothesis. |
| relative noun | /ˈɹɛl.ə.tɪv/ | Someone connected by blood, marriage, or adoption; someone in the same family. |
| trick noun | /ˈtɹɪk/ | Something designed to fool, dupe, outsmart, mislead or swindle. |
Phrasal verbs you will hear
| Word | Meaning |
|---|---|
| find out verb | To discover, as by asking or investigating. |
Grammar in this video
The structures the speaker uses most, with the exact words from the video:
| Structure | In the video |
|---|---|
| Present perfect have/has + past participle — a past action that still matters now | you've just created · we've learned · we've created |
| Future with “will” will + verb — a decision, promise or prediction | you'll learn · We'll learn · we'll discover |
| Present continuous am/is/are + -ing — something happening right now or around now | we're only using · You're making |
| Obligation: must / have to / need to saying that something is necessary | need to write · must contain |
Pronunciation to watch
The speaker uses 14 contractions and reduced forms, such as don't, we'll, we've. Say them the short way, as you hear them.
- The “sh” and “zh” sounds: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
- Long words — get the stress right: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/
How to practise with this video
- Listen to the whole video once without speaking and note the words you do not know.
- Start at 0.75× speed, shadow it sentence by sentence, then go back to normal speed once it feels easy.
- Record yourself and compare with the original, paying attention to words like menu, navigation, destination.
What is the Shadowing Technique?
Shadowing is a science-backed language learning technique originally developed for professional interpreter training and popularized by polyglot Dr. Alexander Arguelles. The method is simple but powerful: you listen to native English audio and immediately repeat it out loud — like a shadow following the speaker with just a 1–2 second delay. Unlike passive listening or grammar drills, shadowing forces your brain and mouth muscles to simultaneously process and reproduce real speech patterns. Research shows it significantly improves pronunciation accuracy, intonation, rhythm, connected speech, listening comprehension, and speaking fluency — making it one of the most effective methods for IELTS Speaking preparation and real-world English communication.