Bài viết ngày hôm nay sẽ mang đến cho bạn những thông tin về các thẻ HTML cơ bản trong thiết kế website mà bất kỳ lập trình viên nào cũng phải biết để ứng dụng trong công việc một cách tốt hơn. Hãy cùng topviecit.vn tìm hiểu nhé!
Danh sách các thẻ HTML được sử dụng phổ biến
Thẻ HTML cơ bản
Dưới đây là danh sách các thẻ HTML cơ bản nhất, tạo nên khung sườn cho 1 trang web đơn giản. Chắc chắn sẽ rất cần thiết cho những ai đang tìm hiểu về ngành này.
<!DOCTYPE>: đây là thẻ mặc định trong mỗi trang web, nó được đặt ở đầu trang web của bạn, thực hiện nhiệm vụ khai báo rằng đây là 1 trang có nội dung. Bạn có thể không cần đặt nó nhưng để trang web chuẩn seo và có cơ hội lên top thì đừng quên thẻ HTML này bạn nhé.
<html>: Thẻ này là thẻ mở đầu và mang tính bắt buộc, nếu thiếu thẻ này, trang web sẽ không thể tồn tại.
<head>: đây chính là phần đầu của trang web, nghĩa là phần này đặt những thẻ như CSS, title JS… Đặc điểm của các thẻ này là mang tính khai báo và định dạng chứ không hiển thị ra ngoài trang web đó.
<title>: Thẻ này là quy định tiêu đề của trang web, nó sẽ hiển thị ra ngoài trình duyệt khi người dùng lướt.
<body>: Thẻ này là phần nội dung của trang web. Toàn bộ code hiển thị đều sẽ nằm trong thẻ này.
<h1> đến <h6>: các thẻ này quy định tiêu đề trong phần nội dung của trang web. Cấp độ sắp xếp từ <h1> <h2> <h3> <h4> <h5> <h6>, chúng được dùng để chèn những cái chữ in đậm nổi bật, tạo nên điểm nhấn cho trang web.
<p>: Đây là thẻ để bọc văn bản. Mọi đoạn text hay chữ trong HTML sẽ nằm hoàn toàn trong thẻ này.
<br>: Thẻ này giúp bạn tạo một dòng mới như tính năng xuống dòng của word
<hr>: Thẻ này có khả năng tạo một đường kẻ ngang trên trang của bạn
<!–…–>: Thẻ HTML này giúp bạn chèn 1 cái đoạn ghi chú bất kỳ có trong code để lập trình viên tự tạo ghi chú. Điều này giúp họ tìm ra các thẻ dễ dàng hơn để chỉnh sửa sau này.
Thẻ HTML chuyên về giao diện và định dạng web
<abbr>: Thẻ được dùng để khai báo tiêu đề cho một danh từ, khái niệm nào đó để khi người dùng để chuột vào từ đó thì tiêu đồ mô tả thêm về từ này sẽ xuất hiện.
<address>: Thẻ này dùng để bọc phần tử về một thông tin liên hệ hay một địa chỉ cụ thể của chủ thể. Nói đơn giản, khi bạn muốn hiển thị công khai thông tin về địa chỉ hoặc thông tin liên lạc trên website, bạn hãy đưa nội dung đó vào thẻ này
<b>: Thẻ này được sử dụng để in đậm 1 chữ nào đó trong văn bản
<i>: Thẻ có tính năng in nghiêng 1 chữ bất kỳ trong văn bản của bạn.
<u>: Thẻ này dùng để gạch dưới nội dung trong văn bản mà bạn tạo
<bdi>: Khi bạn muốn cố định 1 chuỗi text ở 1 vị trí nhất định giúp nó không bị trình duyệt hiểu nhầm và tự dịch chuyển khỏi vị trí ban đầu thì bạn có thể dùng thẻ này
<bdo>: Thẻ này được sử dụng với mục đích quy định về cách hiển thị, trình tự hiển thị của chuỗi văn bản ở trình duyệt.
<blockquote>: bạn hoàn toàn có thể chèn một đoạn trích, một lời trích dẫn nào đó vào trang web của bạn khi dùng thẻ này.
<cite>: Thẻ này có khả năng cung cấp cho trình duyệt hiểu rằng văn bản đó là một danh từ, một chủ thể nhất định chứ không phải là một từ bình thường.
<code>: Tương tự như thẻ cite, thẻ code dùng để định danh 1 từ là thuật ngữ thuộc về code.
<del> và <ins>: 2 thẻ này có thể được dùng song song với nhau. Chúng có chức năng là báo cho trình duyệt hiểu rằng văn bản của bạn được chuyển đổi.
<em>: Thẻ được dùng để nhấn mạnh 1 từ nhất định trong 1 đoạn văn bản của bạn
<kbd>: Dùng để định danh 1 từ hoặc cụm từ trong văn bản là tên của một nút hoặc bàn phím máy tính.
<pre>: Thẻ này có thể xác định văn bản được định dạng đúng như lúc bạn nhập code.
<progress>: Thẻ tạo ra 1 thanh trạng thái về tiến trình xử lý được bao nhiêu % trong quá trình làm việc
<q>: Khi cần đánh dấu 1 trích dẫn ngắn trong văn bản bạn nên dùng thẻ này
<small>: Thẻ được dùng để chèn chữ nhỏ
<strong>: Dùng với mục đích in đậm từ vừa nhấn mạnh
<sub> và <sup>: Chèn thử chữ nhỏ trên và thẻ chữ nhỏ dưới.
<time>: Thẻ này có mối quan hệ mật thiết đến yếu tố thời gian.
<template>: Thẻ này chứa code giao diện giúp nhắc trình duyệt nó không phải là 1 phần từ render ra để hiển thị mà nó là 1 phần từ html trong code thực thi.
Các thẻ HTML head, khai báo trong trang web
<style>: thẻ thường người ta sẽ đặt ở phần header để định nghĩa CSS trong trang đó.
<meta>: Thẻ khai báo các thông tin của trang khi chia sẻ lên các trang mạng xã hội….
<base>: Thẻ được dùng cho việc khai báo tên miền định danh cho website của bạn
<script>: Khai báo triển khai javascript trong một trang web HTML
<link>: Thẻ liên kết đến 1 file CSS bằng liên kết.
Các thẻ HTML về bố cục và layout
<div>: Thẻ HTML này được sử dụng để nhóm các phần tử lại với nhau, giúp cho việc định dạng cũng như thiết kế bố cục của trang web được tiện lợi hơn
<span>: Với thẻ này các phần tử nội tuyến lại với nhau để tiện cho việc định dạng CSS
<header>: Khai báo phần đầu của trang web
<footer>: Khai báo phần chân của trang web
<main>: Khai báo phần thân của trang web
<dialog>: Tạo một hộp thoại trong trang web
<summary>&<details>: Tạo phần tử có dạng: “chỉ hiển thị tiêu đề còn chi tiết bị ẩn, khi bấm vào tiêu đề thì chi tiết mới hiển thị”
<section>: Khai báo khu vực có sự xuất hiện của tài liệu
<article>: Khai báo tài liệu kiểu article
<aside>: Xác định nội dung ngoài nội dung trang web
Các thẻ HTML về chức năng trong thiết kế website
<a>: Thẻ này có khả năng tạo một liên kết đến một tài liệu nào đó (khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)
<nav>: Xác định một tập hợp các liên kết và thường được sử dụng kết hợp với CSS để tạo một thanh menu
<ul>: Khai báo một danh sách không có thứ tự
<ol>: Khai báo một danh sách có thứ tự
<embed> và <object> : Có chức năng giống nhau, dùng để nhúng một “tài liệu” nào đó vào trang web
<table>: Thẻ dùng để tạo 1 bảng trong HTML
<iframe>: Nhúng một trang web khác vào trang web đang có
<audio>: Tạo một trình phát âm thanh cho trang web
<video>: Tạo một trình phát video cho web
<img>: Nhúng 1 hình ảnh vào trang web
<map>&<area>: Tạo một bản đồ ảnh trong trang
Trên đây là các thẻ HTML cơ bản và phổ biến nhất hiện nay mà bạn có thể tham khảo để phục vụ tốt hơn cho công việc.
