シャドーイング練習: HTML Tag Text Basics | HTML5 Element Text Tutorial - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

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

291 文

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

Hello and welcome.

Hi, I'm Dave.

This tutorial is part of a beginner's HTML series.

I'll be using the Chrome web browser, the Visual Studio Code editor, and the live server extension for Visual Studio Code to view the web page.

There are links to these tools, starter code files, and all resources in the description below.

Let's look at the basics of creating text content on a web page.

Now, web pages are a lot like essays or even a newspaper where they have headings and usually paragraphs of text,

or at least a sentence or two of text describing something afterwards.

So we see our paragraph element here and our H1 heading here.

Much of the text content on a web page will be made up of headings and paragraphs.

Now, headings have a hierarchy,

and that means we'll start out with only one H1 on the page and each page should only have one H1.

But after that, we can have subtopics.

So here I'm going to press

Shift Alt and the down arrow.

Again, I'm using Windows.

It may be different for you on Mac or Linux, but I just copied a line down.

So now I have two H1s, but I'm going to change this by typing H2 over that H1.

And notice how the ending tag immediately changed here in Visual Studio Code as well.

So that's helpful.

Now, this is a subtopic for the page.

So imagine this being the title of your essay or the big headline in a newspaper.

And then we have subtopics.

So for H2, I'm going to type something different.

Let's go with, I'm ready to learn HTML.

And now we can have a paragraph about that.

And so we do, at least we have a sentence.

This is my first web page.

Now I'm going to highlight this subheading, H2 and the paragraph.

And once again, I'm going to press

Shift Alt and the down arrow.

And it copies both lines down for me.

And I'll add an extra blank line here.

And I'm going to change this second H2 into an H3.

Now I'll use lowercase.

There we go.

Now we could have more than one H2 on the page.

But I wanted to show how you could have a subtopic under our subtopic.

So we have the title for our essay, and then we have an area of discussion that we've added an H2 as the heading for.

And now under this area of discussion, we could have further subtopics, and this is how we now have an H3.

So now instead of my first web page or I'm ready to learn HTML, let's change this to my daily schedule.

So this will discuss our schedule for learning HTML.

and then we can just say something about I'm going to tell you how

or let me tell you how I

and I'll just put some dots there for now just we'll expand on

that later if we want to but really what I'm showing is this hierarchy

and it's also important not just visually let me go ahead

and save this by pressing ctrl s or remember you can go to the file menu and choose save

visually we see

that it's naturally formatted larger on the page with the h1 than it is the h2

and then the h3 is even smaller than the h2

but we can change all of

that with css in the future css will really style how our web page looks

but what is important is we can quickly visually tell the headers apart right now

and when a screen reader

or other assistive technology looks at our code

then it can navigate the code through the headers of what is important here the header hierarchy

and that's why it's

so important to organize your page the headers actually give semantic meaning saying

this is the main topic this is a subtopic under the main topic

and this is a subtopic under the higher subtopic in the hierarchy

so headers do have semantic importance and that means giving meaning to our content

and of course then our paragraphs can just have whatever details

we want to add about those subtopics as well now even though we've created a little separation in our code

when we look at our page we just see line space line space

and we don't have a good visual separation i'm going to add an element

that doesn't really provide any semantic meaning

but visually it helps us on the page and

that is a horizontal rule element

and it's just added like this there is no closing tag for the horizontal rule

and then i'm going to add another one after our final subtopic discussion here so we can add something else underneath that

And so now let's save and look what the horizontal rule adds to the page.

now we have lines going across the page

and those are called horizontal rules so we have our main heading

and now we have our subtopic and i left the h3 in here

because it's a subtopic of this topic so now we can go ahead

and i'm going to highlight the h2 and the h3 ctrl c to copy

come down further on the page and paste and i'll save just so we can see what happens

Now we have two different subtopic sections and we still have our top hello world.

So you could picture this more like an essay page.

And of course, these could be paragraphs that have more text.

Or you could picture this more like a newspaper.

And then we would have an article here and an article here in our heading at the top.

This is also a good time to discuss white space.

So if I just press the space bar and add all these extra spaces to the page, if I save

Visual Studio Code, it is already going to probably reformat this.

But what is important to know when I save, you'll see, yes, it changed and it just went back and only left one space,

is web pages or HTML do not honor all those spaces you might add with a space bar.

It's called white space collapsing.

And so we can space many lines, but it won't really be represented on the page.

That is not how we add extra space in HTML.

So again, recognize white space collapsing that it will not last.

Now, something we can do is what's called a line break.

And that can be inserted inside a paragraph element.

So now I'll put, let me tell you how, and then I'm going to return remember we don't have to have the opening

and closing tags on the same line for an element we can nest other elements inside of an element

so I'm going to put a break and that stands for line break

and then I'll put three dots

and I'll say let me tell you how I learn more about web dev

100

and a period that looks good and now we can put another break

101

and I'll just put three more dots and say I plan out my schedule

102

and one more line break the three dots of course are not required it's just what I'm adding here

103

and then I'll say I use resources from MDN

104

which previously we discussed and

105

when I showed the definition of HTML we were looking at the Mozilla Developer Network and that's what MDN is.

106

So now if we save this file you can see we've got line breaks

107

and we're showing each of these details on separate lines.

108

Okay let's scroll down and change some of our second topic now.

109

So instead of I'm ready to learn HTML let's change our second subtopic to I am let me capitalize

110

that I am also planning a vacation

111

and now we can put some details about

112

that vacation in the paragraph underneath this subtopic

113

and I'll say I've been working hard and really need a getaway period

114

and let's see if we want to add anything underneath that yep

115

Let's add one more sentence.

116

And what I'm going to do once again is shift alt

117

and the down arrow and Visual Studio Code will copy that line down.

118

So now we can just change the sentence here and I'll say I live in Kansas.

119

So I want to visit a beach.

120

Kansas is nowhere near the ocean.

121

So that sounds pretty good.

122

So let's save that and now we can see our subtopic here changed

123

and we have a couple of sentences about planning the vacation

124

now let's change the my daily schedule subtopic at the h3 to places I'd like to visit

125

and I guess I could capitalize

126

that L on like there we go places I'd like to visit

127

and now I'll highlight that paragraph and say I've heard good things about the Caribbean.

128

Sounds like they have warm water and fun islands to visit.

129

Okay, so now we've got some extra details here and we can have more than one subtopic here.

130

So let's go ahead and do that.

131

Again, shift alt and the down arrow to copy that.

132

And places I want to avoid could be our next one.

133

So places I want to avoid.

134

And here we can put anywhere cold.

135

No way with an exclamation mark.

136

Okay.

137

So now we've got some extra detail here in our second area and this will allow me

138

to go ahead and show you the difference between block level elements and inline elements.

139

What we've been working with here are block level elements.

140

Notice with every paragraph and every heading, they start on a new line.

141

That is a block level element.

142

It creates space around it, which of course can be formatted in the future with CSS,

143

but it does not allow you to put another paragraph inside of a header

144

or a paragraph without creating that new line that space

145

so there will be a return essentially in your content

146

when you're using a block level element but

147

when you use an inline element that doesn't happen

148

so let's look at a couple of these first of all we can say I've been working really hard

149

and I've been working hard and really need a getaway let's emphasize

150

that really need a getaway and one inline element

151

that we can do that with is em and

152

that stands for emphasis that provides some semantic meaning once again

153

so now a screen reader or other assistive technology

154

or are just our browser overall knows we're emphasizing this really need a getaway

155

so let's save

156

and notice really need a getaway is italicized now we're not using

157

it for the italicized text again the formatting will come later with css

158

but that is just the natural behavior of using the emphasis

159

element as we wrap our text but it provides

160

that meaning now what if we really want to emphasize

161

that text it has a strong meaning to us like our no way here

162

we don't want to go anywhere cold well there is a strong element we can use for

163

that and here let me grab the ending tag and put it at the end of our no way.

164

And now I'll save and notice it got just a little bit bigger

165

and bolder here as far as the natural formatting of the strong element.

166

But again, this is an inline element.

167

It's inside the paragraph.

168

It did not create a break in the line.

169

It did not create any extra space around it.

170

So these are inline level elements and the other elements such as the header

171

and the paragraph we've been working with are block level elements.

172

Another type of content we can add to our page are HTML entities.

173

So they are things that are not really the normal text we would type out.

174

What, for example, if we wanted to show a less than or a greater than symbol on our page?

175

Right now, HTML interprets those as we're starting or ending a tag,

176

so we can't just easily put one of those on the page likewise there are some other symbols

177

or remember when i talked about white space collapsing

178

if we need a little bit of extra space there's an html entity for

179

that so i want to indent these three lines with a little bit of space

180

and i can use the html entity oh i still need the closing

181

there here we go an ampersand is usually what starts out an HTML entity

182

and now I'll type in B SP and a semicolon notice

183

Visual Studio code recognizes that right away and

184

if I save I have spaced this line over just a little bit

185

now I can add more than one of those if I want

186

so I'm going to copy that and I'm going to add two more

187

and now save and our line is over even a little further

188

so I will go ahead and select all three of these

189

and I'm going to paste them right after the line break on each line and save.

190

And now we have indented with some extra space all three of these lines with these HTML entities that create space.

191

But as I mentioned, there are other HTML entities as well.

192

So let's scroll down here to the bottom of our page.

193

And after this last topic, let's add another HR

194

and now we'll type and LT and a semicolon and

195

that stands for less than so

196

if we save now look

197

we have a less than symbol underneath the final horizontal rule here at the bottom of the page

198

I'm going to go ahead and copy that and paste two more

199

and then I'm going to add ampersand and copy with a semicolon, and that will be the copyright symbol.

200

Then I'll just put my name.

201

You can put yours, and then I'm going to add ampersand GT for greater than and a semicolon,

202

and once again, I'll copy that and paste two more.

203

Now, if we save, you can see we've got our three less than symbols we've got a copyright symbol then your name

204

or my name and then three greater than symbols, and we're using HTML entities to create those.

205

I'll provide a link to a list of HTML entity codes in the resources for this tutorial.

206

You may have noticed we've got a couple of abbreviations on our page.

207

We have the abbreviation for Kansas, which is KS, and we also have the acronym or abbreviation for the Mozilla Developer Network here on our page.

208

So let's go ahead and add another inline level element and

209

that can help us with our abbreviations and that is abbr

210

but it doesn't really do it by itself i'm going to go ahead

211

and select mdn cut it and paste it here in the middle of the element

212

and this won't really provide anything we also need to add the attribute title here

213

I can put the full text Mozilla developer network and

214

save and now when we look at our page it has some dots underneath MDN

215

if we mouse over we get a tooltip

216

that says Mozilla developer network now it's important to realize this tooltip will not really be available to screen reader

217

and assistive technology.

218

So we don't want anything super important for the understanding of the meaning of the page to be in there.

219

So if we are using abbreviation, it's a nice thing to have, but it is really not accessible to all assistive technology.

220

So you can't have anything in there that the page really depends on

221

because some of the people accessing the page may not be able to read

222

or see the information

223

that you provide here inside the title attribute of the abbreviation element let's go ahead

224

and add that abbreviation element for kansas as well

225

so abbr and then title and i'll spell the state name kansas

226

and then i can go ahead and double click on kansas control x to cut

227

and i'm going to paste it with control v right inside the element save

228

and now dots are under the ks here on the page

229

and if i mouse over we get a tooltip

230

that says kansas let's put another paragraph under places i'd like to visit

231

and i'll put i can just type p

232

and press tab as well there we go and now i'll type i've heard good things about going here with a colon.

233

And now I'm going to add an address element.

234

And we can put a location inside of this address element.

235

And it tells the browser that this is an address or a specific location.

236

So I'm just going to paste this in because you don't need to see me type all of this.

237

And I might easily have a typo here.

238

This is Margaritaville Island in Cancun.

239

It sounds like a great place for a vacation.

240

Notice we've got a line break element after each line except the last line.

241

And if we save this and look at the page, you can see how the browser handles this.

242

It is just three lines of text.

243

It is all italicized by default.

244

And the browser knows that this is an address.

245

And once again, so would assistive technology.

246

So an address element does provide some semantic meaning as well to the content within

247

it now before we finish this lesson about content

248

there's one other thing we can add to our code now we won't see it on the page

249

but it is important to us and this is an HTML comment and so now you can see

250

Visual Studio Code colored this differently at least with the theme

251

that I'm using

252

and we can leave a note for ourselves inside of our code

253

now notice this will not be on the page

254

but I will show you how the public can see it

255

so you don't want to put anything in here

256

that you don't expect the public to be able to read i'll put a to -do

257

which is a common use and i'll just put add more places

258

so it's a reminder to me to add more places to the list of places i want to avoid

259

and we save that

260

and it doesn't show on the page it's just a reminder in the code

261

or a note to yourself inside of the code

262

but I will show you how the public can see this

263

if we right click and choose inspect that works

264

or you can also press control you either way will show your source code

265

now notice we've got a comment in here

266

that says add more places it's not visible on the web page itself

267

but it is visible in the source code again

268

you can press control you to view this now notice live server also injected a comment here and it injected some JavaScript.

269

So when we look at the overall source code of what is live, we're seeing more than we even had.

270

But this is a comment, once again, that is not seen on the page.

271

And live server is using a script element that we do not see on the page either.

272

And that can contain JavaScript, for example. So

273

just to let you know

274

if you leave a note for yourself it can be viewed by others

275

and finally now

276

that we've added all of this html content to our page

277

we once again should go to the validator markup validation service from w3c to check our file to see

278

if it is valid html or

279

if we have any mistakes choose validate by file upload

280

and then click choose file i'm going to have to probably go to a different folder from the one

281

that I checked last.

282

So I'll go to HTML course, lesson three, which is the file we are working with,

283

choose my index .html, and open that here with the validator.

284

Now it has the index .html file uploaded, and we can click check, and we'll see if we have valid HTML.

285

So this is valid.

286

It's green, document checking completed, no errors or warnings to show.

287

If you have errors or warnings, it should point out exactly where that error is, and you can fix that in your HTML.

288

Remember to keep striving for progress over perfection, and a little progress every day will go a very long way.

289

Please give this video a like if it's helped you, and thank you for watching and subscribing.

290

You're helping my channel grow.

291

Have a great day, and let's write more code together very soon.

アプリをダウンロード

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

AI発音採点文ごとに採点

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

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

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

QRをスキャン

Download on theApp Store Get it onGoogle Play

同じチャンネル

HTML Lists Tutorial | HTML5 List Types: Ordered, Unordered & Description

FOR YOU

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

このスピーキングレッスンは、動画「HTML Tag Text Basics」を教材にしています。繰り返し出てくる語は次のとおりです：page, element, html, add, code。この動画には、シャドーイング用の文が291文、単語が3496語あります。音声の長さは21:19です。話す速さは1分あたり約164語で、日常会話に近い自然なペースです。単語の82%は英語の頻出3,000語に含まれます。残りは練習の前に確認しておきましょう。

この動画の重要語彙

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

単語	発音	意味
element 名詞	/ˈɛləmənt/	要素, エレメント
paragraph 名詞	/ˈpæɹəɡɹæf/	段落
entity 名詞	/ˈɛn.tə.ti/ [-tʰi]	実体
symbol 名詞	/ˈsɪmbəl/	記号, 符号
pasta 名詞	/ˈpɑ.stə/	パスタ
header 名詞	/ˈhɛdɚ/	ヘッダー
topic 名詞	/ˈtɑpɪk/	話題, テーマ
horizontal 形容詞	/ˌhoɹəˈzɑn.təl/	水平な, 横の
format 名詞	/ˈfɔːɹ.mæt/	書式, フォーマット
vacation 名詞	/veɪˈkeɪ.ʃən/	休暇, 休み
essay 名詞	/ˈɛs.eɪ/	エッセイ, 随筆
arrow 名詞	/ˈæɹəʊ/	矢
hierarchy 名詞	/ˈhaɪ.ə.ɹɑː(ɹ).ki/	階層, 序列
heading 名詞	/ˈhɛdɪŋ/	見出し, 題目
server 名詞	/ˈsɝvɚ/	サーバー

動画に出てくる句動詞

単語	発音	意味
go ahead 動詞	/ˌɡoʊ əˈhɛd/	どうぞお先に
come down 動詞		降りる
go back 動詞		戻る, 帰る
point out 動詞		指す, 指し示す

繰り返し練習したい文

動画に出てくる短く完結した文です。日常会話でそのまま使えます。

Let's add one more sentence.
Then I'll just put my name.
You're helping my channel grow.

この動画の文法

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

文型	動画での表現
現在完了進行形 have/has been + -ing — 以前に始まり今も続いている動作	I've been working · we've been working
受動態 be + 過去分詞 — 誰がするかより、何が起きるかに焦点を当てる	will be made · are called · be represented
現在完了形 have/has + 過去分詞 — 過去の出来事が今も関係している	we've added · we've created · I've heard
関係詞節 who / which + 節 — 人や物について情報を加える	Kansas, which is · three, which is

注意したい発音

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

「sh」と「zh」の音: vacation /veɪˈkeɪ.ʃən/, separation /ˌsɛp.əˈɹeɪ.ʃən/, extension /ɪkˈstɛnʃən/, essentially /ɪˈsɛnʃəli/, perfection /pɚˈfɛk.ʃən/
長い単語（アクセントの位置に注意）: entity /ˈɛn.tə.ti/ [-tʰi], horizontal /ˌhoɹəˈzɑn.təl/, developer /dɪˈvɛləpɚ/, hierarchy /ˈhaɪ.ə.ɹɑː(ɹ).ki/, visually /ˈvɪzju.əli/

日本語話者が苦手な音：

/r/ と /l/ の区別 — /l/ は舌先を歯茎につけ、/r/ はどこにもつけない: horizontal /ˌhoɹəˈzɑn.təl/, scroll /skɹoʊl/, tutorial /ˌtjuːˈtɔːɹɪəl/, naturally /ˈnæt͡ʃ.(ə.)ɹə.li/, differently /ˈdɪf.ə.ɹənt.li/
/v/ — /b/ にならないように、上の歯を下唇に当てる: vacation /veɪˈkeɪ.ʃən/, developer /dɪˈvɛləpɚ/, visually /ˈvɪzju.əli/, server /ˈsɝvɚ/, valid /ˈvælɪd/
/f/ — 「フ」ではなく、上の歯と下唇で出す: paragraph /ˈpæɹəɡɹæf/, format /ˈfɔːɹ.mæt/, emphasize /ˈɛm.fə.saɪz/, emphasis /ˈɛmfəsɪs/, helpful /ˈhɛlp.fl̩/

この動画での練習方法

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

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

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

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

シャドーイング練習: HTML Tag Text Basics | HTML5 Element Text Tutorial - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

アプリをダウンロード

同じチャンネル

HTML Lists Tutorial | HTML5 List Types: Ordered, Unordered & Description

React Native for Beginners tutorial

Head Tag in HTML | An HTML5 Head Element Tutorial

Introduction to HTML | An HTML5 Tutorial for Beginners

おすすめ動画

Beginning Graphic Design: Fundamentals

Science in English #3 | The Periodic Table

Learn 97% of Harvard's CS50 in 25 minutes

Ancient Greek Lesson 1: The Greek Alphabet

Blender Donut Tutorial Part 1 (2026)

English Vocabulary at School

you will never ask about pointers again after watching this video

We've got separation of concerns wrong

TS 97 Quick Start Video

Video