HTML là gì?
HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản). HTML được sử dụng để định dạng và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles,...
HTML là một ngôn ngữ đánh dấu (markup language) để định hình cấu trúc chứ không phải ngôn ngữ lập trình (programming language)
Điều này mang ý nghĩa, nó không tạo được các chức năng “động” cho một trang web. Hay có thể hiểu đơn giản, HTML chỉ dùng để định dạng và bố cục nội dung hiển thị trên trang web.
Vì mỗi website có thể chứa nhiều trang nội dung nên mỗi trang sẽ là một tài liệu HTML, và lưu dưới dạng đuôi mở rộng là .html hay .htm.
Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag và attributes). Các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng. Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p> :
<p>Đây là cách bạn thêm đoạn văn trong HTML.</p>
Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).
HTML hoạt động ra sao?
Khi bạn gõ ra 1 tên miền, trình duyệt mà bạn đang sử dụng (chẳng hạn như Chrome) sẽ kết nối tới 1 máy chủ web, bằng cách dùng 1 địa chỉ IP, vốn được thấy bằng cách phân giải tên miền đó (DNS). Máy chủ web chính là 1 máy tính được kết nối tới internet và nhận các yêu cầu tới trang web từ trình duyệt của bạn. Máy chủ sau đó sẽ gửi trả thông tin về trình duyệt của bạn, là 1 tài liệu HTML, để hiển thị trang web!
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html hoặc .htm. Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web đảm nhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu .
Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó.
Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang home, trang sản phẩm, trang tin tức,…
Cấu trúc một đoạn HTML
Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements). Mỗi thẻ sẽ có những tác dụng nhất định, giúp xây dựng nên một cấu trúc hoàn chỉnh cho website. Bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác.
Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như <tag></tag>.
Trong đó:
- <!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị
- <html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ đóng gói tất cả nội dung của trang HTML
- <head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề trang, charset
- <title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu đề của trang
- <body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang
- <h1></h1>, <h2></h2>: định dạng dữ liệu dạng heading. Thông thường có 6 cấp độ heading trong HTML, trải dài từ <h1> đến <h6>. Trong đó, <h1> là cấp độ heading cao nhất và <h6> là cấp độ heading thấp nhất.
- <p> và </p>: cặp thẻ chứa các đoạn văn bản của trang web
Các tag thông dụng của HTML
HTML tags được sử dụng chủ yếu là 2 loại chính: block-level tags và inline tags.
- Elements Block-level : đây là loại tag cấp cao nhất, sẽ sử dụng toàn không gian trang web và luôn bắt đầu dòng mới của trang web. 3 block-level tags mà tất cả các trang HTML đầu cần có đó là <html></html>, <head></head> và <body></body>.
- Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới của trang web. Chúng thường dùng để định dạng nội dung bên trong của block level elements.
Block-Level Tags
3 block level tags của mỗi trang HTML cần có những tag như là <html>, <head>, và <body>.
- Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML.
- Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset.
- Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang.
Inline Tags
Inline tags thường được dùng để định dạng, tạo bố cục cho nội dung bên trong của block-level tags.. Ví dụ như, tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiêng.
Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể: <a href="https://topdev.vn/">Click me!</a>
Ảnh cũng là element inline. Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng. Nhưng bạn cũng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như:
<img src="/images/example.jpg" alt="Example image">
Ưu và nhược điểm HTML
Cũng như một số ngôn ngữ khác dùng trong thiết kế website, HTML cũng có những ưu và nhược điểm riêng, cụ thể là:
Ưu điểm |
Khuyết điểm |
|
Được sử dụng rộng rãi, có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng lớn. |
Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động như update hay realtime thời gian thực, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP. |
| Dễ học, dễ hiểu | Mỗi trang HTML phải được tạo riêng biệt dù có thể chúng trùng lặp header, footer. |
| Các trình duyệt phổ biến đều có thể đọc hiểu | Khó kiểm soát được việc đọc và hiển thị tập tin HTML của trình duyệt. Điển hình như một vài trình duyệt lỗi thời không thực hiện được render tag mới, nên trình duyệt không thể đọc được nội dung của tài liệu HTML. |
| Mã nguồn mở và hoàn toàn miễn phí. | |
| Các markup gọn gàng và có tính đồng nhất cao. | |
| Tiêu chuẩn thế giới được vận hành bởi nhà phát hành - World Wide Web Consortium (W3C). | |
| Dễ dàng tích hợp với các ngôn ngữ backend như PHP, Python… |
HTML đóng vai trò gì trong website
Với những ưu và khuyết điểm trên, điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Một website chuẩn sẽ được hình thành bởi:
- HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.
- CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….
- Javascript – Tạo ra các sự kiện tương tác với hành động của người dùng (ví dụ như là chat, update nội dung, hiệu ứng slide).
- PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt.
- MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc.
Nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó. Dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người dùng xem.
CÔNG TY CỔ PHẦN CÔNG NGHỆ NEWNET
Địa chỉ: 554/10 Phạm Văn Đồng, P. 13, Q. Bình Thạnh, TP. Hồ Chí Minh
Email: info@newnet.vn
Hotline: 0789 99 4747
Website: https://newnet.vn
Để có được website chuẩn SEO thì phải đạt được 7 tiêu chuẩn nào?
Trong quá trình hình thành nhận diện thương hiệu, doanh nghiệp không thể không có một website chuyên nghiệp, đạt chuẩn thẩm mỹ và đạt chuẩn SEO. Website là bộ mặt của doanh nghiệp trên “mặt trận” online. Vậy nên, website như thế nào là website chuẩn SEO?
Chi tiết