Tin khác

HTML là gì? Giải thích khái niệm cơ bản về thuật ngữ này

Bởi

13 Tháng Mười, 2020

1810

HTML là gì? HTML là từ viết tắt của Hypertext Markup Language – đươc gọi là ngôn ngữ đánh dấu siêu văn bản. Ngôn ngữ này cho phép người dùng tạo và cấu trúc các phần, đoạn văn, tiêu đề, liên kết và trích dẫn khối cho các trang web và ứng dụng.

1. HTML là gì?

HTML không phải là một ngôn ngữ lập trình, có nghĩa là nó không có khả năng tạo chức năng động. Thay vào đó, nó giúp bạn có thể sắp xếp và định dạng tài liệu, tương tự như Microsoft Word.

Khi làm việc với HTML, chúng ta sử dụng các cấu trúc mã đơn giản (thẻ và thuộc tính) để đánh dấu trang web. Ví dụ: chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản kèm theo trong thẻ bắt đầu <p> và thẻ đóng </p> .

Ví dụ:

<p > Đây là cách bạn thêm một đoạn trong HTML. </p>

Nhìn chung, HTML là một ngôn ngữ đánh dấu thực sự đơn giản và dễ học ngay cả đối với những người mới bắt đầu xây dựng trang web. Đây là những gì bạn sẽ biết được khi đọc bài viết này:

Lịch sử của HTML
HTML hoạt động như thế nào?
Tổng quan về các thẻ HTML được sử dụng nhiều nhất
- Thẻ cấp khối
- Thẻ nội tuyến
Sự phát triển của HTML. Điều gì khác biệt giữa HTML và HTML5?
Ưu và nhược điểm của HTML
Mối quan hệ giữa HTML, CSS và JavaScript
Vậy… HTML là gì?

2. Lịch sử của HTML

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý làm việc tại viện nghiên cứu CERN ở Thụy Sĩ. Ông đã đưa ra ý tưởng về một hệ thống siêu văn bản dựa trên Internet.

Tim Berners-Lee là người đã tạo ra HTML

Siêu văn bản có nghĩa là một văn bản chứa các tham chiếu (liên kết) đến các văn bản khác mà người xem có thể truy cập ngay lập tức. Ông đã cho ra đời phiên bản HTML đầu tiên vào năm 1991, bao gồm 18 thẻ HTML. Kể từ đó, mỗi phiên bản mới của ngôn ngữ HTML đều đi kèm với các thẻ và thuộc tính mới (công cụ sửa đổi thẻ) cho phần đánh dấu.

Theo Tài liệu tham khảo phần tử HTML của nhà phát triển Mạng Mozilla, hiện tại, có 140 thẻ HTML, mặc dù một số thẻ trong số đó đã lỗi thời (không được các trình duyệt hiện đại hỗ trợ).

HTML hiện được coi là một tiêu chuẩn web chính thức do sự phổ biến nhanh chóng của nó trên toàn thế giới. Các đặc tả HTML được duy trì và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể xem trạng thái mới nhất của ngôn ngữ bất cứ lúc nào trên trang web của W3C.

Nâng cấp lớn nhất của ngôn ngữ này là sự ra đời của HTML5 vào năm 2014. Nó đã thêm một số thẻ ngữ nghĩa mới vào phần đánh dấu, giúp tiết lộ ý nghĩa của nội dung riêng của chúng, chẳng hạn như <article>, <header> và <footer>.

Xem thêm:

3. HTML hoạt động như thế nào?

Tài liệu HTML là các tệp kết thúc bằng a. phần mở rộng html hoặc .htm. Sau đó, bạn có thể sử dụng bằng bất kỳ trình duyệt web nào, chẳng hạn như Safari, Google Chrome hoặc Mozilla Firefox,… Trình duyệt bắt đầu đọc tệp HTML và hiển thị nội dung để người dùng internet có thể xem nó.

Thông thường, các trang web trung bình bao gồm một số trang HTML khác nhau. Ví dụ: trang chủ, trang giới thiệu, trang liên hệ sẽ có các tệp HTML dành riêng cho mỗi trang.

Tệp HTML

Mỗi tệp HTML bao gồm một tập hợp các thẻ (còn được gọi là các phần tử), mà bạn có thể coi là các thành phần để xây dựng lên một trang web. Bao gồm một hệ thống phân cấp cấu trúc nội dung thành các phần, đoạn văn, tiêu đề và các khối nội dung khác.

Hầu hết các phần tử HTML có phần mở đầu và phần đóng sử dụng cú pháp <tag> </tag>.

Dưới đây, bạn có thể xem một ví dụ mã về cách các phần tử HTML có thể được cấu trúc:

<div >

<h1 > Tiêu đề chính </h1>

<p > Đoạn hai với một <a href = “https://example.com”> hyperlink </a> </ p>

</div>

Phần tử ngoài cùng là một phép chia đơn giản ( <div> </div> ) mà bạn có thể sử dụng để đánh dấu các phần nội dung lớn hơn.
Nó chứa một tiêu đề ( <h1> </h1> ), một tiêu đề phụ ( <h2> </h2> ), hai đoạn văn ( <p> </p> ) và một hình ảnh ( <img> ).
Đoạn thứ hai bao gồm một liên kết ( <a> </a> ) với thuộc tính href chứa URL đích.
Thẻ hình ảnh cũng có hai thuộc tính: src cho đường dẫn hình ảnh và alt cho mô tả hình ảnh.

4. Tổng quan về các thẻ HTML được sử dụng nhiều nhất

Thẻ HTML có hai loại chính: thẻ cấp khối (block-level) và thẻ nội tuyến (inline tags).

Các phần tử cấp khối (block-level) chiếm toàn bộ không gian có sẵn và luôn bắt đầu một dòng mới trong tài liệu. Các tiêu đề và đoạn văn là một ví dụ về thẻ khối.
Các phần tử nội tuyến (inline tags) chỉ chiếm nhiều không gian chỉ khi cần và không bắt đầu một dòng mới trên trang. Chúng thường dùng để định dạng nội dung bên trong của các phần tử cấp khối. Các liên kết và chuỗi được nhấn mạnh là những ví dụ điển hình về thẻ nội tuyến.

4.1 Thẻ cấp khối

Ba thẻ khối mà mọi tệp HTML đều cần phải chứa là <html> , <head> và <body> .

Thẻ <html> </html> là phần tử cấp cao nhất bao quanh mọi trang HTML.
Thẻ <head> </head> chứa thông tin meta như tiêu đề và bộ ký tự của trang.
Cuối cùng, thẻ <body> </body> bao gồm tất cả nội dung xuất hiện trên trang.

<html >

<! – THÔNG TIN META ->

</head>

<body >

<! – NỘI DUNG TRANG ->

</body>

</html>

Có 6 cấp độ trong tiêu đề của HTML. Chúng nằm trong khoảng từ <h1> </h1> đến <h6> </h6>, trong đó h1 là tiêu đề cấp cao nhất và h6 là tiêu đề cấp thấp nhất. Các đoạn được bao quanh bởi <p> </p> , trong khi các dấu ngoặc kép sử dụng thẻ <blockquote> </blockquote> .
Phân chia là các phần nội dung lớn hơn thường chứa một số đoạn văn, hình ảnh, đôi khi là dấu ngoặc kép và các phần tử nhỏ hơn khác. Có thể đánh dấu chúng bằng thẻ <div> </div> . Một thẻ div cũng có thể được chứa trong một thẻ div khác.
Bạn cũng có thể sử dụng thẻ <ol> </ol> cho danh sách có thứ tự và <ul> </ul> cho danh sách không có thứ tự. Các mục danh sách riêng lẻ phải được bao bọc bởi thẻ <li> </li> . Ví dụ: đây là cách để tạo ra một danh sách trên HTML:

<ul >

</ul>

4.2 Thẻ nội tuyến

Văn bản sử dụng nhiều thẻ nội tuyến được để định dạng. Ví dụ: thẻ <strong> </strong> sẽ hiển thị một phần tử được in đậm, trong khi các thẻ <em> </em> sẽ hiển thị nó ở dạng nghiêng .

Các siêu liên kết cũng là các phần tử nội tuyến yêu cầu các thẻ <a> </a> và thuộc tính href để chỉ ra điểm đến của liên kết:

<a href = “https://example.com/”> Click me! </a>

Hình ảnh cũng là yếu tố nội tuyến. Bạn có thể thêm một thẻ bằng cách sử dụng <img> mà không cần bất kỳ thẻ đóng nào. Nhưng bạn cũng sẽ cần sử dụng thuộc tính src cho đường dẫn hình ảnh, ví dụ:

<img src = “/images/example.jpg” alt = “Hình ảnh mẫu” >

5. Sự phát triển của HTML

Kể từ những ngày đầu tiên, HTML đã trải qua một quá trình phát triển đáng kinh ngạc. W3C liên tục xuất bản các phiên bản và bản cập nhật mới và đã tạo nên lịch sử.

HTML4 (hay thường được gọi là “HTML”) được tạo ra vào năm 1999 và phiên bản chính thức mới nhất được ra mắt vào năm 2014. Phiên bản này được gọi là HTML5, cung cấp nhiều tính năng mới cho ngôn ngữ này.

HTML5 – Bản cập nhật nhiều tính năng mới

Một trong những tính năng được mong đợi nhất của HTML5 là hỗ trợ gốc cho nhúng âm thanh và video. Thay vì sử dụng trình phát Flash, chúng ta có thể chỉ cần nhúng video và tệp âm thanh vào các trang web của mình bằng các thẻ <audio> </audio> và <video> </video> mới.

Nó cũng bao gồm hỗ trợ tích hợp cho đồ họa vector có thể mở rộng (SVG) và MathML cho các công thức toán học và khoa học.

HTML5 cũng đã giới thiệu một số cải tiến về mặt ngữ nghĩa. Các thẻ về ngữ nghĩa mới sẽ báo cáo cho trình duyệt về ý nghĩa của nội dung, điều này có lợi cho cả người đọc và công cụ tìm kiếm.

Các thẻ ngữ nghĩa phổ biến nhất là <article> </article> , <section> </section>, <aside> </aside> , <header> </header> và <footer> </footer>.

6. Ưu và nhược điểm của HTML

Giống như hầu hết mọi thứ, HTML có một số điểm mạnh và hạn chế.

Ưu điểm

Một ngôn ngữ được sử dụng rộng rãi với rất nhiều tài nguyên và một cộng đồng khổng lồ đằng sau.
Chạy nguyên bản trong mọi trình duyệt web.
Dễ dàng để học và sử dụng
Hoàn toàn miễn phí.
Đánh dấu rõ ràng và nhất quán.
Được World Wide Web Consortium (W3C) duy trì các tiêu chuẩn web chính thức.
Dễ dàng tích hợp với PHP và Node.js – các ngôn ngữ phụ trợ.

Nhược điểm

Chủ yếu chỉ được sử dụng dành cho các trang web tĩnh. Bạn có thể sẽ phải cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ như PHP đối với chức năng động.
Nó không cho phép người dùng thực hiện việc tạo tự động các trang web. Vì vậy mà tất cả các trang web cần được tạo riêng nhau, ngay cả khi bao gồm các phần tử giống nhau, ví dụ: đầu trang và chân trang.
Một số trình duyệt áp dụng các tính năng mới mất nhiều thời gian.
Không tương thích hoàn toàn với các trình duyệt cũ (ví dụ: các trình duyệt cũ không phải lúc nào cũng hiển thị các thẻ mới hơn).

7. Mối quan hệ giữa HTML, CSS và JavaScript?

Mặc dù HTML là một ngôn ngữ tiêu chuẩn, nhưng nó không đủ để xây dựng một trang web chuyên nghiệp và đáp ứng đầy đủ các tính năng hiện đại ngày nay. Chúng ta chỉ có thể sử dụng nó để thêm các thành phần văn bản và tạo cấu trúc của nội dung.

Tuy nhiên, HTML hoạt động rất tốt với hai ngôn ngữ giao diện người dùng khác là: CSS (Cascading Style Sheets) và JavaScript. Kết hợp với nhau có thể tạo ra trải nghiệm cho người dùng phong phú và triển khai các chức năng nâng cao.

CSS chịu trách nhiệm tạo kiểu như nền, màu sắc, bố cục, khoảng cách và hoạt ảnh.
JavaScript cho phép bạn thêm chức năng động như thanh trượt, cửa sổ bật lên và thư viện ảnh.

Hãy coi HTML như một con người trần trụi, CSS như một bộ quần áo và JavaScript như chuyển động và cách thức của con người.

Vậy câu hỏi “HTML là gì” đã có lời giải đáp. HTML là ngôn ngữ đánh dấu chính của trang web. Nó chạy nguyên bản trên mọi trình duyệt và được bảo trì bởi World Wide Web Consortium.

HTML được sử dụng để tạo cấu trúc nội dung của trang web và ứng dụng web. Đây là cấp thấp nhất trong công nghệ giao diện dành cho người dùng, làm cơ sở cho việc cấu trúc giao diện trang web bằng CSS và chức năng bạn có thể triển khai bằng JavaScript.