ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: 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

ช่องเดียวกัน

FOR YOU

วิดีโอแนะนำ

66 ประโยค

Beginning Graphic Design: Fundamentals

Daily ConversationUniversity Students

27 ประโยค

LEARNING ENGLISH - LESSON 1 ( Repeat and Remember)

Business EnglishDaily ConversationHigh School Students

371 ประโยค

Learn 97% of Harvard's CS50 in 25 minutes

Daily ConversationUniversity Students

460 ประโยค

Blender Donut Tutorial Part 1 (2026)

Daily ConversationUniversity Students

132 ประโยค

Video

Daily ConversationUniversity StudentsWorking Adults

57 ประโยค

Science in English #3 | The Periodic Table

Daily ConversationHigh School StudentsUniversity Students

285 ประโยค

Ancient Greek Lesson 1: The Greek Alphabet

Daily ConversationUniversity StudentsWorking Adults

103 ประโยค

you will never ask about pointers again after watching this video

Daily ConversationUniversity Students

91 ประโยค

TS 97 Quick Start Video

Daily ConversationUniversity Students

162 ประโยค

How to start a new sketchbook | First page and beyond!

TeensDaily ConversationHigh School Students

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

บทเรียนฝึกพูดนี้ใช้วิดีโอ “HTML Tag Text Basics” เป็นสื่อ คำที่ถูกพูดซ้ำบ่อยที่สุด: page, element, html, add, code วิดีโอนี้มี 291 ประโยค และ 3496 คำ สำหรับฝึกพูดตาม ช่วงที่มีเสียงพูดยาว 21:19 ผู้พูดพูดด้วยความเร็วเป็นธรรมชาติ ประมาณ 164 คำต่อนาที ใกล้เคียงกับบทสนทนาในชีวิตประจำวัน 82% ของคำอยู่ใน 3,000 คำที่ใช้บ่อยที่สุดในภาษาอังกฤษ ส่วนที่เหลือควรดูไว้ก่อนเริ่มฝึก

คำศัพท์สำคัญในวิดีโอนี้

คำที่ควรเรียนรู้ 15 คำจากวิดีโอ พร้อมคำอ่านและความหมาย:

คำศัพท์	คำอ่าน	ความหมาย
element คำนาม	/ˈɛləmənt/	ธาตุ
paragraph คำนาม	/ˈpæɹəɡɹæf/	อนุเฉท, ย่อหน้า
symbol คำนาม	/ˈsɪmbəl/	สัญลักษณ์
pasta คำนาม	/ˈpɑ.stə/	พาสตา
topic คำนาม	/ˈtɑpɪk/	หัวข้อ, กระทู้
horizontal คำคุณศัพท์	/ˌhoɹəˈzɑn.təl/	แนวราบ
vacation คำนาม	/veɪˈkeɪ.ʃən/	วันหยุด
essay คำนาม	/ˈɛs.eɪ/	ความเรียง, ข้อเขียน
arrow คำนาม	/ˈæɹəʊ/	ลูกศร, ศร
hierarchy คำนาม	/ˈhaɪ.ə.ɹɑː(ɹ).ki/	ลำดับชั้น
server คำนาม	/ˈsɝvɚ/	เซิร์ฟเวอร์
resource คำนาม	/ɹɪˈzɔːs/	ทรัพยากร
reader คำนาม	/ˈɹi.dɚ/	ผู้อ่าน
collapse คำกริยา	/kəˈlæps/	พัง, ถล่ม
emphasize คำกริยา	/ˈɛm.fə.saɪz/	เน้น, เน้นย้ำ

กริยาวลีที่คุณจะได้ยิน

คำศัพท์	ความหมาย
go back คำกริยา	กลับไป

ประโยคที่ควรฝึกพูดซ้ำ

ประโยคสั้น ๆ ที่สมบูรณ์จากวิดีโอ ซึ่งนำไปใช้ในบทสนทนาประจำวันได้:

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

ไวยากรณ์ในวิดีโอนี้

โครงสร้างที่ผู้พูดใช้บ่อยที่สุด พร้อมคำพูดจริงจากวิดีโอ:

โครงสร้าง	ในวิดีโอ
Present perfect continuous have/has been + -ing — การกระทำที่เริ่มก่อนหน้านี้และยังดำเนินอยู่	I've been working · we've been working
Passive voice be + กริยาช่อง 3 — เน้นสิ่งที่เกิดขึ้น ไม่ใช่ผู้กระทำ	will be made · are called · be represented
Present perfect have/has + กริยาช่อง 3 — เหตุการณ์ในอดีตที่ยังเกี่ยวข้องกับปัจจุบัน	we've added · we've created · I've heard
Relative clauses who / which + อนุประโยค — ข้อมูลเพิ่มเติมเกี่ยวกับคนหรือสิ่งของ	Kansas, which is · three, which is

การออกเสียงที่ควรระวัง

ผู้พูดใช้รูปย่อและรูปลดเสียง 106 ครั้ง เช่น I'm, I'll, we've ให้พูดแบบสั้นตามที่ได้ยิน

เสียง “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/

เสียงที่คนไทยมักออกเสียงยาก:

เสียงท้ายคำ — ออกเสียงให้ครบ ไม่เปลี่ยนเป็นตัวสะกดแบบไทย: paragraph /ˈpæɹəɡɹæf/, symbol /ˈsɪmbəl/, underneath /ˌʌndɚˈniθ/, horizontal /ˌhoɹəˈzɑn.təl/, resource /ɹɪˈzɔːs/
/v/ — ไม่ใช่ /w/ ให้ฟันบนแตะริมฝีปากล่าง: vacation /veɪˈkeɪ.ʃən/, developer /dɪˈvɛləpɚ/, visually /ˈvɪzju.əli/, server /ˈsɝvɚ/, valid /ˈvælɪd/
/z/ — เสียงก้อง ไม่ใช่ /s/: horizontal /ˌhoɹəˈzɑn.təl/, browser /ˈbɹaʊ.zəɹ/, visually /ˈvɪzju.əli/, resource /ɹɪˈzɔːs/, emphasize /ˈɛm.fə.saɪz/

วิธีฝึกกับวิดีโอนี้

ฟังวิดีโอให้จบหนึ่งรอบโดยยังไม่ต้องพูด แล้วจดคำที่ยังไม่รู้จัก
เริ่มที่ความเร็ว 0.75× พูดตามทีละประโยค แล้วกลับไปใช้ความเร็วปกติเมื่อเริ่มคล่อง
อัดเสียงตัวเองแล้วเทียบกับต้นฉบับ โดยสังเกตคำอย่าง element, paragraph, symbol เป็นพิเศษ

เทคนิค Shadowing คืออะไร?

Shadowing เป็นเทคนิคการเรียนรู้ภาษาที่ได้รับการรับรองทางวิทยาศาสตร์ พัฒนาขึ้นสำหรับการฝึกนักแปลมืออาชีพ วิธีการนี้เรียบง่ายแต่ทรงพลัง: คุณฟังเสียงภาษาอังกฤษจากเจ้าของภาษาและพูดตามทันที — เหมือนเงาที่ตามผู้พูดด้วยช่วงเวลาห่าง 1-2 วินาที การวิจัยแสดงว่าเทคนิคนี้ปรับปรุงความแม่นยำในการออกเสียง ทำนองเสียง จังหวะ การเชื่อมเสียง การฟังเข้าใจ และความคล่องแคล่วในการพูดได้อย่างมีนัยสำคัญ

เทคนิค shadowing: อ่านคู่มือฉบับเต็มทีละขั้นตอน →

ฝึกพูดภาษาอังกฤษด้วยเทคนิค Shadowing จากวิดีโอ: HTML Tag Text Basics | HTML5 Element Text Tutorial

เลือกโหมดฝึก

ดาวน์โหลดแอป

React Native for Beginners tutorial

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

Head Tag in HTML | An HTML5 Head Element Tutorial

Introduction to HTML | An HTML5 Tutorial for Beginners

Beginning Graphic Design: Fundamentals

LEARNING ENGLISH - LESSON 1 ( Repeat and Remember)

Learn 97% of Harvard's CS50 in 25 minutes

Blender Donut Tutorial Part 1 (2026)

Video

Science in English #3 | The Periodic Table

Ancient Greek Lesson 1: The Greek Alphabet

you will never ask about pointers again after watching this video

TS 97 Quick Start Video

How to start a new sketchbook | First page and beyond!

คำศัพท์และข้อสังเกตด้านการพูดสำหรับบทเรียนนี้

คำศัพท์สำคัญในวิดีโอนี้

กริยาวลีที่คุณจะได้ยิน

ประโยคที่ควรฝึกพูดซ้ำ

ไวยากรณ์ในวิดีโอนี้

การออกเสียงที่ควรระวัง

วิธีฝึกกับวิดีโอนี้

เทคนิค Shadowing คืออะไร?