Bài viết này dành cho các bạn mới học lập trình web, mình tổng hợp các thẻ tag trong HTML, HTML5 thường. Học cách dùng các thẻ HTML cơ bản thông dụng nhất. Cùng tham khảo bài viết nhé!
Mục lục bài viết
Thẻ HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ lập trình front end nền tảng không thể thiếu cho tất cả các web developer HTML giúp tạo nên cấu trúc tĩnh khung xương của trang web, còn CSS sẽ tạo nên màu sắc, cấu trúc động, bố cục của trang web.
Thẻ HTML là thành phần chính của ngôn ngữ này, nó giúp tạo nên các bố cục, cấu trúc cơ bản của một trang web.
Có hai loại thẻ chính trong html đó là:
- Thẻ block : Thẻ HTML thường được sử dụng theo cặp bao gồm một thẻ đóng và một thẻ mở và có thể viết trên nhiều dòng
- Thẻ inline: là các thẻ chỉ viết trên một dòng.
Các thẻ block trong HTML
Các thẻ này đều hoạt động được trên HTML5 và tất cả các lập trình web đều phải biết.
1. Thẻ tiêu đề
Các thẻ tiêu đề thường dùng như: h1, h2, h3, h4 . . . Thẻ này dùng để tạo heading cho trang web, độ lớn của tiêu đề sẽ giảm dần từ trái qua phải. Ví dụ thẻ h1 > h2 > h3.
Cách dùng: Sử dụng cặp thẻ tương ứng.
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>2. Thẻ danh sách <ol> </ol> và <ul></ul>
Ở đây mình giới thiệu thẻ danh sách có thứ tự ol ( viết tắt của ordered list ). Thẻ danh sách luôn có thẻ li (list item) đi kèm để biếu diễn một phần tử của danh sách.
Ví dụ:
<ol>
<li> First Item </li>
<li> Second Item </li>
<li> Third Item </li>
</ol>
Thẻ <ul> </ul> dùng cho danh sách không cần thứ tự.
3. Thẻ đoạn văn <p> </p>
Viết tẳ của paragraph. Thẻ này dùng để cấu trúc các đoạn văn bản. Trong thẻ này chỉ được sử dụng các thẻ inline
Ví dụ:
<p> Here is example paragraph <p>4. Thẻ <table> </table>
Gồm các thẻ con bên trong:
- <thead> </thead> : Đầu của bảng
- <th></th>: Heading của bảng
- <tbody> </tbody> : thân của bảng
- <td></td> : Nội dung của bảng ( table data)
Ví dụ:
<table>
<thead>
<th> Heading 1</th>
<th> Heading 2 </th>
<th> Heading 3 </th>
</thead>
<tbody>
<tr>
<td> Item 1 </td>
<td> Item 2 </td>
<td> Item 3 </td>
</tr>
</tbody>
</table>
5. Thẻ <form> </form>
Các thuộc tính của form như: radio, text, password,
Ví dụ:
<form>
<div>
<input type="text" placeholder=" Enter Acount" name = " Acount">
<input type="password" placholder="Enter Password" name = "passowrd" >
</div>
<div>
Favorite color?
<input name="color" value="red" type="radio"> Red
<input type="radio" name="color" value="yellow" > Yellow
<input type="radio" name="color" value="green" > Green
</div>
</form>
5. Thẻ <div> </div>
Viết tắt của division, có nghĩa là phân chia. Cặp thẻ tag này giúp phân chia khu vực trong trang web.
Trong thẻ div không nên sử dụng các cặp thẻ như: <style></style> ; <script> </script>
6. Thẻ <section> </section>
Cặp thẻ tag này dùng để định nghĩa một khu vực trong HTML, có tính năng gần giống thẻ div
7. Thẻ head, body, footer
Tương ứng là đầu, thân và chân của trang web. Tiêu đề trang nằm trong thẻ <head></head>. Toàn bộ nội dung của trang web sẽ trong thẻ <body></body> và nội dung chân trang trong thẻ <footer></footer>.
8.Thẻ <article></article>
Dùng để định nghĩa một nội dung riêng biệt, thường là quảng cáo, các comment . . .
9. Thẻ <aside></asize>
Dùng để định nghĩa nội dung bên ngoài nội dung chính, ví dụ như thanh sidebar . ..
Thẻ này có thể chứa các thẻ tag khác.
10. Cặp thẻ <figure> và <figcaption>
Cặp thẻ này dùng để nhấn mạnh các thuộc tính có liên quan đến nhau. Ví dụ như mô tả của một hình ảnh, chú thích.
<figure>
<p> <img scr="flower.jpg alt="Rose" ></p>
<figcaption> This is Rose picture</figcaption>
</figure>
11. Thẻ <strong></strong>, <em></em>
Dùng đế nhấn mạnh đối tương trong html
12. Các thẻ định dạng kiểu chữ đậm, nghiêng, gạch chân
- Thẻ <b><\b> : Kiểu chữ in đậm ( black )
- Thẻ <u></u> : Kiểu chữ gạch chân ( underlined )
- Thẻ <i> </i> : Kiểu chữ in nghiêng ( inclined )
- Thẻ <strike> </strike : Kiểu chữ gạch ngang
Các thẻ inline trong HTML
Như đã nói ở phần đầu bài viết. Thẻ inline là thẻ chỉ cần dùng một thẻ mở, viết trên một dòng và không cần thẻ đóng
1. Thẻ hình ảnh <img>
Dùng để chèn hình ảnh vào trang web.
Cú pháp: <img scr= ” path of image ” alt = ” Alternative of image “
Trong đó: Path là đường dẫn tới hình ảnh. Allternative là thuộc tính của ảnh do bạn tự đặt
Ví dụ:
<img scr="example.jpg" alt=" This is example picture " >2. Thẻ liên kết <a> </a>
Viết tắt của adress dùng để tạo ra các link liên kết khi chọn vào đối tượng trong liên kết.
Cú pháp: <a href = “link”> Text </a>
Ví dụ:
<a href="https://google.com"> Click here to go to google.com </a>
3. Thẻ </br>
Viết tắt của break, đây là thẻ dùng để xuống dòng trong html. Thẻ này còn có thể viết là <br>
4. Thẻ <span> </span>
span tag dùng để nhóm một hoặc nhiều thẻ inline lại với nhau
Lời kết
Trên đây là tổng hợp các thẻ HTML thường dùng nhất. Ngoài ra còn một số thẻ tag và thuộc tính khác nữa. Cảm ơn bạn đã xem bài viết này của mình. Xem thêm các bài chia sẻ việc học lập trình CSS khác của mình tại đây nhé!
