シャドーイング練習: HTML Links and Navigation Explained | HTML for Beginners #5 - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

各モードは全画面の練習ルームで開きます。

86 文

文が短すぎたり長すぎる場合は、Editをタップして調整してください。

Welcome back to TechAura!

Imagine visiting a website and finding absolutely no clickable links.

You couldn't visit another page, open an article, or navigate to another website.

That would make browsing the internet pretty difficult, right?

Luckily, HTML gives us something called hyperlinks.

They're what make it possible to connect web pages together.

Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.

Let's get started.

Let's start with the basics.

A HTML link, also called a hyperlink, connects one web page to another resource.

That resource could be another web page, a website, a document, or even a specific section of the current page.

When you click a link, your browser follows its destination.

This is one of the most important features of the World Wide Web.

But how do we create one?

Let's find out!

To create a link in HTML, we use the A element.

A stands for anchor.

Here's a simple example.

We start with the opening A tag.

Inside it, we have something called an attribute.

It's called href.

href specifies where the link should take the user.

In this example, the destination is Google's website.

Then, between the opening and closing tags, we write the text that users can click.

Here, it's visit Google.

Finally, we close the A element.

Now, let's see the result.

And that's it, you've just created your first HTML hyperlink.

Let's take a closer look at href.

href is short for hypertext reference.

It tells the browser the destination of the link.

There are different ways to use it.

First, we have external links links.

These take users to another website.

For example, when someone clicks this link, the browser navigates to YouTube.

Next, we have internal links.

These take users to another page within your own website.

For example, this link points to a page called About HTML.

Notice that we don't need to write the complete website address when linking to a page in the same website.

The browser uses the relative path to find the destination.

Now, what if you want a link to open in a new browser tab instead of replacing the current page?

HTML provides an attribute called target.

When we use target with the value blank, the browser opens the destination in a new tab or window.

Here's an example.

We add target equals blank inside our anchor tag.

And that's all.

But there's one more detail worth knowing.

For external links that open in a new tab, adding rel equals no opener is a good security practice.

It prevents the newly opened page from accessing the original page through the browser's opener property.

So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.

Now, let's use everything we've learned to create something practical.

A navigation menu.

Most websites have a navigation menu at the top.

It helps visitors move between different sections or pages.

To create one, we use the nav element.

Nav represents a section of a web page containing navigation links.

Inside it, we add our anchor elements.

Let's create four links.

The home link, the about link, the services link, and the contact link.

Each link has its own destination.

And just like that, we've created a simple HTML navigation menu.

Now, you might be wondering why the menu doesn't look very beautiful.

That's because we're only using HTML.

We'll learn how to style navigation menus using CSS in a future lesson.

Here's another useful trick.

You can create a link that takes visitors directly to a specific section of the same web page.

We call this an anchor link.

First, we give an element a unique ID.

In this example, our heading has an ID called contact.

Then, we create a link using href with a hashtag followed by that ID.

When someone clicks the link, the browser navigates to the element with the matching ID.

This is especially useful for long articles, frequently asked questions, and table of contents sections.

Now it's your turn, let's test what you learned.

Your challenge is to create a simple navigation menu for your own website.

It must contain a home link, an about link, a contact link, one external link to Google,

and one link that takes visitors to a specific section of your web page.

Pause the video and try writing the code yourself.

Excellent!

You've just created your first navigation menu and learned how to connect different pages and sections.

You're making great progress!

And that's everything for Episode 5!

Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.

In our next episode, we'll discover how to add images to web pages using HTML.

Don't forget to subscribe to TechHora.

Keep learning, keep building, and stay curious.

See you in episode 6!

アプリをダウンロード

流暢に話すために必要なすべて

AI発音採点文ごとに採点

IPA練習すべての音をマスター

単語学習自分の単語帳を作る

単語ゲーム遊びながら覚える

QRをスキャン

Download on theApp Store Get it onGoogle Play

FOR YOU

このレッスンの語彙とスピーキングのポイント

このスピーキングレッスンは、動画「HTML Links and Navigation Explained」を教材にしています。繰り返し出てくる語は次のとおりです：link, page, create, website, Html。この動画には、シャドーイング用の文が86文、単語が824語あります。音声の長さは5:20です。話す速さは1分あたり約154語で、日常会話に近い自然なペースです。英語の頻出3,000語に含まれる単語は79%だけなので、語彙は難しめです。

この動画の重要語彙

動画に出てくる覚えておきたい単語15語を、発音と意味つきで紹介します。

単語	発音	意味
menu 名詞	/ˈmɛn.juː/	メニュー, お品書き
navigation 名詞	/nævɪˈɡeɪʃən/	ナビゲーション, 航法
destination 名詞	/dɛstɪˈneɪʃən/	目的地
element 名詞	/ˈɛləmənt/	要素, エレメント
anchor 名詞	/ˈæŋ.kəː/	錨
connect 動詞	/kəˈnɛkt/	繋げる
visitor 名詞	/ˈvɪzɪtɚ/	訪問者, 客人
attribute 名詞	/ˈæt.ɹɪˌbjut/	性質
resource 名詞	/ɹɪˈzɔːs/	資源, 資産
practical 形容詞	/ˈpɹæk.tɪ.kəl/	実践的な
relative 名詞	/ˈɹɛl.ə.tɪv/	親戚, 身内
trick 名詞	/ˈtɹɪk/	欺き, 企み
lesson 名詞	/ˈlɛs.ən/	授業, 学科
curious 形容詞	/ˈkjʊɹ.i.əs/	好奇心の強い, 知りたがる
discover 動詞	/dɪˈskʌvə/	発見する, 見つける

動画に出てくる句動詞

単語	意味
find out 動詞	見出す, 調べる

この動画の文法

話し手がよく使っている文型を、動画の実際の表現とともに紹介します。

文型	動画での表現
現在完了形 have/has + 過去分詞 — 過去の出来事が今も関係している	you've just created · we've learned · we've created
「will」の未来表現 will + 動詞 — その場の決定、約束、予測	you'll learn · We'll learn · we'll discover
現在進行形 am/is/are + -ing — 今まさに、または最近起きていること	we're only using · You're making
義務：must / have to / need to 何かが必要であることを伝える	need to write · must contain

注意したい発音

話し手はdon't, we'll, we'veなど、短縮形や弱形を14回使っています。聞こえたとおりの短い形で発音しましょう。

「sh」と「zh」の音: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
長い単語（アクセントの位置に注意）: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/

日本語話者が苦手な音：

/r/ と /l/ の区別 — /l/ は舌先を歯茎につけ、/r/ はどこにもつけない: practical /ˈpɹæk.tɪ.kəl/, relative /ˈɹɛl.ə.tɪv/, hyperlink /ˈhaɪpə(ɹ)ˌlɪŋk/
/v/ — /b/ にならないように、上の歯を下唇に当てる: navigation /nævɪˈɡeɪʃən/, navigate /ˈnæv.ɪ.ɡeɪt/, visitor /ˈvɪzɪtɚ/, relative /ˈɹɛl.ə.tɪv/, discover /dɪˈskʌvə/
/f/ — 「フ」ではなく、上の歯と下唇で出す: define /dɪˈfaɪn/, specify /ˈspɛs.əˌfaɪ/

この動画での練習方法

まず声を出さずに動画を最後まで聞き、知らない単語をメモします。
まず0.75倍速で一文ずつシャドーイングし、慣れてきたら通常の速度に戻します。
自分の声を録音して元の音声と比べます。menu, navigation, destinationなどの単語に特に注意しましょう。

シャドーイングとは？英語上達に効果的な理由

シャドーイング（Shadowing）は、もともとプロの通訳者養成プログラムで開発された言語学習法で、多言語習得者として知られるDr. Alexander Arguelles によって広く普及されました。方法はシンプルですが非常に効果的：ネイティブスピーカーの英語を聞きながら、1〜2秒の遅延で声に出してすぐに繰り返す——まるで「影（shadow）」のように話者を追いかけます。文法ドリルや受動的なリスニングと異なり、シャドーイングは脳と口の筋肉が同時にリアルタイムで英語を処理・再現することを強制します。研究により、発音精度、抑揚、リズム、連音、リスニング力、そして会話の流暢さが大幅に向上することが確認されています。IELTSスピーキング対策や自然な英語コミュニケーションを目指す方に特におすすめです。

シャドーイングのやり方: ステップ別の完全ガイドを読む →

シャドーイング練習: HTML Links and Navigation Explained | HTML for Beginners #5 - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

アプリをダウンロード

おすすめ動画

HTML Tag Text Basics | HTML5 Element Text Tutorial

A1 English Listening Practice - The Internet

you will never ask about pointers again after watching this video

React Native for Beginners tutorial

Understanding the Elements of Design | Graphic Design Basic

Learn 97% of Harvard's CS50 in 25 minutes

Usability Heuristic 3: User Control & Freedom

Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)

DejaVue #E001 - The Need for Server-Side Rendering (SSR)

Google Colab for Python Beginners - Visually Explained

LINUX isn't Hard Once You Understand This (File Directories)

Links | HTML | Tutorial 8