HTML toàn tập cho người mới | Phần 3 của RealDev sẽ giúp Bạn có cái nhìn sâu hơn về các Thẻ HTML khi ở Phần 2 mình đã hướng dẫn cho các bạn các kiến thức về các thẻ trong Form một cách khá chi tiết kèm các hình ảnh minh hoạ cũng như các lưu ý khi làm việc với Form. Tiếp tục ở phần 3 này mình sẽ nói về các thẻ thường được dùng trong cặp thẻ head nhé.
## Thẻ title
Đây là thẻ định nghĩa tiêu đề của trang web, nó sẽ hiển thị trên tab của trình duyệt ví dụ các bạn đang đọc bài này của mình thì trong HTML của nó sẽ là như đoạn code này, các bạn có thể rê chuột vào tab để Chrome hiển thị tooltip lên là thấy nha.
HTML toàn tập cho người mới | Phần 3 | RealDev Blogs</title>
## Thẻ Meta
<meta name="viewport" content="width=device-width, initial-scale=1">
Đoạn code này chắc các bạn sẽ hay thấy ở các trang web, đoạn này giúp web chúng ta hiển thị responsive để các bạn có thể code responsive đấy.
<meta charset="UTF-8">
Đoạn này thì định nghĩa hệ thống kí tự mà sẽ hiển thị trên web thường hay dùng là UTF-8
<meta name="description" content="Đoạn mô tả ngắn cho trang web"/>
Thẻ này dùng để khai báo mô tả ngắn cho trang web khi các bạn tìm kiếm trên Google sẽ thấy ngoài tiêu đề thì có 1 đoạn chữ ở dưới tiêu đề mô tả cho trang web, nếu không có thẻ này thì Google sẽ lấy nội dung trong bài viết
<meta name="robots" content="noindex"/>
Thẻ này là để báo cho Google biết là trang web này có cần được index không(lập chỉ mục khi tìm kiếm), nếu không khai báo thẻ này thì Google sẽ hiểu là có index nha.
<html lang="en">
Thuộc tính lang=”en” dùng để khai báo ngôn ngữ chính mà trang web đang sử dụng để từ đó công cụ tìm kiếm như Google hướng tới người dùng tốt hơn. Nếu website là tiếng Anh thì lang=”en” còn tiếng Việt thì lang=”vi”.
## Thẻ style
Thẻ này dùng để chứa code CSS bên trong trang web luôn, các bạn sẽ hay nghe từ internal CSS đấy
<style type="text/css"> .header { background-color: blue; }</style>## Thẻ link
Hiểu đơn giản nhất là thẻ này dùng để chèn các link như CSS hay là Google fonts từ local hay là từ bên ngoài vào ví dụ dưới đây là sử dụng file styles.css ở dưới máy tính, và dùng font Roboto từ Google fonts
<link rel="stylesheet" type="text/css" href="./styles.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Trong đó href sẽ truyền vào đường dẫn, còn rel thì có các loại như là stylesheet tức là liên quan tới CSS, icon liên quan tới favicon, author dẫn đến trang tác giả của trang web, preconnect để khởi tạo kết nối mạng sớm hơn và tăng hiệu suất tải trang. Google font hay dùng để tăng tốc độ load font của họ.
<link rel="icon" href="favicon-16x16.png" type="image/x-icon" sizes="16x16">
## Thẻ iframe
Thẻ này dùng để nhúng trang web khác hay video vào trang web của chúng ta như video dưới đây mình dùng thẻ iframe đưa vào.
<iframe width="1168" height="730" src="https://www.youtube.com/embed/LVs6k-N3byE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## Thẻ audio
Đúng như tên gọi của nó thẻ dùng để các bạn chèn nhạc vào trang web của chúng ta, trong đó src là truyền vào đường dẫn tập tin còn controls nghĩa là cho phép hiển thị các công cụ như nút play, nút pause…
<audio src="https://htmlreference.io/assets/Hal.mp3" controls></audio>
## Thẻ video
Thẻ này thì chèn video vào để hiển thị, phù hợp khi các bạn có video của riêng mình chèn vào chứ không phải dùng từ Youtube Iframe
<video src="https://htmlreference.io/assets/HTML%205%20Video.mp4" controls></video>
## Các thẻ khác
Các thẻ inline như sup để làm chữ nằm lên trên khi chúng ta nói về độ C có biểu tượng độ ở phía trên, còn thẻ sub thì ngược lại nó sẽ nằm dưới như khi chúng ta nói về H2O thì số 2 sẽ nằm ở dưới.
Nước là H<sub>2</sub>O
30<sup>o</sup>C
Nếu các bạn muốn chữ có đường line gạch ngang, giống thuộc tính trong CSS text-decoration: line-through thì dùng thẻ del
<p>This text is normal but <del>this text is strike</del></p>
Thẻ blockquote khi bạn muốn trình bày nội dung dạng quote, kiểu như câu nói trích dẫn
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie"> Be less curious about people and more curious about ideas.</blockquote>
Thẻ code giúp hiển thị dưới dạng code trong văn bản, các bạn có thể thấy rõ những chữ màu đỏ trong bài của mình mà các bạn đang đọc là mình dùng thẻ code để nó hiển thị như thế.
Type <code>npm install</code> in your terminal to install a project's dependencies.
Thẻ figure và figcaption thường được sử dụng chung với nhau khi muốn hiển thị hình ảnh kèm theo caption ở dưới
<figure> <img src="/images/html-reference-logo.png" alt="HTML Reference logo"> <figcaption>The HTML Reference logo</figcaption></figure>
Tạm kết
Series HTML cơ bản tạm thời kết thúc ở đây, sắp tới mình sẽ chia sẻ một series khác là CSS cơ bản toàn tập để các bạn được củng cố kiến thức tốt và vững chắc hơn. Hi vọng qua series HTML cơ bản sẽ có ích phần nào cho các bạn trong quá trình học tập và cải thiện kiến thức nhe..
Thiết kế Website
Fix Virus Website
Tối Ưu + Tăng tốc Website
Thêm Tính Năng Website
OnPage Website
OffPage Website
Dịch vụ SEO
Chia sẻ lên Facebook
Chia sẻ lên Twitter
Chia sẻ lên LinkedIn
Chia sẻ lên Pinterest
Chia sẻ lên Email