HTML là gì và các thẻ quan trọng trong HTML (Bài 1)

Ngày đăng: 26/01/2024

1.Các thẻ quan trọng trong HTML
2.Phân biệt giữa thẻ inline và thẻ block

HTML (Hyper Text Markup Language) hay còn gọi là Ngôn ngữ đánh dấu siêu văn bản. HTML dùng để xây dựng giao diện website (User Interface), là những gì chúng ta nhìn thấy khi truy cập một trang web bất kỳ. HTML sử dụng các thẻ khác nhau để biểu diễn văn bản, hình ảnh, liên kết,... cho website. HTML có thể kết hợp với CSS và Javascript để tạo nên website sống động và thân thiện hơn với người dùng.

1.Các thẻ quan trọng trong HTML

HTML sử dụng các thẻ đánh dấu và định nghĩa trang web. Ví dụ:

<a href="https://bqsoft.vn" target="_blank">Link đến website của Công ty Bqsoft</a>

Trong ví dụ trên ta có thẻ a dùng để hiển thị link để truy cập tới 1 website. Có 2 thuộc tính (gọi là attributes) trong thẻ đó là href và target. Href chỉ định đường link truy cập tới khi click vào thẻ , còn target có giá trị bằng "_blank" nghĩa là khi click vào link thì sẽ truy cập website đó trên 1 tab mới.

Sau đây là các thẻ quan trọng hay được dùng

1.1 Thẻ html:

Định nghĩa đối tượng HTML. Là thẻ lớn nhất bao toàn bộ các thẻ khác.

<html>
 <head></head>
 <body></body>
</html>

1.2 Thẻ head:

Chứa các thông tin về tài liệu như các thẻ title, thẻ meta, ...

<head>
 <title>Tiêu đề này hiển thị trên thanh tiêu đề của trình duyệt</title>
 <meta name="description" content="..."></meta>
</head>

1.3 Thẻ body:

Chứa toàn bộ nội dung của trang web như văn bản, liên kết, biểu mẫu, ...

<body>
 <h1>Tiêu đề chính của trang web</h1>
 <img src="đường_dẫn_hình ảnh" />
</body>

1.4 Thẻ title:

Đặt tiêu đề của trang web hiển thị trên thanh tiêu đề của trình duyệt

<title>Đây là trang chủ</title>

1.5 Thẻ div:

Dùng để hiển thị 1 block (khối) trong HTML. Thẻ div sẽ nhóm và chứa các thẻ khác để dễ quản lý hơn

<div>
 <a href="https://bqsoft.vn">Website</a>
 <p>Thẻ p dùng để hiển thị văn bản</p> 
</div>

1.6 Các thẻ Heading:

Các thẻ heading bao gồm: h1, h2, h3, h4, h5, h6. Theo thứ tự giảm dần font-size (cỡ chữ nhỏ dần). Các thẻ heading dùng để hiển thị các tiêu đề, h1 cho tiêu đề trang (lớn nhất), các thẻ heading còn lại dành cho các tiêu đề nhỏ hơn.

<h1>Tiêu đề lớn nhất</h1>
<h2>Tiêu đề nhỏ hơn</h2>
<h3>iêu đề nhỏ hơn</h3>
<h4>iêu đề nhỏ hơn</h4>
<h5>Tiêu đề nhỏ hơn</h5>
<h6>iêu đề nhỏ hơn</h6>

1.7 Thẻ p:

Thẻ p dùng để hiển thị đoạn văn bản

<p>Những đoạn văn bản sẽ được bao bọc bởi thẻ p</p>

1.8 Thẻ a:

Dùng để truy cập tới 1 website nào đó. Thuộc tính quan trọng nhất của thẻ a là href, chưa đường link của website cần truy cập tới.

<a href="google.com"> Google </a>

1.9 Thẻ img:

Dùng để hiển thị hình ảnh trên website. Hai thuộc tính quan trọng là src và alt, src chỉ định đường dẫn chứa ảnh, trong khi đó alt chứa đoạn text để hiển thị khi đường dẫn ảnh sai(chú thích cho người dùng hiểu được bức ảnh).

<img src="đường_dẫn_ảnh" alt="text sẽ hiển thị khi đường dẫn ảnh không đúng" />

1.10 Thẻ span:

Dùng để hiển thị 1 phần nhỏ văn bản, cũng giống như thẻ p nhưng phạm vi nhỏ hơn

<p>
 Đoạn văn bản được
 <span>highlight</span>
 chỗ này
</p>

1.11 Thẻ table

Tạo ra bảng trên website. Gồm các thẻ con bên trong như tr (hàng), td (ô)

<table>
 <tr>
 <th>Tên</th>
 <th>Tuổi</th>
 </tr>
 <tr>
 <td>Thiên</td>
 <td>23/td>
 </tr>
 <tr>
 <td>Sơn</td>
 <td>26</td>
 </tr>
</table>

1.12 Thẻ ul, ol

Dùng để hiển thị danh sách, ol hiển thị danh sách có thứ tự, còn ul thì không. Thẻ con bên trong là li

<ul>
 <li>Khoá học lập trình Frontend</li>
 <li>Khoá học lập trình Backend</li>
 <li>Khoá học lập trình Fullstack</li>
 <li>Khoá học lập trình Mobile</li>
</ul>

1.13 Thẻ iframe:

Dùng để nhúng 1 trang web hoặc 1 phần của trang web vào trang web khác . Ví dụ nhúng google map vào website của bạn

<iframe src="đường_dẫn_đến_website_khác" width="width" height="height" frameborder="0"></iframe>

1.14 Thẻ form:

Dùng để tạo biểu mẫu cho người dùng nhập. Thẻ form chứa nhiều thẻ khác như: text input, select, radio button, checkbox, textarea, ...

<form>
 <input type="text" placeholder="Nhập tên" />
 <button>Gửi</button>
</form>

1.15 Thẻ input:

Thẻ input có nhiều loại khác nhau tuỳ vào type mà chúng ta truyền vào

<input type="text" />
<input type="password" />
<input type="radio" />
<input type="checkbox" />
<input type="button" />

Lưu ý: Với trong 1 form với nhiều thẻ radio cùng thuộc tính name thì chỉ có thể chọn 1, còn với checkbox thì có thể chọn nhiều

1.16 Thẻ select:

Chứa nhiều thẻ con option, dùng để chứa danh sách cho người dùng chỉ chọn 1. Ví dụ danh sách các tỉnh thành phố hay danh sách chương trong 1 cuốn sách

<select>
 <option>Chọn tỉnh / T.p</option>
 <option>Hà nội</option>
 <option>Đà nẵng</option>
 <option>Hải phòng</option>
</select>

1.17 Thẻ textarea:

Dùng để chứa nội dung dài do người dùng nhập vào. Ví dụ chứa bình luận của người dùng cho một bài viết nào đó

<textarea rows="4"></textarea>

1.18 Thẻ audio:

Dùng để chạy một file audio trong HTML

<audio controls>
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

1.19 Thẻ video:

Dùng để chơi 1 file video trong HTML

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Trên đây là những thẻ quan trọng nhất và thường dùng khi chúng ta xây dựng giao diện của 1 website. Còn nhiều thẻ nữa chưa đề cập ở đây, các bạn có thể tìm hiểu thêm ở những nguồn khác. Quan trọng là khi thực hành nhiều sẽ tìm hiểu trên các trang lớn như google hay stackoverflow để biết thêm nhiều thẻ khác.

2.Phân biệt giữa thẻ inline và thẻ block

Thẻ inline: Là những thẻ không nằm riêng trên một dòng nếu trước nó và sau nó là những thẻ block. Những thẻ inline bao gồm: a ,span, label, input, button, img, select, small, textarea, code, script, .... Cùng xem ví dụ bên dưới:

thiết kế web, seo tổng thể, thiết kế app

Như hình trên ta thấy, thẻ span và thẻ label là 2 thẻ inline sẽ cùng nằm trên 1 hàng, còn thẻ p là thẻ block thì nó sẽ hiển nhiên chiếm một hàng. Độ rộng mặc định của thẻ inline là bao vừa nội dung bên trong thẻ, còn độ rộng của thẻ block sẽ bằng 100% độ rộng của thẻ bao ngoài nó.

Thẻ block: Là thẻ nằm riêng trên một hàng, đồng nghĩa thẻ block sẽ có độ rộng bằng với độ rộng của thẻ bố bao phía ngoài nó

Ở bài tiếp theo chúng ta sẽ tìm hiểu về những thuộc tính quan trọng của từng thẻ và cách dùng chúng

Liên hệ ngay tại đây với chúng tôi để được tư vấn nhanh nhất hoặc liên hệ:

Hotline: 0705.550.553

Email: bqsoftvn@gmail.com

Fanpage: https://www.facebook.com/bqsoftvn

Hân hạnh được hợp tác!

Bài viết