Shadowing Practice: HTML Tag Text Basics | HTML5 Element Text Tutorial - Learn English Speaking with Video

Bir pratik modu seçin

Her mod tam ekran bir pratik odası açar.

291 cümleler

Cümleler çok kısa veya çok uzun ise, ayarlamak için Düzenle'ye tıklayın.

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.

Uygulamayı İndir

Akıcı konuşmak için ihtiyacınız olan her şey

AI TelaffuzHer cümleyi puanla

IPA AlıştırmasıHer sesi ustalaştır

Kelime BilgisiKelime bankanızı oluşturun

Kelime OyunuOynarken öğrenin

QR Tara

Download on theApp Store Get it onGoogle Play

Aynı Kanal

FOR YOU

Video Öner

66 cümleler

Beginning Graphic Design: Fundamentals

Daily ConversationUniversity Students

27 cümleler

LEARNING ENGLISH - LESSON 1 ( Repeat and Remember)

Business EnglishDaily ConversationHigh School Students

371 cümleler

Learn 97% of Harvard's CS50 in 25 minutes

Daily ConversationUniversity Students

460 cümleler

Blender Donut Tutorial Part 1 (2026)

Daily ConversationUniversity Students

132 cümleler

Video

Daily ConversationUniversity StudentsWorking Adults

57 cümleler

Science in English #3 | The Periodic Table

Daily ConversationHigh School StudentsUniversity Students

285 cümleler

Ancient Greek Lesson 1: The Greek Alphabet

Daily ConversationUniversity StudentsWorking Adults

103 cümleler

you will never ask about pointers again after watching this video

Daily ConversationUniversity Students

91 cümleler

TS 97 Quick Start Video

Daily ConversationUniversity Students

162 cümleler

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

TeensDaily ConversationHigh School Students

Bu dersin kelimeleri ve konuşma notları

Bu konuşma dersi “HTML Tag Text Basics” videosuna dayanıyor. En çok tekrarlanan kelimeler: page, element, html, add, code. Bu videoda gölgeleme çalışması için 291 cümle ve 3496 kelime var. Konuşma bölümü 21:19 sürüyor. Konuşmacı dakikada yaklaşık 164 kelimeyle, günlük konuşmaya yakın doğal bir hızda konuşuyor. Kelimelerin %82’i İngilizcede en sık kullanılan 3.000 kelime arasında; geri kalanına başlamadan önce bakmakta fayda var.

Bu videodaki önemli kelimeler

Videodan öğrenmeye değer 15 kelime, telaffuzu ve anlamıyla:

Kelime	Telaffuz	Anlam
element isim	/ˈɛləmənt/	öğe, eleman
paragraph isim	/ˈpæɹəɡɹæf/	paragraf, fıkra
symbol isim	/ˈsɪmbəl/	simge, sembol
pasta isim	/ˈpɑ.stə/	makarna
header isim	/ˈhɛdɚ/	başlık, antet
topic isim	/ˈtɑpɪk/	mevzu, tema
underneath zarf	/ˌʌndɚˈniθ/	altında, altı
horizontal sıfat	/ˌhoɹəˈzɑn.təl/	yatay
vacation isim	/veɪˈkeɪ.ʃən/	tatil
essay isim	/ˈɛs.eɪ/	deneme, kompozisyon
developer isim	/dɪˈvɛləpɚ/	geliştirici
arrow isim	/ˈæɹəʊ/	ok
hierarchy isim	/ˈhaɪ.ə.ɹɑː(ɹ).ki/	hiyerarşi
heading isim	/ˈhɛdɪŋ/	başlık
server isim	/ˈsɝvɚ/	sunucu, server

Duyacağınız deyimsel fiiller

Kelime	Anlam
come down fiil	düşmek

Tekrar etmeye değer cümleler

Videodan, günlük konuşmada yeniden kullanabileceğiniz kısa ve tam cümleler:

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

Bu videodaki dil bilgisi

Konuşmacının en çok kullandığı yapılar, videodaki sözcüklerin aynısıyla:

Yapı	Videoda
Present perfect continuous have/has been + -ing — önceden başlayıp hâlâ süren bir eylem	I've been working · we've been working
Edilgen yapı be + fiilin üçüncü hâli — kimin yaptığı değil, ne olduğu önemli	will be made · are called · be represented
Present perfect have/has + fiilin üçüncü hâli — geçmişte olan ama şimdi de önemli olan bir eylem	we've added · we've created · I've heard
İlgi cümlecikleri who / which + cümle — bir kişi ya da şey hakkında ek bilgi	Kansas, which is · three, which is

Dikkat edilecek telaffuzlar

Konuşmacı I'm, I'll, we've gibi kısaltılmış biçimleri 106 kez kullanıyor. Bunları duyduğunuz gibi kısa söyleyin.

“sh” ve “zh” sesleri: vacation /veɪˈkeɪ.ʃən/, separation /ˌsɛp.əˈɹeɪ.ʃən/, extension /ɪkˈstɛnʃən/, essentially /ɪˈsɛnʃəli/, perfection /pɚˈfɛk.ʃən/
Uzun kelimeler — vurguyu doğru yere koyun: entity /ˈɛn.tə.ti/ [-tʰi], horizontal /ˌhoɹəˈzɑn.təl/, developer /dɪˈvɛləpɚ/, hierarchy /ˈhaɪ.ə.ɹɑː(ɹ).ki/, visually /ˈvɪzju.əli/

Türkçe konuşanların zorlandığı sesler:

/w/ — dudaklar yuvarlak, /v/ değil: afterwards /ˈæf.tɚ.wɚdz/, nowhere /ˈnoʊ.(h)wɛɹ/, likewise /ˈlaɪkˌwaɪz/
Kelime başındaki ünsüz kümesi — araya ünlü eklemeyin: browser /ˈbɹaʊ.zəɹ/, scroll /skɹoʊl/, tutorial /ˌtjuːˈtɔːɹɪəl/, spell /spɛl/, script /skɹɪpt/
/æ/ — “e”den daha açık: paragraph /ˈpæɹəɡɹæf/, format /ˈfɔːɹ.mæt/, arrow /ˈæɹəʊ/, valid /ˈvælɪd/, collapse /kəˈlæps/

Bu videoyla nasıl çalışılır

Videonun tamamını konuşmadan bir kez dinleyin ve bilmediğiniz kelimeleri not edin.
0,75× hızla başlayın, cümle cümle tekrar edin ve kolaylaşınca normal hıza dönün.
Kendinizi kaydedin ve orijinaliyle karşılaştırın; element, paragraph, symbol gibi kelimelere özellikle dikkat edin.

Gölgeleme Tekniği Nedir?

Gölgeleme, başlangıçta profesyonel tercüman eğitimi için geliştirilen ve çok dilli Dr. Alexander Arguelles tarafından popüler hale getirilen, bilim destekli bir dil öğrenme tekniğidir. Yöntem basit ama güçlüdür: ana dili İngilizce olan bir sesi dinler ve hemen yüksek sesle tekrar edersiniz — konuşmacıyı 1-2 saniye gecikmeyle takip eden bir gölge gibi. Pasif dinleme veya dilbilgisi alıştırmalarının aksine, gölgeleme beyninizi ve ağız kaslarınızı gerçek konuşma kalıplarını eşzamanlı olarak işlemeye ve yeniden üretmeye zorlar. Araştırmalar, telaffuz doğruluğu, tonlama, ritim, bağlı konuşma, dinleme anlama ve konuşma akıcılığını önemli ölçüde geliştirdiğini göstermektedir — bu da onu IELTS Konuşma hazırlığı ve gerçek dünya İngilizce iletişimi için en etkili yöntemlerden biri yapar.

Shadowing tekniği: adım adım eksiksiz rehberi okuyun →

Shadowing Practice: HTML Tag Text Basics | HTML5 Element Text Tutorial - Learn English Speaking with Video

Bir pratik modu seçin

Uygulamayı İndir

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!

Bu dersin kelimeleri ve konuşma notları

Bu videodaki önemli kelimeler

Duyacağınız deyimsel fiiller

Tekrar etmeye değer cümleler

Bu videodaki dil bilgisi

Dikkat edilecek telaffuzlar

Bu videoyla nasıl çalışılır

Gölgeleme Tekniği Nedir?