Luyện nói tiếng Anh bằng Shadowing qua video: HTML Tag Text Basics | HTML5 Element Text Tutorial

Chọn chế độ luyện tập

Mỗi chế độ mở một phòng luyện tập toàn màn hình.

291 câu

Nếu các câu quá ngắn hoặc quá dài, hãy bấm Edit để chỉnh sửa.

Hello and welcome.

Xin chào và chào mừng.

Hi, I'm Dave.

Chào, tôi là Dave.

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

Hướng dẫn này là một phần của loạt bài về HTML dành cho người mới bắt đầu.

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.

Tôi sẽ sử dụng trình duyệt web Chrome, trình soạn thảo Visual Studio Code và tiện ích mở rộng live server của Visual Studio Code để xem trang web.

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

Các liên kết đến các công cụ này, các tệp mã khởi tạo và tất cả tài nguyên đều nằm trong phần mô tả bên dưới.

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

Chúng ta hãy xem xét những điều cơ bản về việc tạo nội dung văn bản trên một trang web.

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

Ngày nay, các trang web rất giống với các bài luận hoặc thậm chí là một tờ báo, nơi chúng có các tiêu đề và thường là các đoạn văn bản.

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

hoặc ít nhất là một hoặc hai câu văn mô tả điều gì đó sau đó.

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

Vì vậy, chúng ta thấy phần tử đoạn văn của mình ở đây và tiêu đề H1 của mình ở đây.

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

Phần lớn nội dung văn bản trên một trang web sẽ được cấu thành từ các tiêu đề và đoạn văn.

Now, headings have a hierarchy,

Bây giờ, các tiêu đề có một hệ thống phân cấp.

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

và điều đó có nghĩa là chúng ta sẽ bắt đầu với chỉ một thẻ H1 trên trang, và mỗi trang chỉ nên có một thẻ H1.

But after that, we can have subtopics.

Nhưng sau đó, chúng ta có thể có các chủ đề phụ.

So here I'm going to press

Vậy thì ở đây tôi sẽ nhấn vào.

Shift Alt and the down arrow.

Shift Alt và phím mũi tên xuống.

Again, I'm using Windows.

Một lần nữa, tôi đang dùng Windows.

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

Trên hệ điều hành Mac hoặc Linux thì có thể sẽ khác, nhưng tôi vừa sao chép một dòng xuống rồi.

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

Vậy là bây giờ tôi có hai thẻ H1, nhưng tôi sẽ thay đổi điều này bằng cách gõ H2 lên trên thẻ H1 đó.

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

Và hãy chú ý xem thẻ đóng cũng đã thay đổi ngay lập tức trong Visual Studio Code như thế nào.

So that's helpful.

Vậy thì điều đó thật hữu ích.

Now, this is a subtopic for the page.

Bây giờ, đây là một chủ đề phụ của trang.

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

Vậy hãy tưởng tượng đây là tiêu đề bài luận của bạn hoặc là tiêu đề lớn trên một tờ báo.

And then we have subtopics.

Và sau đó chúng ta có các chủ đề con.

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

Vì vậy, đối với H2, tôi sẽ nhập một cái gì đó khác.

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

Chúng ta hãy bắt đầu với câu: Tôi sẵn sàng học HTML.

And now we can have a paragraph about that.

Và bây giờ chúng ta có thể viết một đoạn văn về vấn đề đó.

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

Và vậy là chúng ta đã làm được, ít nhất thì chúng ta cũng có một câu hoàn chỉnh.

This is my first web page.

Đây là trang web đầu tiên của tôi.

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

Bây giờ tôi sẽ làm nổi bật tiểu mục này, thẻ H2 và đoạn văn bản đó.

And once again, I'm going to press

Và một lần nữa, tôi sẽ nhấn mạnh

Shift Alt and the down arrow.

Shift Alt và phím mũi tên xuống.

And it copies both lines down for me.

Và nó sao chép cả hai dòng xuống cho tôi.

And I'll add an extra blank line here.

Và tôi sẽ thêm một dòng trống bổ sung ở đây.

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

Và tôi sẽ thay đổi thẻ H2 thứ hai này thành thẻ H3.

Now I'll use lowercase.

Bây giờ tôi sẽ dùng chữ thường.

There we go.

Được rồi.

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

Bây giờ chúng ta có thể có nhiều hơn một thẻ H2 trên trang.

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

Nhưng tôi muốn minh họa cách bạn có thể tạo một chủ đề con nằm bên trong chủ đề con của chúng ta.

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.

Vậy là chúng ta đã có tiêu đề cho bài luận của mình, và sau đó có một phần thảo luận mà chúng ta đã đặt tiêu đề H2 cho nó.

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

Và bây giờ, trong phạm vi khu vực thảo luận này, chúng ta có thể có các chủ đề con hơn nữa, và đó là cách chúng ta có một thẻ H3.

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

Vì vậy, bây giờ thay vì trang web đầu tiên của tôi hoặc tôi đã sẵn sàng học HTML, hãy đổi thành lịch trình hàng ngày của tôi.

So this will discuss our schedule for learning HTML.

Vì vậy, phần này sẽ thảo luận về lịch trình học HTML của chúng ta.

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

và sau đó chúng ta chỉ có thể nói gì đó về việc tôi sẽ kể cho bạn nghe cách làm

or let me tell you how I

hoặc để tôi kể cho bạn nghe về cách tôi

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

và bây giờ tôi chỉ sẽ đặt vài dấu chấm ở đó thôi, chúng ta sẽ mở rộng thêm sau.

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

sau này nếu chúng ta muốn, nhưng thực ra điều tôi đang trình bày là cấu trúc phân cấp này.

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

và điều quan trọng không chỉ là về mặt hình ảnh, hãy để tôi tiếp tục nhé.

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

và lưu lại bằng cách nhấn Ctrl S, hoặc nhớ rằng bạn có thể vào menu File và chọn Lưu.

visually we see

về mặt thị giác, chúng ta thấy

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

rằng thẻ h1 được định dạng tự động hiển thị lớn hơn trên trang so với thẻ h2

and then the h3 is even smaller than the h2

but we can change all of

nhưng chúng ta có thể thay đổi tất cả

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

rằng với CSS trong tương lai, CSS sẽ thực sự quyết định cách trang web của chúng ta trông như thế nào

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

nhưng điều quan trọng là bây giờ chúng ta có thể phân biệt các tiêu đề một cách nhanh chóng bằng mắt thường.

and when a screen reader

và khi trình đọc màn hình

or other assistive technology looks at our code

hoặc các công nghệ hỗ trợ khác xem xét mã của chúng tôi

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

sau đó nó có thể điều hướng mã thông qua các tiêu đề của những thứ quan trọng ở đây, tức là hệ thống phân cấp tiêu đề.

and that's why it's

và đó là lý do tại sao nó là

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

Việc sắp xếp trang của bạn một cách hợp lý là rất quan trọng, vì các tiêu đề thực sự mang ý nghĩa ngữ nghĩa.

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

Đây là chủ đề chính đây là một chủ đề phụ thuộc vào chủ đề chính

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

và đây là một chủ đề con nằm dưới chủ đề con cao hơn trong hệ thống phân cấp.

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

vì vậy các tiêu đề có ý nghĩa ngữ nghĩa, và điều đó có nghĩa là chúng mang lại ý nghĩa cho nội dung của chúng ta.

and of course then our paragraphs can just have whatever details

và tất nhiên rồi, các đoạn văn của chúng ta có thể chứa bất kỳ chi tiết nào mình muốn.

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

bây giờ chúng tôi cũng muốn bổ sung thêm về những chủ đề phụ đó, mặc dù chúng tôi đã tạo ra một sự phân tách nhỏ trong mã của mình.

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

khi chúng ta xem trang của mình, chúng ta chỉ thấy khoảng trắng giữa các dòng

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

và chúng ta không có sự phân cách trực quan tốt, tôi sẽ thêm một yếu tố vào

that doesn't really provide any semantic meaning

điều đó thực sự không mang lại bất kỳ ý nghĩa ngữ nghĩa nào

but visually it helps us on the page and

nhưng về mặt trực quan thì nó giúp trang của chúng ta trông tốt hơn và

that is a horizontal rule element

đó là một phần tử đường kẻ ngang

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

và nó được thêm vào như thế này, không có thẻ đóng cho thẻ đường kẻ ngang

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

sau đó tôi sẽ thêm một mục khác sau khi chúng ta thảo luận xong chủ đề phụ cuối cùng ở đây để chúng ta có thể bổ sung thêm nội dung bên dưới phần đó.

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

Bây giờ hãy lưu lại và xem đường kẻ ngang đã thêm gì vào trang.

now we have lines going across the page

bây giờ chúng ta có các đường kẻ chạy ngang qua trang

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

và những cái đó được gọi là đường kẻ ngang, vậy là chúng ta có tiêu đề chính rồi.

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

và bây giờ chúng ta có chủ đề phụ của mình, tôi đã để lại thẻ h3 ở đây

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

vì đây là một chủ đề con của chủ đề này nên bây giờ chúng ta có thể tiếp tục rồi.

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

và tôi sẽ bôi đen các thẻ h2 và h3, nhấn Ctrl C để sao chép

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

kéo xuống dưới trang nữa rồi dán vào đi, tôi sẽ lưu lại để chúng ta xem chuyện gì xảy ra nhé

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

Bây giờ chúng ta có hai phần chủ đề con khác nhau và phần chào thế giới ở trên cùng vẫn còn đó.

So you could picture this more like an essay page.

Vì vậy, bạn có thể hình dung điều này giống như một trang bài luận hơn.

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

Và tất nhiên, đây cũng có thể là những đoạn văn có nhiều nội dung hơn.

Or you could picture this more like a newspaper.

Hoặc bạn có thể hình dung điều này giống như một tờ báo hơn.

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

Và sau đó chúng ta sẽ có một bài viết ở đây và một bài viết khác ở đây trong phần tiêu đề ở trên cùng.

This is also a good time to discuss white space.

Đây cũng là thời điểm thích hợp để thảo luận về khoảng trắng.

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

Vậy nếu tôi chỉ nhấn phím cách và thêm tất cả các khoảng trắng thừa này vào trang, rồi nếu tôi lưu lại

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

Visual Studio Code chắc là sẽ tự động định dạng lại phần này rồi.

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,

Nhưng điều quan trọng cần biết là khi tôi nhấn lưu, bạn sẽ thấy đấy, vâng, nó đã thay đổi rồi nó lập tức quay lại và chỉ còn lại một khoảng trắng duy nhất.

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

các trang web hay mã HTML không giữ lại tất cả các khoảng trắng mà bạn có thể thêm bằng phím cách.

It's called white space collapsing.

Đó được gọi là thu gọn khoảng trắng.

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

Vì vậy, chúng ta có thể đặt khoảng cách giữa nhiều dòng, nhưng điều đó sẽ không thực sự được hiển thị trên trang.

That is not how we add extra space in HTML.

Đó không phải là cách chúng ta thêm khoảng trắng thừa trong HTML.

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

Vì vậy, một lần nữa, hãy nhận thức rằng việc thu gọn khoảng trắng sẽ không kéo dài mãi.

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

Bây giờ, một điều chúng ta có thể làm là cái gọi là ngắt dòng.

And that can be inserted inside a paragraph element.

Và phần đó có thể được chèn vào bên trong một phần tử đoạn văn.

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

Vậy bây giờ tôi sẽ đặt, để tôi nói cho bạn biết cách làm, rồi sau đó tôi sẽ quay lại, nhớ là chúng ta không cần phải có phần mở đầu.

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

và thẻ đóng trên cùng một dòng đối với một phần tử, chúng ta có thể lồng các phần tử khác vào bên trong một phần tử.

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

vì vậy tôi sẽ đặt một thẻ break và nó đại diện cho ngắt dòng

and then I'll put three dots

và rồi tôi sẽ đặt ba dấu chấm

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

và tôi sẽ nói rằng để tôi kể cho bạn nghe cách tôi tìm hiểu thêm về phát triển web.

100

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

và một dấu chấm trông ổn rồi, bây giờ chúng ta có thể thêm một ngắt dòng nữa

101

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

và tôi chỉ sẽ thêm ba dấu chấm nữa rồi nói rằng tôi lên kế hoạch cho lịch trình của mình

102

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

và thêm một dòng ngắt nữa, tất nhiên là không bắt buộc phải có ba dấu chấm, đó chỉ là thứ tôi đang thêm vào đây thôi.

103

and then I'll say I use resources from MDN

và sau đó tôi sẽ nói rằng tôi sử dụng các tài nguyên từ MDN

104

which previously we discussed and

mà trước đây chúng ta đã thảo luận rồi

105

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

khi tôi trình bày định nghĩa của HTML, chúng ta đã xem trên trang Mozilla Developer Network, và đó chính là ý nghĩa của MDN.

106

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

Bây giờ nếu chúng ta lưu tệp này, bạn có thể thấy chúng ta đã có các ngắt dòng.

107

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

và chúng tôi đang hiển thị từng chi tiết này trên các dòng riêng biệt.

108

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

Được rồi, hãy kéo xuống và thay đổi một vài nội dung của chủ đề thứ hai của chúng ta bây giờ.

109

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

Vì vậy, thay vì "Tôi đã sẵn sàng học HTML", hãy đổi chủ đề phụ thứ hai của chúng ta thành "Tôi là" — để tôi viết hoa chữ cái đầu.

110

that I am also planning a vacation

rằng tôi cũng đang lên kế hoạch cho một kỳ nghỉ

111

and now we can put some details about

và bây giờ chúng ta có thể thêm một số chi tiết về

112

that vacation in the paragraph underneath this subtopic

kỳ nghỉ đó trong đoạn văn nằm ngay bên dưới tiểu mục này

113

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

và tôi sẽ nói rằng tôi đã làm việc rất chăm chỉ và thực sự cần một kỳ nghỉ ngơi.

114

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

và xem chúng ta có muốn thêm gì bên dưới đó không nhé

115

Let's add one more sentence.

Hãy thêm một câu nữa vào đây.

116

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

Và điều tôi sẽ làm một lần nữa là nhấn tổ hợp phím Shift + Alt.

117

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

và nhấn mũi tên xuống thì Visual Studio Code sẽ sao chép dòng đó xuống dưới.

118

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

Vậy bây giờ chúng ta chỉ cần thay đổi câu ở đây và tôi sẽ nói rằng tôi sống ở Kansas.

119

So I want to visit a beach.

Vì vậy tôi muốn đi thăm một bãi biển.

120

Kansas is nowhere near the ocean.

Kansas không hề gần biển.

121

So that sounds pretty good.

Nghe có vẻ khá ổn đấy.

122

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

Vậy hãy lưu lại cái đó và bây giờ chúng ta có thể thấy chủ đề phụ của mình ở đây đã thay đổi rồi.

123

and we have a couple of sentences about planning the vacation

và chúng ta có một vài câu nói về việc lên kế hoạch cho kỳ nghỉ.

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

và tôi đoán là tôi có thể viết hoa chữ cái đầu

126

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

cái chữ L ở đó kìa, thế là xong, những nơi mình muốn đến thăm

127

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

và bây giờ tôi sẽ đánh dấu đoạn văn đó và nói rằng tôi đã nghe những điều tốt đẹp về vùng biển Caribe.

128

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

Nghe nói họ có nước ấm và những hòn đảo thú vị để tham quan.

129

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

Được rồi, bây giờ chúng ta có thêm một số chi tiết ở đây và chúng ta có thể có nhiều hơn một chủ đề phụ.

130

So let's go ahead and do that.

Vậy thì chúng ta hãy bắt đầu thực hiện điều đó nhé.

131

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

Một lần nữa, nhấn Shift + Alt + mũi tên xuống để sao chép cái đó.

132

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

Và những nơi tôi muốn tránh thì lại có thể là địa điểm tiếp theo chúng ta sẽ đến.

133

So places I want to avoid.

Vậy là những nơi tôi muốn tránh.

134

And here we can put anywhere cold.

Và ở đây chúng ta có thể đặt ở bất cứ nơi nào có nhiệt độ thấp.

135

No way with an exclamation mark.

Không đời nào!

136

Okay.

Được rồi.

137

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

Vậy là bây giờ chúng ta đã có thêm một số chi tiết bổ sung ở khu vực thứ hai của mình, và điều này sẽ cho phép tôi

138

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

để tiếp tục và cho bạn thấy sự khác biệt giữa các phần tử cấp khối và các phần tử nội tuyến.

139

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

Những gì chúng ta đã làm việc ở đây là các phần tử cấp khối.

140

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

Lưu ý rằng mọi đoạn văn và mọi tiêu đề đều được bắt đầu trên một dòng mới.

141

That is a block level element.

Đó là một phần tử cấp khối.

142

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

Nó tạo ra khoảng xung quanh nó, và tất nhiên là khoảng này sau này có thể được định dạng bằng CSS.

143

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

nhưng nó không cho phép bạn đặt một đoạn văn khác bên trong tiêu đề

144

or a paragraph without creating that new line that space

hoặc một đoạn văn mà không tạo ra dòng mới hay khoảng trắng đó

145

so there will be a return essentially in your content

về cơ bản thì sẽ có một sự quay trở lại trong nội dung của bạn.

146

when you're using a block level element but

khi bạn đang sử dụng một phần tử cấp khối nhưng

147

when you use an inline element that doesn't happen

khi bạn sử dụng một phần tử nội tuyến mà điều đó không xảy ra

148

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

vậy hãy xem xét một vài ví dụ này, trước hết chúng ta có thể nói rằng tôi đã làm việc rất chăm chỉ.

149

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

và tôi đã làm việc rất chăm chỉ nên thực sự cần một chuyến đi nghỉ ngơi, hãy nhấn mạnh điều đó nhé

150

that really need a getaway and one inline element

thực sự cần một kỳ nghỉ ngắn và một phần tử nội tuyến

151

that we can do that with is em and

cái mà chúng ta có thể làm được điều đó là em và

152

that stands for emphasis that provides some semantic meaning once again

điều đó dùng để nhấn mạnh, một lần nữa lại mang đến một ý nghĩa ngữ nghĩa nhất định.

153

so now a screen reader or other assistive technology

vì vậy bây giờ trình đọc màn hình hoặc công nghệ hỗ trợ khác

154

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

hoặc có lẽ trình duyệt của chúng ta nhận ra rằng chúng ta đang nhấn mạnh điều này: chúng ta thực sự cần một kỳ nghỉ ngơi.

155

so let's save

vậy thì hãy lưu lại

156

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

và lưu ý rằng cụm từ thực sự cần một kỳ nghỉ ngắn giờ đã được in nghiêng rồi, chúng ta không dùng nữa

157

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

nó dành cho phần văn bản in nghiêng, phần định dạng sẽ được thực hiện sau bằng CSS

158

but that is just the natural behavior of using the emphasis

nhưng đó chỉ là hành vi tự nhiên khi sử dụng dấu nhấn mạnh thôi.

159

element as we wrap our text but it provides

phần tử khi chúng ta bao bọc văn bản nhưng nó cung cấp

160

that meaning now what if we really want to emphasize

Vậy ý nghĩa đó, bây giờ nếu chúng ta thực sự muốn nhấn mạnh thì sao?

161

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

Đoạn văn đó có ý nghĩa rất sâu sắc đối với chúng tôi, nó như là một phần không thể thiếu của chúng tôi ở đây.

162

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

chúng tôi không muốn đi đâu có thời tiết lạnh, và đó là một yếu tố quan trọng mà chúng ta có thể tận dụng.

163

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

đó và đây, để tôi lấy thẻ kết thúc rồi đặt nó vào cuối phần của chúng ta, không đời nào.

164

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

Và bây giờ tôi sẽ lưu lại và nhận thấy nó đã lớn hơn một chút.

165

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

và được in đậm hơn ở đây theo định dạng tự nhiên của phần tử strong.

166

But again, this is an inline element.

Nhưng một lần nữa, đây là một phần tử nội tuyến.

167

It's inside the paragraph.

Nó nằm trong đoạn văn.

168

It did not create a break in the line.

Nó không tạo ra sự ngắt quãng trong dòng.

169

It did not create any extra space around it.

Nó không tạo ra bất kỳ khoảng trống bổ sung nào xung quanh nó.

170

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

Vì vậy, đây là các phần tử cấp độ nội tuyến và các phần tử khác như phần tiêu đề

171

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

và đoạn văn mà chúng ta đang làm việc cùng là các phần tử cấp khối.

172

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

Một loại nội dung khác mà chúng ta có thể thêm vào trang của mình là các thực thể HTML.

173

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

Vì vậy, chúng là những thứ không thực sự là văn bản thông thường mà chúng ta thường gõ ra.

174

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

Ví dụ, nếu chúng ta muốn hiển thị ký hiệu nhỏ hơn hoặc lớn hơn trên trang của mình thì sao?

175

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

Hiện tại, HTML diễn giải những ký tự đó là dấu hiệu cho thấy chúng ta đang bắt đầu hoặc kết thúc một thẻ.

176

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

vì vậy chúng ta không thể dễ dàng đặt một trong những ký hiệu đó lên trang, tương tự như vậy còn có một số ký hiệu khác nữa.

177

or remember when i talked about white space collapsing

hoặc nhớ lại lúc tôi đã nói về việc thu gọn khoảng trắng

178

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

nếu chúng ta cần thêm một khoảng trắng nhỏ, thì có một thực thể HTML dành cho việc đó

179

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

vậy là tôi muốn thụt lề ba dòng này một khoảng cách nhỏ

180

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

và tôi có thể dùng thực thể html, ồ tôi vẫn còn cần thẻ đóng

181

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

Đây rồi, dấu và (&) thường là ký tự bắt đầu cho một thực thể HTML.

182

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

và bây giờ tôi sẽ gõ B SP và một dấu chấm phẩy, lưu ý nhé

183

Visual Studio code recognizes that right away and

Visual Studio Code nhận ra điều đó ngay lập tức và

184

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

nếu tôi lưu lại thì tôi đã giãn dòng này ra một chút rồi

185

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

bây giờ tôi có thể thêm nhiều hơn một cái đó nếu tôi muốn

186

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

vậy tôi sẽ sao chép cái đó và thêm hai cái nữa vào

187

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

và bây giờ hãy lưu lại và đường kẻ của chúng ta đã kết thúc thậm chí còn xa hơn một chút

188

so I will go ahead and select all three of these

vậy tôi sẽ tiếp tục và chọn cả ba cái này

189

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

và tôi sẽ dán chúng ngay sau chỗ ngắt dòng trên mỗi dòng rồi lưu lại.

190

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

Và bây giờ chúng ta đã thụt lề với thêm khoảng trắng cho cả ba dòng này bằng các thực thể HTML tạo khoảng trắng đó.

191

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

Nhưng như tôi đã đề cập, còn có các thực thể HTML khác nữa.

192

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

Vậy bây giờ chúng ta hãy kéo xuống cuối trang.

193

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

Và sau chủ đề cuối cùng này, chúng ta hãy thêm một mục nhân sự nữa nhé.

194

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

và bây giờ chúng ta sẽ gõ ký tự LT và dấu chấm phẩy và

195

that stands for less than so

đó là ký hiệu của nhỏ hơn nên

196

if we save now look

nếu chúng ta lưu ngay bây giờ thì xem nào

197

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

chúng ta có một ký hiệu nhỏ hơn nằm ngay dưới đường kẻ ngang cuối cùng ở phía dưới của trang.

198

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

Tôi sẽ sao chép cái đó và dán thêm hai cái nữa.

199

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

sau đó tôi sẽ thêm dấu và và sao chép kèm theo dấu chấm phẩy, và đó sẽ là ký hiệu bản quyền.

200

Then I'll just put my name.

Vậy thì tôi sẽ điền tên mình vào.

201

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

Bạn có thể đặt cái của bạn vào, rồi sau đó tôi sẽ thêm ký tự &gt để biểu thị dấu lớn hơn và một dấu chấm phẩy.

202

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

và một lần nữa, tôi sẽ sao chép cái đó rồi dán thêm hai cái nữa.

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

Bây giờ, nếu chúng ta lưu lại, bạn có thể thấy chúng ta có ba dấu nhỏ hơn, chúng ta có một biểu tượng bản quyền rồi đến tên của bạn.

204

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

hoặc là tên của tôi rồi đến ba ký hiệu lớn hơn, và chúng ta đang sử dụng các thực thể HTML để tạo ra những ký hiệu đó.

205

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

Tôi sẽ cung cấp liên kết đến danh sách các mã thực thể HTML trong phần tài nguyên của hướng dẫn này.

206

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

Có lẽ bạn đã nhận thấy chúng tôi có một vài từ viết tắt trên trang của mình.

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.

Chúng ta có viết tắt của Kansas là KS, và chúng ta cũng có từ viết tắt hoặc viết tắt của Mozilla Developer Network ở đây trên trang của chúng ta.

208

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

Vậy bây giờ chúng ta hãy tiếp tục và thêm một phần tử cấp độ nội tuyến khác vào

209

that can help us with our abbreviations and that is abbr

điều đó có thể giúp chúng ta về các từ viết tắt và đó là abbr

210

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

nhưng nó không tự động làm được điều đó đâu, tôi sẽ tiếp tục thực hiện nhé.

211

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

sau đó chọn phần MDN, cắt nó và dán vào đây, vào vị trí ở giữa phần tử.

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

Tôi có thể đưa toàn bộ nội dung của Mozilla Developer Network vào và

214

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

lưu lại và bây giờ khi chúng ta xem trang của mình, sẽ có một vài dấu chấm bên dưới MDN

215

if we mouse over we get a tooltip

nếu chúng ta di chuột qua thì sẽ thấy một chú giải công cụ xuất hiện

216

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

điều đó cho thấy Mạng lưới Nhà phát triển Mozilla, bây giờ điều quan trọng cần nhận ra là công cụ chú giải này sẽ không thực sự khả dụng đối với trình đọc màn hình.

217

and assistive technology.

và công nghệ hỗ trợ.

218

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

Vì vậy, chúng tôi không muốn bất kỳ yếu tố nào cực kỳ quan trọng đối với việc hiểu ý nghĩa của trang web được đặt ở đó.

219

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

Vì vậy, nếu chúng ta đang sử dụng từ viết tắt, thì đó là một tính năng hữu ích, nhưng thực sự không phải tất cả các công nghệ hỗ trợ đều có thể truy cập được.

220

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

Vì vậy, bạn không thể đặt bất kỳ thứ gì vào đó mà trang web thực sự phụ thuộc vào.

221

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

vì một số người truy cập trang có thể không có khả năng đọc

222

or see the information

hoặc xem thông tin

223

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

mà bạn cung cấp ở đây bên trong thuộc tính title của phần tử viết tắt, chúng ta hãy tiếp tục nhé

224

and add that abbreviation element for kansas as well

và thêm phần viết tắt cho Kansas nữa nhé

225

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

vậy là viết tắt rồi đến tiêu đề và tôi sẽ đánh vần tên tiểu bang là Kansas

226

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

sau đó tôi có thể nhấp đúp vào Kansas Control X để cắt.

227

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

và tôi sẽ dán nó bằng phím tắt Control V ngay bên trong phần tử, lưu lại

228

and now dots are under the ks here on the page

và bây giờ các dấu chấm nằm dưới các chữ k trên trang này

229

and if i mouse over we get a tooltip

và nếu tôi di chuột qua, chúng ta sẽ thấy một chú thích xuất hiện

230

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

đó là dòng chữ kansas, hãy thêm một đoạn văn nữa vào mục những nơi tôi muốn đến thăm.

231

and i'll put i can just type p

và tôi sẽ đặt là tôi chỉ cần gõ chữ 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.

Và bây giờ tôi sẽ thêm một phần tử địa chỉ.

234

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

Và chúng ta có thể đặt một vị trí vào bên trong phần tử địa chỉ này.

235

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

Và nó báo cho trình duyệt biết rằng đây là một địa chỉ hoặc một vị trí cụ thể.

236

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

Tôi sẽ dán cái này vào đây thôi, vì bạn không cần phải xem tôi gõ hết tất cả những thứ này.

237

And I might easily have a typo here.

Và tôi rất dễ có lỗi đánh máy ở đây.

238

This is Margaritaville Island in Cancun.

Đây là đảo Margaritaville ở Cancun.

239

It sounds like a great place for a vacation.

Nghe có vẻ đó là một nơi tuyệt vời để đi nghỉ dưỡng.

240

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

Lưu ý là chúng ta có một phần tử ngắt dòng sau mỗi dòng, ngoại trừ dòng cuối cùng.

241

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

Và nếu chúng ta lưu lại và xem trang này, bạn có thể thấy cách trình duyệt xử lý đoạn mã này.

242

It is just three lines of text.

Chỉ có ba dòng văn bản thôi.

243

It is all italicized by default.

Tất cả mọi thứ được đặt là chữ nghiêng theo mặc định.

244

And the browser knows that this is an address.

Và trình duyệt biết rằng đây là một địa chỉ.

245

And once again, so would assistive technology.

Và một lần nữa, công nghệ hỗ trợ cũng sẽ làm được điều đó.

246

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

Vì vậy, một phần tử địa chỉ cũng cung cấp một số ý nghĩa ngữ nghĩa cho nội dung bên trong nó.

247

it now before we finish this lesson about content

hãy thực hiện ngay bây giờ trước khi chúng ta kết thúc bài học về nội dung này

248

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

Có một điều khác mà chúng ta có thể thêm vào mã của mình ngay bây giờ, mặc dù chúng ta sẽ không thấy nó trên trang.

249

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

nhưng nó rất quan trọng đối với chúng tôi và đây là một chú thích HTML nên bây giờ bạn có thể thấy

250

Visual Studio Code colored this differently at least with the theme

Visual Studio Code đã tô màu phần này khác ít nhất là khi dùng chủ đề đó.

251

that I'm using

mà tôi đang sử dụng

252

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

và chúng ta có thể để lại một ghi chú cho chính mình bên trong mã nguồn của mình.

253

now notice this will not be on the page

bây giờ hãy lưu ý rằng điều này sẽ không xuất hiện trên trang

254

but I will show you how the public can see it

nhưng tôi sẽ cho bạn thấy công chúng có thể nhìn thấy điều đó như thế nào

255

so you don't want to put anything in here

vậy là bạn không muốn nhập bất kỳ thông tin nào vào đây

256

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

mà bạn không mong đợi công chúng có thể đọc được, tôi sẽ thêm vào danh sách việc cần làm.

257

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

đây là một cách sử dụng phổ biến và tôi sẽ thêm nhiều vị trí khác vào

258

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

vậy thì đây là một lời nhắc nhở cho tôi để thêm nhiều địa điểm hơn vào danh sách những nơi tôi muốn tránh.

259

and we save that

và chúng ta lưu cái đó lại

260

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

và nó không hiển thị trên trang, nó chỉ là một chú thích trong mã nguồn thôi.

261

or a note to yourself inside of the code

hoặc một ghi chú dành cho chính bạn bên trong đoạn mã

262

but I will show you how the public can see this

nhưng tôi sẽ cho bạn thấy công chúng có thể nhìn thấy điều này như thế nào

263

if we right click and choose inspect that works

nếu chúng ta nhấp chuột phải và chọn kiểm tra thì nó sẽ hoạt động

264

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

hoặc bạn cũng có thể nhấn Control, cách nào cũng sẽ hiển thị mã nguồn của bạn.

265

now notice we've got a comment in here

bây giờ hãy chú ý là chúng ta có một bình luận ở đây

266

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

nó ghi là thêm nhiều địa điểm hơn nhưng phần đó không hiển thị trên chính trang web.

267

but it is visible in the source code again

nhưng nó lại hiển thị trong mã nguồn một lần nữa

268

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

bạn có thể nhấn Ctrl+U để xem ngay bây giờ, lưu ý rằng Live Server cũng đã chèn một chú thích vào đây và nó đã chèn một đoạn mã JavaScript.

269

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

Vì vậy, khi chúng ta xem xét toàn bộ mã nguồn của phiên bản đang hoạt động, chúng ta thấy có nhiều thứ hơn cả những gì chúng ta từng có.

270

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

Nhưng đây lại là một bình luận khác mà không hề xuất hiện trên trang.

271

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

Và máy chủ đang hoạt động cũng đang sử dụng một phần tử script mà chúng ta không thấy trên trang.

272

And that can contain JavaScript, for example. So

Và ví dụ, điều đó có thể chứa mã JavaScript. Vì vậy

273

just to let you know

chỉ để bạn biết thôi

274

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

nếu bạn để lại ghi chú cho chính mình, những người khác cũng có thể xem được ghi chú đó

275

and finally now

và cuối cùng là bây giờ

276

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

rằng chúng ta đã thêm toàn bộ nội dung HTML này vào trang của mình

277

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

chúng ta lại cần truy cập vào dịch vụ kiểm tra đánh dấu của W3C để kiểm tra tệp của mình.

278

if it is valid html or

nếu đó là HTML hợp lệ hoặc

279

if we have any mistakes choose validate by file upload

nếu chúng ta có bất kỳ lỗi nào, hãy chọn xác thực bằng cách tải tệp lên

280

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

sau đó nhấp vào chọn tệp, có lẽ tôi sẽ phải đi đến một thư mục khác với thư mục hiện tại

281

that I checked last.

mà tôi đã kiểm tra lần cuối.

282

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

Vậy tôi sẽ chuyển đến khóa học HTML, bài học thứ ba, đó là tệp mà chúng ta đang làm việc cùng.

283

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

chọn tệp index.html của tôi, rồi mở tệp đó ở đây bằng trình xác thực.

284

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

Bây giờ tệp index.html đã được tải lên, chúng ta có thể nhấp vào nút kiểm tra và xem liệu chúng ta có HTML hợp lệ hay không.

285

So this is valid.

Vậy thì điều này là hợp lệ.

286

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

Tất cả đều ổn, đã hoàn tất kiểm tra tài liệu, không có lỗi hay cảnh báo nào hiển thị.

287

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

Nếu có lỗi hoặc cảnh báo, công cụ sẽ chỉ ra chính xác vị trí của lỗi đó, và bạn có thể sửa lỗi đó trực tiếp trong mã HTML của mình.

288

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

Hãy nhớ luôn nỗ lực hướng tới sự tiến bộ thay vì đòi hỏi sự hoàn hảo, và mỗi ngày một chút tiến bộ sẽ tạo ra kết quả vô cùng lớn về lâu dài.

289

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

Nếu video này hữu ích, hãy nhấn thích để ủng hộ nhé, và cảm ơn các bạn đã xem cũng như đăng ký kênh.

290

You're helping my channel grow.

Bạn đang giúp kênh của tôi phát triển đấy.

291

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

Chúc bạn một ngày thật tuyệt vời, và chúng ta sẽ sớm cùng nhau viết thêm nhiều đoạn mã nữa nhé.

Tải Ứng Dụng

Mọi thứ bạn cần để nói trôi chảy

Chấm điểm AIChấm từng câu nói

Luyện IPAThành thạo mọi âm

Từ vựngMở rộng vốn từ

Game Từ vựngHọc qua chơi

Quét QR

Download on theApp Store Get it onGoogle Play

Cùng kênh

FOR YOU

Video gợi ý

66 câu

Beginning Graphic Design: Fundamentals

Daily ConversationUniversity Students

27 câu

LEARNING ENGLISH - LESSON 1 ( Repeat and Remember)

Business EnglishDaily ConversationHigh School Students

371 câu

Learn 97% of Harvard's CS50 in 25 minutes

Daily ConversationUniversity Students

460 câu

Blender Donut Tutorial Part 1 (2026)

Daily ConversationUniversity Students

132 câu

Video

Daily ConversationUniversity StudentsWorking Adults

57 câu

Science in English #3 | The Periodic Table

Daily ConversationHigh School StudentsUniversity Students

285 câu

Ancient Greek Lesson 1: The Greek Alphabet

Daily ConversationUniversity StudentsWorking Adults

103 câu

you will never ask about pointers again after watching this video

Daily ConversationUniversity Students

91 câu

TS 97 Quick Start Video

Daily ConversationUniversity Students

162 câu

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

TeensDaily ConversationHigh School Students

Từ vựng và ghi chú luyện nói cho bài học này

Bài luyện nói này dựa trên video “HTML Tag Text Basics”. Những từ được nhắc lại nhiều nhất trong bài: page, element, html, add, code. Video này có 291 câu và 3496 từ để luyện shadowing. Phần lời nói dài 21:19. Người nói nói với tốc độ tự nhiên, khoảng 164 từ mỗi phút, gần với hội thoại hằng ngày. 82% số từ nằm trong 3.000 từ tiếng Anh thông dụng nhất; phần còn lại nên xem trước khi luyện.

Từ vựng quan trọng trong video

15 từ đáng học trong video, kèm phiên âm và nghĩa:

Từ	Phiên âm	Nghĩa
element danh từ	/ˈɛləmənt/	yếu tố
paragraph danh từ	/ˈpæɹəɡɹæf/	đoạn
symbol danh từ	/ˈsɪmbəl/	ký hiệu, biểu tượng
pasta danh từ	/ˈpɑ.stə/	mì ống
topic danh từ	/ˈtɑpɪk/	chủ đề
horizontal tính từ	/ˌhoɹəˈzɑn.təl/	ngang
format danh từ	/ˈfɔːɹ.mæt/	khổ (sách, giấy, bìa)
vacation danh từ	/veɪˈkeɪ.ʃən/	kì nghỉ
essay danh từ	/ˈɛs.eɪ/	tiểu luận
developer danh từ	/dɪˈvɛləpɚ/	nhà phát triển
arrow danh từ	/ˈæɹəʊ/	mũi tên, tên
hierarchy danh từ	/ˈhaɪ.ə.ɹɑː(ɹ).ki/	tôn ti, thứ bậc
server danh từ	/ˈsɝvɚ/	trình chủ, máy chủ
resource danh từ	/ɹɪˈzɔːs/	tài nguyên
collapse động từ	/kəˈlæps/	đổ, sập

Cụm động từ bạn sẽ nghe

Từ	Nghĩa
go back động từ	trở lại

Những câu đáng luyện lại

Các câu ngắn, trọn ý trong video mà bạn có thể dùng lại khi giao tiếp hằng ngày:

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

Ngữ pháp trong video

Những cấu trúc người nói dùng nhiều nhất, kèm đúng cụm từ trong video:

Cấu trúc	Trong video
Thì hiện tại hoàn thành tiếp diễn have/has been + -ing — việc bắt đầu từ trước và vẫn đang tiếp tục	I've been working · we've been working
Câu bị động be + quá khứ phân từ — nhấn vào việc xảy ra, không phải người làm	will be made · are called · be represented
Thì hiện tại hoàn thành have/has + quá khứ phân từ — việc đã xảy ra nhưng còn liên quan đến hiện tại	we've added · we've created · I've heard
Mệnh đề quan hệ who / which + mệnh đề — thêm thông tin về người hoặc vật	Kansas, which is · three, which is

Phát âm cần chú ý

Người nói dùng 106 dạng rút gọn, ví dụ I'm, I'll, we've. Hãy nói theo dạng ngắn đúng như bạn nghe.

Âm “sh” và “zh”: vacation /veɪˈkeɪ.ʃən/, separation /ˌsɛp.əˈɹeɪ.ʃən/, extension /ɪkˈstɛnʃən/, essentially /ɪˈsɛnʃəli/, perfection /pɚˈfɛk.ʃən/
Từ dài — đặt trọng âm cho đúng: entity /ˈɛn.tə.ti/ [-tʰi], horizontal /ˌhoɹəˈzɑn.təl/, developer /dɪˈvɛləpɚ/, hierarchy /ˈhaɪ.ə.ɹɑː(ɹ).ki/, visually /ˈvɪzju.əli/

Những âm người Việt thường gặp khó:

Cụm phụ âm cuối — đọc đủ từng âm, đừng nuốt âm cuối: element /ˈɛləmənt/, collapse /kəˈlæps/, select /sɪˈlɛkt/, afterwards /ˈæf.tɚ.wɚdz/, script /skɹɪpt/
Âm /tʃ/, /dʒ/ và /ʒ/ — tiếng Việt không có, đừng đọc thành “ch” hay “gi”: naturally /ˈnæt͡ʃ.(ə.)ɹə.li/, inject /ɪnˈd͡ʒɛkt/
Âm /æ/ — mở miệng rộng hơn âm “e”: paragraph /ˈpæɹəɡɹæf/, format /ˈfɔːɹ.mæt/, arrow /ˈæɹəʊ/, valid /ˈvælɪd/, collapse /kəˈlæps/

Cách luyện với video này

Nghe hết video một lần, chưa cần nói, và ghi lại những từ bạn chưa biết.
Bắt đầu ở tốc độ 0,75×, nói đuổi từng câu, rồi quay lại tốc độ bình thường khi đã quen.
Ghi âm giọng mình rồi so với bản gốc, chú ý các từ như element, paragraph, symbol.

Phương Pháp Shadowing Là Gì?

Shadowing là kỹ thuật học ngôn ngữ có cơ sở khoa học, ban đầu được phát triển cho chương trình đào tạo phiên dịch viên chuyên nghiệp và được phổ biến rộng rãi bởi nhà đa ngôn ngữ học Dr. Alexander Arguelles. Nguyên lý cốt lõi đơn giản nhưng cực kỳ hiệu quả: bạn nghe tiếng Anh của người bản xứ và lặp lại to ngay lập tức — như một "cái bóng" (shadow) đuổi theo người nói với độ trễ chỉ 1–2 giây. Khác với luyện ngữ pháp hay học từ vựng bị động, Shadowing buộc não bộ và cơ miệng phải đồng thời xử lý và tái tạo ngôn ngữ thực tế. Các nghiên cứu khoa học xác nhận phương pháp này cải thiện đáng kể phát âm, ngữ điệu, nhịp điệu, nối âm, kỹ năng nghe và độ lưu loát khi nói — đặc biệt hiệu quả cho người luyện IELTS Speaking và muốn giao tiếp tiếng Anh tự nhiên như người bản ngữ.

Phương pháp shadowing: đọc hướng dẫn từng bước đầy đủ →

Luyện nói tiếng Anh bằng Shadowing qua video: HTML Tag Text Basics | HTML5 Element Text Tutorial

Chọn chế độ luyện tập

Tải Ứng Dụng

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!

Từ vựng và ghi chú luyện nói cho bài học này

Từ vựng quan trọng trong video

Cụm động từ bạn sẽ nghe

Những câu đáng luyện lại

Ngữ pháp trong video

Phát âm cần chú ý

Cách luyện với video này

Phương Pháp Shadowing Là Gì?