Hỏi Đáp Là gì

Text trong HTML là gì

Mục tiêu của bài viết này là giúp bạn nắm được các thẻ cơ bản mà một trang HTML thường hay sử dụng, ý nghĩa và cách sử dụng chúng một cách phù hợp để tạo nên một trang Web. Một trang HTML là tập hợp của rất nhiều các loại thẻ khác nhau và các bạnkhông cần cố gắng học thuộc chúng ngay lúc này để tránh bị loạn.

Ở bài viết này, mình sẽ liệt kê rất nhiều thẻ và bạn chỉ cần nhớsơ sơrằng có những thẻ ABC như thế này trong một file HTML và chúng có công dụng XYZ nào đó khi hiển thị trên browser, khi nào cần sử dụng đến thẻ nào thì hãy quay lại bài viết này và xem lại, hoặc truy cập W3schools để tham khảo thêm các thẻ khác và thuộc tính của chúng. Ở đó liệt kê toàn bộ các thẻ của một trang HTML, ý nghĩa của từng thẻ và đó cũng là một tài liệu chính thống sẽ gắn bó với bạn trong suốt đoạn đường làm một lập trình viên.

Trước khi đi vào chi tiết, mình muốn nhấn mạnh rằng, các bạn hãy nghĩ đơn giản hơn đi, để đầu óc của mình thoáng lên, đừng quan trọng hóa vấn đề, đừng đặt nặng rằng mình đang học. Hãy tự đặt câu hỏi: website là gì??? nó chỉ đơn giản là mấy cái thẻ HTML thôi, mỗi thẻ có một công dụng nhất định nào đó khi hiển thị lên website.

Và nếu bạn đang băng khoăn không biết rằng, nhiều thẻ HTML như vậy thì biết dùng cái nào, trường hợp nào thì dùng thẻ này, dùng thẻ này khi nào là thích hợp, ..vân vân thì các bạn yên tâm, mình sẽ cùng các bạn thực hành để nhớ hết tên thẻ và chức năng của chúng ở bài thực hành, còn ở đây, chỉ cần nắm đượccấu trúc của một thẻ HTML nó trông như thế nào là được rồi bạn nhé.

HTML Element là gì?

Các thẻ HTML hay còn gọi là HTML Element hoặc HTML Tag thường được cấu tạo bởi một thẻ mở, một số nội dung bên trong và một thẻ đóng. Ngoài ra còn có một số Element không có nội dung bên trong vì vậy không có thẻ đóng, chúng được gọi là Empty Element.

2 cấu trúc phổ biến thường thấy của một HTML Element:

Nội dung bên trong thẻ

hoặc

Ví dụ:

Thẻ này thường được dùng để bao quanh một đoạn văn bản

trong đóp là tagname[tên thẻ]. Thẻ này có nội dung bên trong và có thẻ đóng.

trong đóinput là tagname[tên thẻ], type=text là thuộc tính của thẻ. Thẻ này không có nội dung vì vậy không có thẻ đóng. Về thuộc tính của thẻ, chúng ta sẽ tham khảo thêm tại W3schools. Trong quá trình bạn học HTML cũng như quá trình làm việc sau này, bạn luôn cần tham khảo các thuộc tính cần thiết ở đây. Tất cả các lập trình viên khác cũng đều như vậy cho đến khi họ làm nhiều và nhớ được chúng.

Một số HTML Element phổ biến thường được sử dụng

Tất cả các website các bạn đã từng sử dụng đều chỉ bao gồm mấy thành phần sau: ảnh, chữ, video. Để hiển thị một ảnh hay một đoạn văn bản hay một video lên website thì chính là chức năng của HTML Element. Nhìn lại file index.html đã tạo ở bài trước bạn sẽ thấy rằng một website được tạo nên bởi các thẻ HTML và các thẻ này có thể lồng trong nhau. Chúng ta sẽ điểm danh một loạt các thẻ mà hay sử dụng nhất.

1. HTML comment: nội dung thẻ >

Dùng để chèn một comment vào trong source code, comment đó sẽ không hiển thị trên browser, mục đích của thẻ này là để ghi chú thích cho code của bạn, cái mà sau này có thể giúp bạn chỉnh sửa lại code của mình một cách nhanh chóng hơn hoặc để tạm ẩn một đoạn code nào đó không cho nó hiển thị trên trình duyệt.

Ví dụ:

Đây là một thẻ div, nội dung bên trong thẻ này sẽ được hiển thị trên trình duyệt

2. Khai báo DOCTYPE:

Tất cả HTML Documents đều phải bắt đầu với dòng khai báo này. Khai báo này giúp cho trình duyệt biết nó đang xử lý loại tài liệu nào. Nó không phải là một thẻ HTML nhưng cứ coi nó là một thẻ cho dễ cũng được, việc này không quan trọng.

Ví dụ:

3. Thẻ html: nội dung thẻ

Đây làroot elementcủa một HTML document, tạm hiểu là một thành phần gốc của một trang HTML. Thẻ này dùng để bao ngoài tất cả các HTML element khác ngoại trừ khai báo DOCTYPE.

Lưu ý: Luôn khai báo thuộc tínhlang bên trong thẻ này để khai báo ngôn ngữ cho website. Việc này cũng hỗ trợ cho browser và các máy chủ tìm kiếm như google,

Ví dụ:

4. Thẻ head: nội dung thẻ

Một bài văn cần có phần mở bài, một website cũng vậy. Thẻ này dùng để chứa một số thông tin quan trọng của website và sẽ không được hiển thị trên website.

Các thông tin quan trọng ở đây hay còn được biết đến làmetadata, nó thường bao gồm document title, character set, styles, scripts, và các meta information khác.

Những thành phần có thể đặt trong thẻ gồm:

  • [không thể thiếu trong một HTML document]

Ví dụ:

5. Thẻ title: nội dung thẻ

Thẻ này định nghĩa tiêu đề cho website, nội dung thẻ chỉ có thể là text, không được để các thẻ HTML khác vào. Sau khi khai báo nó sẽ hiển thị trên Tab đang mở website của trình duyệt.

Ví dụ:

Title of the document

6. Thẻ body: nội dung thẻ

Bài văn đã có mở bài thì tất nhiên phải có thân bài. Thẻ body này là thân bài của một trang HTML, nó sẽ chứa tất cả các nội dung mà bạn muốn hiển thị lên của website bao gồm ảnh, đoạn văn, video,

Lưu ý: Một file HTML chỉ có một thẻ body duy nhất thôi nhé.

Ví dụ:

Title of the document

7. Thẻ div: nội dung thẻ

Dùng để phân chia các section[khu vực] trong một trang web. Thường được dùng để bao chứa các thẻ khác.

Ví dụ:

Title of the document
Đây là một section
Đây là một section khác

8. Thẻ h2 đến h6: nội dung thẻ

Dùng để hiển thị những tiêu đề trên một website. Tiêu đề quan trọng thì dùng thẻ h2, tiêu đề ít quan trọng hơn thì giảm dần cho đếnh6. Chẳng hạn khi bạn nhìn thấy một bài báo thì sẽ có tiêu đề bài báo, trong bài báo đó lại có các mục nhỏ hơn. Vậy tiêu đề bài báo có thể dùng thẻh2 vì nó là quan trọng nhất và cần nổi bật nhất, các mục nhỏ trong bài báo có thể dùng các thẻ còn lại tùy ý thí chủ.

Ví dụ:

This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

9. Thẻ p: nội dung thẻ

Dùng để hiển thị một đoạn văn.

Ví dụ:

Đây là một vài từ trong một đoạn văn bản dài hơn

10. Thẻ span: nội dung thẻ

Thường dụng để bao quanh một đoạn text nhỏ hoặc một phần của đoạn văn khác dài hơn nhằm mục đích sử dụng CSS hoặc JS cho đoạn text được bao đó.

Ví dụ:

Ở ví dụ này, phần cuối của đoạn văn trong thẻ p được bao bởi thẻ span, thẻ span có thuộc tính styte, nó là CSS làm thay đổi màu của đoạn text nó bao bọc sang màu xanh.

Đây là một đoạn văn dài với phần cuối được bao bởi thẻ span

11. Thẻ strong: nội dung thẻ

Dùng để bao quanh một đoạn text được đánh giá là quan trọng, đoạn text bên trong thường được hiển thị đậm hơn.

Ví dụ:

Đây là một bài viết quan trọng

12. Thẻ br:

Dùng để ngắt dòng xuống dòng mới.

Ví dụ:

Để bắt buộc xuống dòng

13. Thẻ a: nội dung thẻ

Tạo một liên kết từ trang này sang trang khác.

Ví dụ:

Khi click vào sẽ đi đến trang google.com

Đi tới Google.com!

14. Thẻ img: nội dung thẻ

Dùng để nhúng ảnh vào website.

Ví dụ:

src: đường dẫn đến ảnh.

alt: trong trường hợp ảnh không được hiển thị, đoạn text này sẽ hiển thị.

15. Thẻ button: nội dung thẻ

Thẻ này hiển thị một button có thể click được.

Ví dụ:

Click Me!

16. Thẻ input:

Thẻ này định nghĩa một input field để người dùng có thể nhập data. Nó có thể hiển thị theo nhiều dạng khác nhau phụ thuộc vào thuộc tínhtype được truyền vào là gì.

Tất cả các giá trị củatype:

Ví dụ:

Trong ví dụ này, website sẽ hiển thị một input với type là text cho phép bạn nhập email và password. Trong đó, thuộc tính name, id như là một định danh cho ô input. Chúng ta sẽ làm rõ các thuộc tính này ở các bài thực hành HTML/CSS sau.

17. Thẻ label: nội dung thẻ

Định nghĩa một label cho một số thành phần sau:

Ví dụ:

Trong ví dụ này, thuộc tínhforcủa thẻ label phải trùng vớiid của thẻ input để chỉ định label này là của ô input này. Khi click vào Email thì ô input với id là email sẽ tự động được focus vào.

Email
Password

18. Thẻ textarea: nội dung thẻ

Với thẻ input ở trên, người dùng chỉ có thể nhập vào một đoạn văn bản trên cùng một dòng thì với thẻ textarea, người dùng có thể nhập vào một đoạn text cho phép xuống dòng cũng như hiển thị nó.

Ví dụ:

Bình luận: Đây là một đoạn comment. Bạn có thể sửa nó.

19. Thẻ form: nội dung thẻ

Dùng để tạo một form cho người dùng nhập thông tin. Nó có thể chứa các thẻ sau:

Ví dụ:

Đây là một form dùng để login. Trong đó:

action nơi mà các dữ liệu trong form được gửi đến khi submit form [click vào nútSubmit].

method phương thức để gửi dữ liệu. Tham khảo thêm các phương thức tại đây.

Email
Password

20. Thẻ ul, li:
  • nội dung thẻ

  • Chúng ta sử dụng cặp thẻ