Các thẻ trong html cơ bản cập nhật mới nhất 2019

/ Lập trình web / Html & Css 523 0 1 năm trước

Dưới đây là danh sách các thẻ html cơ bản và thường xuyên được sử dụng trong hầu hết các dự án website. Để tiện trong việc học và thực hành thì chúng ta sẽ phân loại các thẻ html thành từng nhóm theo chức năng.

Các thẻ chia bố cục trang web

Xét ví dụ sau:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name='viewport' content="width=device-width,initial-scale=1" />
        <title>Các thẻ chia bố cục trang web</title>
    </head>
    <body>
        <header>
            Đây là đầu trang
        </header>
        <main>
            Nội dung chính 
        </main>
        <footer>
            Chân trang
        </footer>
    </body>
</html>

Trong ví dụ này chúng ta đã sử dụng các thành phần sau:

<!DOCTYPE html> : Quy định phiên bản html được sử dụng, ở đây chúng ta đang khai báo sử dụng html5. Thành phần này phải được viết ngay dòng đầu tiên, tức là trước tất cả các thành phần khác.
html: Thẻ đánh dấu bắt đầu và kết thúc tài liệu html, tất cả nội dung của tài liệu phải nằm trong thẻ html.
head: Thẻ chứa các thông tin bổ sung cho trang web, nội dung trong thẻ head không trực tiếp hiển thị ở vùng xem website. Các thông tin bổ sung như tiêu đề trang, icon, ngôn ngữ, chế độ hiển thị ...
body: Thẻ chứa phần nội dung hiển thị cho người dùng xem.
meta: Các thông tin bổ sung cho trang web, thẻ meta là con trực tiếp của thẻ head.
title: Thẻ quy định tiêu đề trang web, thẻ title là con trực tiếp của head.
header: Thẻ phân vùng nội dung dành cho đầu trang. Thông thường, phần đầu trang sẽ không thay đổi nhiều giữa các trang con trong cùng một web. Ví dụ, trang chủ, trang chi tiết sản phẩm, trang thanh toán, trang đăng nhập ở header đều có logo, ô tìm kiếm. Chúng ta cần lưu ý tránh nhầm lẫn header với head.
main: Nội dung chính của trang con hiện tại. Ví dụ trong trang chủ của shop bán hàng thì main sẽ chứa sản phẩm mới, giảm giá, bán chạy, slide sản phẩm. Trang đăng nhập thì phần main chứa form để đăng nhập.
footer: Thẻ phân vùng dành cho chân trang, thường chứa các thông tin về trang web như địa chỉ, map, số điện thoại, email người quản lý...

Các thẻ heading - tiêu đề

Các thẻ heading tạo nên một mô hình phân cấp nội dung cho trang hiện tại, giúp người dùng dễ dàng hiểu được ý nghĩa của trang web.

Xét ví dụ sau về các thẻ tiêu đề

<main>
    <h1>Trang bán hàng trực tuyến abc</h1>
    <!--something-->
    <h2>Sản phẩm mới</h2>
    <!--something-->
    <h3>Mới trong hôm nay</h3>
    <!--something-->
    <h3>Mới trong tháng này</h3>
    <!--something-->
    <h2>Sản phẩm giảm giá</h2>
    <!--something-->
    <h3>10 đến 30 phần trăm</h3>
    <!--something-->
    <h3>Giảm giá trên 50 phần trăm</h3>
    <!--something-->
</main>

Trong ví dụ này chúng ta đã dùng các thành phần:

h1: Thẻ quy định tiêu đề chính cho trang hiện tại. Trên mỗi trang chỉ nên có một thẻ h1.
h2: Thẻ tiêu đề bổ nghĩa cho h1.
h3: Thẻ tiêu đề bổ nghĩa cho h2.

Tương tự, chúng ta có thể có h4, h5, h6.

Ở chế độ mặc định, cỡ chữ từ h1 đến h6 sẽ nhỏ dần.

Các thẻ trình bày văn bản

<main>
    <h1>Trình bày văn bản</h1>
    <p>
        Đây là một đoạn văn dài thật là dài luôn.
        Trong đoạn văn này thì có những chữ bình thường. 
        <br>
        Có những chữ lại được <b>in đậm</b>,
        <br>
        Có những chữ <strong>nhấn mạnh</strong>,
        <br>
        <i>rồi chữ nghiêng nữa</i>,
        <br>
        có chữ thì <sup>cao lên</sup>,
        <br>
        có chữ thì <sub>thấp xuống</sub>,
        <br>
        rồi chữ có <u>gạch chân</u>
    </p>
    <blockquote>
        Đây là khối trích dẫn nha các bạn. Khối trích dẫn là câu nói của một người nào đó không qua chỉnh sửa.
        <br>
        -- Thầy Nam nói vậy --
    </blockquote>
</main>

Chúng ta có thể sử dụng các thẻ sau để trình bày đoạn văn, đoạn chữ trong website:

p: Thẻ trình bày một đoạn văn. Mỗi đoạn văn sẽ hiển thị trên một dòng vì p là thẻ dạng block.
br: dùng để ngắt dòng tại vị trí bất kỳ, nghĩa là phần nội dung ngay sau thẻ br sẽ bị ép xuống dòng mới.
b: Thẻ in đậm phần chữ bên trong.
strong: Thẻ để nhấn mạnh nội dung. Về hiển thị, nội dung trong thẻ strong cũng được in đậm giống như thẻ b. Tuy nhiên, về mặt ý nghĩa thì nội dung trong thẻ strong được nhấn mạnh hơn.
u: Thẻ trình bày chữ với định dạng có gạch chân bên dưới.
i: Thẻ trình bày chữ nghiêng qua phải.
sup: Trình bày đoạn chữ sẽ hiển thị cao hơn so với các nội dung khác trong cùng dòng.
sub: Trình bày đoạn chữ sẽ hiển thị thấp hơn so với các chữ khác trong cùng dòng.
blockquote: Trình bày đoạn văn được trích dẫn từ người hoặc nguồn khác. Ví dụ danh ngôn, châm ngôn, truyện ...

Các thẻ phân vùng nội dung

Chúng ta dùng thẻ div để phân vùng các nội dung trên trang web thành từng khối riêng biệt, nhằm giúp người dùng dễ dàng theo dõi nội dung trên trang web.

<main>
    <div class="content">
        Bài viết
    </div>
    <div class="sidebar">
        Side bar
    </div>
</main>

Các thẻ trình bày bảng

<table>
    <thead>
        <tr>
            <th>STT</th>
            <th>Sản phẩm</th>
            <th>Giá</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Sản phẩm 1</td>
            <td>50.000 vnđ</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Sản phẩm 2</td>
            <td>100.000 vnđ</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>STT</th>
            <th>Sản phẩm</th>
            <th>Giá</th>
        </tr>
    </tfoot>
</table>

Trong đó:

table: Đánh dấu bắt đầu và kết thúc bảng
thead: Phần đầu của bảng
tbody: Phần nội dung bảng
tfoot: Phần chân bảng
tr: Thẻ đánh dấu một hàng trong thead, tbody hoặc tfoot
th: Một ô trong hàng, ô này sẽ được in đậm ở chế độ mặc định
td: Một ô trong hàng, không in đậm ở chế độ mặc định

Các thẻ trình bày danh sách

<main>
    <ol>
        <li>Sản phẩm 1</li>
        <li>Sản phẩm 2</li>
        <li>Sản phẩm 3</li>
    </ol>
</main>

<main>
    <ul>
        <li>html</li>
        <li>javascript</li>
        <li>css</li>
    </ul>
</main>

Trong đó:

ol: Trình bày một danh sách có thứ tự
ul: Trình bày danh sách không có thứ tự
li: Trình bày một phần tử trong danh sách

Chúng ta có thể tạo menu cho trang web bằng cách lồng ol hoặc ul vào trong thẻ nav

Các thẻ nhập liệu từ người dùng

<main>
    <form action="" method="post">
        <h1>Form đăng ký thành viên</h1>
        <fieldset>
            <legend>Thông tin cơ bản</legend>
            <label for="username">Username</label>
            <input type="text" id="username">
            <br>
            <label for="password">Password</label>
            <input type="password" id="password">
        </fieldset>
        <fieldset>
            <legend>Thông tin Thêm</legend>
            <label for="gender">Giới tính</label>
            <select id="gender">
                <option value="male">Nam</option>
                <option value="female">Nữ</option>
            </select>
            <br>
            <label for="intro">Giới thiệu bản thân</label>
            <textarea id="intro"></textarea>
        </fieldset>
        <input type="checkbox" id="accept">
        <label for="accept">Tôi đã đọc và đồng ý với điều khoản sử dụng</label>
        <br>
        <button type="submit">Đăng ký</button>
    </form>
</main>

Trong đó:

Form: Chứa tất cả thông tin người dùng sẽ nhập vào
fieldset: Gom các ô nhập thông tin trong form thành từng nhóm, trong ví dụ này, chúng ta đã gom thành 2 nhóm là thông tin cơ bản và thông tin thêm
legend: Thẻ dùng để đặt tên cho các fieldset, mỗi fieldset sẽ có một thẻ legend bên trong
label: Nhãn hiển thị đi kèm với các ô nhập liệu cụ thể
input: Ô nhập liệu trên một dòng, nghĩa là chúng ta không thể nhấn xuống dòng trong các ô nhập liệu dạng input. Thẻ input sẽ có thuộc tính type đi kèm để quy định kiểu dữ liệu mà chúng ta muốn người dùng nhập vào. Các giá trị của thuộc tính type như text, number, email, tel, password, radio, checkbox...
select: Một nhóm các lựa chọn mà người dùng sẽ chọn một hay nhiều phần tử, ví dụ giới tính, quốc gia...
option: Một phần tử trong select, ví dụ nam, nữ
button: Trình bày một phần tử mà sẽ hiển thị như một nút nhấn. Khi có thuộc tính type đi kèm với giá trị là submit, thì khi nhấn vào nút, toàn bộ dữ liệu của form chứa nó sẽ được gởi đi.

Các thẻ chèn media

<main>
    <a href="https://google.com" title="Chuyển tới google">Nhấn để chuyển tới google</a>
    <br>
    <img src="img/image1.jpg" alt="Hình ảnh 1">
    <br>
    <video>
        <source src="video/v1.mp4" type="video/mp4">
    </video>
    <br>
    <audio>
        <source src="audio/a1.mp3" type="audio/mpeg">
    </audio>
</main>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name='viewport' content="width=device-width,initial-scale=1" />
        <title>Chèn css và js</title>
        <link href="css/index.css" rel="stylesheet" type="text/css"/>
        <style>
            body{color: red}
        </style>
    </head>
    <body>
        <header>
            Đây là đầu trang
        </header>
        <main>
            Nội dung chính 
        </main>
        <footer>
            Chân trang
        </footer>
        <script src="js/index.js" type="text/javascript"></script>
    </body>
</html>

Trong đó:

a: Thẻ chèn một liên kết nội bộ hoặc ra bên ngoài
img: Thẻ chèn hình ảnh vào website
video: Thẻ chèn video vào trang web
audio: Thẻ chèn âm thanh vào trang web
source: Dùng để khai báo tài nguyên hay file nguồn cho thẻ video hoặc audio. Có thể có một hoặc nhiều thẻ source trong mỗi thẻ video, hoặc audio.
link: Chèn một file bên ngoài bất kỳ vào website, thông thường, ta dùng thẻ link để chèn file css
style: khai báo trực tiếp các mã css ngay trong tài liệu html
script: Khai báo hoặc chèn nội dung file thực thi dạng mã lệnh như javascript

Luận bàn html

Bên trên là các thẻ html mà chúng ta sẽ thường hay sử dụng. để sử dụng thật thành thạo các thẻ này thì chúng ta có thể tìm kiếm trên internet với từ khoá như thẻ a trong html, thẻ div trong html. Trong vài ngày sắp tới mình sẽ cố gắng trình bày thật chi tiết về cách sử dụng các nhóm thẻ và các thẻ trong html. Bạn nào quan tâm thì có thể đón xem để học. Cuối cùng thì bài viết cũng khá dài rồi, mình xin dừng phím tại đây, hẹn gặp lại các bạn trong các bài học sau. Chúc các bạn học tốt.

Tạo vào 04/03/2023, Cập nhật 1 năm trước