HTML là một định dạng đặc biệc của XML nên nó sẽ có thẻ mở và thẻ đóng với cú pháp như sau:
<tagname></tagname>
Ngoài ra mỗi thẻ HTML còn có một số thuộc tính riêng và danh sách các thuộc tính sẽ nằm bên trong thẻ mở như sau:
<tagname pro1="value1" prop2="value2"></tagname>
Như vậy HTML ra đời với mục đích thiết kế bố cục nội dung cho dữ liệu nói chung và cho giao diện website nói riêng.
17 code HTML đơn giản bạn có thể học trong 10 phút:
1. <!DOCTYPE html>
Bạn sẽ cần thẻ này ở đầu mỗi tài liệu HTML tạo ra. Điều này đảm bảo một trình duyệt biết rằng nó đang đọc HTML.
2. <html>
Đây là một thẻ khác nói với trình duyệt rằng nó đang đọc HTML. Tại sao chúng ta cần cả hai thẻ và? Thật sự có trời mới biết nhưng tốt hơn hết là bạn không nên bỏ nó. Và ở cuối tài liệu, thêm thẻ.
3. <head>
Đối với các trang cơ bản, thẻ sẽ chứa tiêu đề.
4. <title>
Thẻ này xác định tiêu đề của trang. Tất cả những gì bạn cần làm là đặt tiêu đề vào thẻ và đóng nó, ví dụ này bao gồm cả thẻ head:
<head> <title>My Website</title> </head>
5. <meta>
Giống như thẻ title, siêu dữ liệu được đặt trong khu vực tiêu đề của trang (siêu dữ liệu này, khác với siêu dữ liệu từ thiết bị di động). Siêu dữ liệu chủ yếu được sử dụng bởi các công cụ tìm kiếm và là thông tin trên trang của bạn. Có một số trường meta khác nhau, nhưng đây là một trong số các loại meta được sử dụng phổ biến nhất:
- Description – Mô tả cơ bản của trang.
- Keywords – Lựa chọn từ khoá áp dụng cho trang.
- author – Tác giả của trang.
- viewport – Một thẻ đảm bảo rằng trang có thể được xem trên tất cả các thiết bị.
Dưới đây là ví dụ có thể áp dụng cho trang này:
<meta name="description" content="A basic HTML tutorial"> <meta name="keywords" content="HTML,code,tags"> <meta name="author" content="Dann Albright"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Thẻ “viewport” sẽ luôn có “width=device-width, initial-scale=1.0” để nội dung trang hiển thị tốt trên thiết bị di động và máy tính để bàn.
6. <body>
Về cơ bản, mọi thứ trừ tiêu đề được đặt trong phần thân của trang web và đặt trong thẻ body.
7. <h1>
Thẻ <h1> xác định tiêu đề cấp một trên trang. Thẻ <h2> xác định tiêu đề cấp hai, <h3> cho cấp ba, v.v…, đến thẻ <h6>.
8. <p>
Thẻ đoạn văn bắt đầu một đoạn mới, nó thường bao gồm hai ngắt dòng.
9. <br>
Thẻ ngắt dòng chèn một ngắt dòng đơn
10. <strong>
Thẻ này xác định văn bản quan trọng, có nghĩa là văn bản sẽ được bôi đậm. Tuy nhiên, có thể sử dụng CSS để hiển thị văn bản <strong> khác nhau. Tuy nhiên, bạn có thể sử dụng <strong> để in đậm văn bản.
11. <em>
Giống như thẻ <b> và <strong>, <em> và <i> cũng giống nhau. Thẻ <em> xác định văn bản được nhấn mạnh, có nghĩa là nó sẽ được in nghiêng. Một lần nữa, sử dụng CSS để làm các văn bản được nhấn mạnh hiển thị khác nhau.
12. <a>
Thẻ <a> hoặc anchor cho phép tạo liên kết.
13. <img>
Nếu muốn nhúng một hình ảnh vào trang của mình, bạn sẽ cần sử dụng thẻ hình ảnh. Cách đơn giản nhất để sử dụng nó là chỉ cần thêm nguồn của hình ảnh trong thuộc tính “src”.
14. <ol>
Thẻ danh sách được sắp xếp cho phép tạo một danh sách có thứ tự. Nhìn chung, bạn sẽ nhận được một danh sách đánh số. Mỗi mục trong danh sách cần thẻ danh mục (<li>).
15. <ul>
Danh sách không có thứ tự đơn giản hơn nhiều so với danh sách có thứ tự.
16. <table>
Nếu muốn sử dụng các hàng và cột để phân đoạn thông tin trên trang, bạn có thể sử dụng một số thẻ để tạo và chỉnh sửa bảng.
17. <blockquote>
Khi trích dẫn một trang web hoặc lời của một người khác để tạo sự khác biệt với các phần còn lại của tài liệu thì bạn có thể sử dụng thẻ blockquote. Tất cả những gì cần làm là để phần trích dẫn trong thẻ mở và đóng blockquote.