April 21, 2015 hotro@hostingviet.vn 02466.567.555       Giới thiệuTuyển dụng    Liên hệ   Đăng nhập   Đăng ký

HTML là gì? Các loại Tag HTML cơ bản nhất bạn cần Nắm Rõ!!

Html là gì? Html có phải ngôn ngữ lập trình không? Những thông tin, kiến thức về HTML sẽ được Hosting Việt chia sẻ đầy đủ và chi tiết trong bài viết này.

Chắc hẳn bạn đã nhiều lần nghe nói đến HTML, nhưng việc hiểu rõ vai trò của nó đối với website có lẽ không phải ai cũng biết. Vì thế, để giúp bạn “tháo nút thắt” của vấn đề, bài viết sau của Hosting Việt sẽ chia sẻ bạn tất cả thông tin liên quan về HTML là gì. Nhờ thế, bạn sẽ hiểu thêm về ngôn ngữ này và dễ dàng áp dụng trong thực tế.

html la gi

HTML là gì?

HTML là viết tắt của cụm từ HyperText Markup Language (có nghĩa là Ngôn ngữ đánh dấu siêu văn bản). Nó được dùng để tạo trang web hoặc website với nhiều trang, trong đó mỗi trang là một tài liệu HTML.

HTML cũng là “đứa con tinh thần” của Tim Berners-Lee – Chủ tịch của Tổ chức các chuẩn trên môi trường Internet (World Wide Web Consortium – 3WC) và là “cha đẻ” của World Wide Web.

Một tài liệu HTML được cấu thành từ các phần tử HTML (gọi là HTML Elements), và được lưu dưới dạng đuôi .html hoặc .htm . Đây là đuôi mở rộng của file HTML.

Đồng thời, các phần tử HTML còn được quy định bằng những cặp thẻ (tag). Mỗi cặp tag được bao bọc bởi dấu ngoặc nhọn “< >” và được khai báo thành một cặp. Nó gồm thẻ mở và thẻ đóng. Những văn bản nào muốn dùng HTML đánh dấu thì sẽ được khai báo trong cặp thẻ.

Ví dụ: <strong>Đây là chữ in đậm</strong>

Tuy nhiên, có một số thẻ đặc biệt không thể đóng thì bắt buộc khai báo dữ liệu trong thuộc tính, ví dụ thẻ <img>.

Nguyên tắc xử lý của file html là gì?

Khi tập tin HTML hình thành thì trình duyệt web sẽ đảm nhận việc xử lý nó. Trình duyệt thực hiện hoạt động đọc, hiểu nội dung HTML có trong các thẻ, rồi chuyển chúng sang dạng văn bản được đánh dấu đọc, nghe hoặc hiểu.

Nếu muốn kiểm tra, bạn dùng khung nội dung bên dưới để luân phiên chuyển đổi nội dung của phần HTML và Result xem kết quả sau khi xử lý có chính xác chưa.

html la gi

Cấu trúc một đoạn HTML là gì?

Dựa vào định nghĩa của HTML trên, dễ dàng thấy, HTML được khai báo bằng các phần tử thông qua từ khóa. Nội dung nằm bên trong từ khóa chính là phần nội dung cần định dạng HTML.

Ví dụ: Đoạn HTML khai báo văn bản sau

01

<p>Đây là một đoạn văn bản trong HTML.</p>

Thêm vào đó, trong các thẻ cũng chứa thuộc tính và chúng được đặt bên trong thẻ mở đầu. Từng thuộc tích tương ứng với mỗi giá trị trong dấu ngoặc kép, được cách nhau bởi dấu “=” cùng với tên của thuộc tính. Ngoài ra, một thẻ còn có thể chứa nhiều thuộc tính.

Ví dụ:

01

<form action="https://hostingviet.vn"> </form>

Dùng chương trình để tạo ngôn ngữ HTML là gì?

HTML là tập tin siêu văn bạn, vì thế, bạn có thể dùng những chương trình có chức năng soạn thảo văn bản mà không chứa định dạng để tạo một file HTML. Cụ thể, Notepad trong Windows cũng là một công cụ giúp bạn tạo tập tin HTML. Đối với MAC thì bạn dùng TextEdit, còn Linux thì Vim. 

html la gi

Tuy nhiên, Notepad quá đơn giản cho mục đích sử dụng để soạn thảo và nó dễ gặp lỗi hiển thị đối với ký tự tiếng Việt. Do đó, hầu hết, mọi người dùng thêm các phần mềm khác như Sublime Text, PHP designer, Dreamweaver, Notepad++

  • Sublime Text

Đây là phần mềm viết code được giới thiệu đến thị trường vào năm 2008 và phát triển bởi Jon Skinner. Sublime Text dựa trên ngôn ngữ ngôn ngữ Python và C++. Bên cạnh tính năng edit text, phần mềm còn có nhiều plugin hữu ích, giúp lập trình viên tiết kiệm thời gian.

Hiện nay, phiên bản mới nhất của phần mềm là Sublime Text 3. Giữa bản miễn phí và trả phí thì không có quá nhiều khác biệt về tính năng nên bạn hoàn toàn an tâm khi sử dụng bản free.

  • PHP designer

Phần mềm này được ra mắt vào năm 1998 và do Michael Pham phát triển. Hiện nay, PHP designer có mặt trên 200 quốc gia và được nhiều lập trình viên ưa thích. Không chỉ hỗ trợ viết code, phần mềm còn có chức năng hỗ trợ thiết kế web PHP.

Ngoài ra, giao diện đơn giản, thân thiện cũng chính là điểm mạnh của PHP designer vì nó rất phù hợp với thiết kế website. Đặc biệt, chưa dừng tại đó, phần mềm còn hỗ trợ đa ngôn ngữ với trên 20 ngôn ngữ, giúp người dùng trải nghiệm dễ dàng hơn.

  • Dreamweaver

Có lẽ Dreamweaver là phần mềm được nhiều trường đào tạo ưu ái sử dụng trong việc giảng dạy lập trình cho sinh viên. Phần mềm có thiết kế chuyên nghiệp, đầy đủ tính năng cần thiết cho việc viết code của website hay phần mềm, ứng dụng.

Thêm vào đó, phần mềm cũng có nhiều tiện ích như dễ sử dụng (bạn chỉ việc kéo thả hay di chuyển các phần tử). Hơn nữa, Dreamweaver cũng tương thích với nhiều ngôn ngữ lập trình như PHP, ASP.NET, JSP, ASP,…

  • NotePad ++

Phần mềm này tạo một môi trường lập trình nhỏ gọn và có nhiều tiện ích tiện lợi giúp tối ưu việc lập trình website hoặc phần mềm. NotePad++ hộ trợ nhiều ngôn ngữ là Java, PHP, C++, C#, XML, HTML, CSS, Pascal,…

Các phần mềm trên có thể sử dụng kết hợp để thiết kế nên một trang web chuyên nghiệp, hoàn hảo. Tuy nhiên, bạn cần lưu ý là nếu muốn dùng nhiều phần mềm cùng lúc, thì đòi hỏi bạn phải có kiến thức đủ sâu để dễ dàng vận hành chúng.

html la gi

Vai trò của đuôi HTML là gì trong website?

HTML là ngôn ngữ đánh dấu siêu văn bản. Do đó, nó đóng vai trò xây dựng cấu trúc siêu văn bản của website, hay thực hiện chức năng khai báo tập tin media như hình ảnh, âm thanh, video.

Điều này không đồng nghĩa với việc dùng HTML để tạo ra website, mà nó chỉ là một trong những phần tử hình thành nên website. Thông thường, một trang web sẽ được cấu tạo bởi các thành phần:

  • HTML: Giúp thiết lập cấu trúc và định dạng siêu văn bản.
  • CSS: Có khả năng định dạng siêu văn bản dạng thô đã được tạo ra từ HTML thành bố cục website, màu sắc, ảnh nền,….
  • PHP: Đây là ngôn ngữ lập trình. Nó đóng vai trò xử lý, trao đổi dữ liệu từ máy chủ đến trình duyệt. 
  • MySQL: Đây là hệ quản trị tất cả các cơ sở dữ liệu truy vấn có cấu trúc.

Như vậy, nếu xem website là một ngôi nhà thì HTML là bộ khung nhà. Do đó, dù website thuộc loại hình nào, hay có ngôn ngữ lập trình nào thì cũng phải luôn có HTML để thực hiện việc hiển thị nội dung cho người truy cập.

Hiện nay, có 2 loại website là tĩnh và động.

  • Website tĩnh (static web): Đây là dạng website không giao tiếp với server để gửi hay nhận dữ liệu. Chính vì thế, nó được thiết kế có sẵn dữ liệu cho HTML và trình duyệt đọc. 
  • Website động (dynamic web): Đây là dạng website có giao tiếp với server để nhận và gửi dữ liệu. Sau đó, các dữ liệu được gửi đến cho người truy cập thông qua văn bản HTML cùng trình duyệt hiển thị nó. Để website giao tiếp được với server thì lập trình viên phải dùng một số ngôn ngữ dạng server-side là PHP, Ruby, ASP.NET,…

 html la gi

HTML có phải ngôn ngữ lập trình không?

HTML được dùng để cấu trúc các thành phần của website hoặc ứng dụng, hay phân chia đoạn text, heading, links… Hay nói cách khác, HTML dùng để xác định phương thức dữ liệu sẽ hiển thị trực tuyến. 

HTML thể hiện vai trò của một ngôn ngữ đánh dấu, đó là nó “đánh dấu”, định nghĩa dữ liệu, rồi mô tả chúng trên website. Sau đó, trình duyệt web sẽ đọc HTML. Điều này có thể hiểu, HTML mô tả dữ liệu vào trình duyệt, còn trình duyệt hiển thị lại dữ liệu sao cho phù hợp.

Như vậy, HTML không phải là một ngôn ngữ lập trình và nó không tạo ra các chức năng “động”. Về bản chất, HTML cũng chỉ tương tự như Microsoft Word. Tức là, nó được dùng để bố cục và thực hiện định dạng trang web.

Danh sách tag HTML thông dụng

HTML có đa dạng (tag) thẻ. Mỗi thẻ lại có tác dụng nhất định, giúp tạo nên một cấu trúc hoàn chỉnh và trọn vẹn cho website. Tuy nhiên, chủ yếu có 2 dạng tag được sử dụng là:

  • Block-level tags

Đây là tag cao cấp, chiếm toàn bộ trong không gian của website. Chúng luôn được bắt đầu bằng dòng mới của trang. Thẻ block-level có 3 loại mà các trang HTML đều cần là <html></html>, <head></head> và <body></body>.

- Tag <html></html>: Đây là phần tử cao nhất, được sử dụng để đóng gói từng trang HTML.

- Tag <head></head>: Chứa meta như tiêu đề của trang và charset.

- Tag <body></body>: Dùng để đóng gói toàn bộ nội dung hiển thị trên trang. 

  • Inline tags

Inline tags chiếm một phần nhỏ trong không gian của website. Chúng không bắt đầu bằng dòng mới của trang. Tag này được dùng để định dạng, hay tạo bố cục cho nội dung của block-level tags.

Inline tags có nhiều dạng như: tag <strong></strong> định dạng chữ in đậm, tag <em></em> định dạng chữ in nghiêng, tag <a></a> kết hợp với attributes href để gắn hyperlinks vào trang.

Ví dụ: Gắn hyperlinks như sau:

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

Tiếp đến, Hosting Việt sẽ giới thiệu một số tag thường sử dụng của ngôn ngữ HTML là gì

  • <!-- -->: Dùng để xác định đoạn chú thích theo nhu cầu.
  • <!DOCTYPE>: Có tác dụng xác định cho trình duyệt biết về phiên bản HTML đang dùng.
  • <a>: Dùng cho mục đích chèn một liên kết đến tài liệu (Hyperlink).
  • <abbr>: Dùng để giải nghĩa từ viết tắt
  • <address>: Dùng để xác định thông tin liên hệ của chủ sở hữu website.
  • <audio>: Có tác dụng thiết lập một "trình phát nhạc" cho website.
  • <b>: Dùng để xác định nội dung đoạn văn bản được in đậm.
  • <base>: Có chức năng xác định kiểu mở liên kết mặc định.
  • <bdo>: Dùng để điều hướng đoạn văn bản đã chỉ định.
  • <big>: Dùng để định dạng một đoạn nội dung với kích thước chữ lớn hơn các văn bản bình thường.
  • <blockquote>: Dùng để trích dẫn từ website khác.
  • <body>: Dùng để xác định phần thân của file HTML.
  • <br>: Dùng để chèn ngắt xuống dòng.
  • <caption>: Dùng để tạo tiêu đề bảng.
  • <code>: Dùng để xác định một đoạn văn bản là các mã lệnh.
  • <del>: Dùng trong trường hợp muốn tạo đường kẻ ngang lên văn bản.
  • <summary> & <details>: Dùng để tạo các phần tử “chỉ hiển thị tiêu đề và ẩn thông tin chi tiết, khi người dùng bấm vào tiêu đề thì nội dung mới hiển thị”. 
  • <dialog>: Dùng để tạo hộp thoại.
  • <div>: Dùng để nhóm nhiều phần tử lại với nhau.
  • <em>: Dùng để định dạng chữ in nghiêng. 
  • <embed>: Nhúng một tài liệu vào trang web.
  • <figcaption>: Dùng để tạo tiêu đề cho nội dung của một phần tử bất kỳ.
  • <figure>: Dùng để xác định phần nội dung muốn tách biệt rõ ràng.
  • <footer>: Dùng để định dạng phần chân của trang web.
  • <frame>: Dùng để xác định khung có trong bộ khung.
  • <frameset>: Dùng để xác định bộ khung.
  • <h1> - <h6>: Dùng để tạo đề mục quan trọng.
  • <head>: Dùng để định dạng phần đầu của file HTML.
  • <header>: Dùng để định dạng phần đầu của trang web.
  • <hr>: Dùng để tạo đường phân cách nằm ngang.
  • <html>: Dùng để định dạng một file HTML.
  • <i>: Dùng để định dạng đoạn văn bản có kiểu chữ in nghiêng.
  • <iframe>: Dùng để nhúng trang web khác vào trang web hiện tại.
  • <img>: Dùng để thêm hình ảnh vào trang web.
  • <ins>:Dùng để tạo đường gạch chân lên đoạn text.
  • <kbd>: Dùng để chỉ một từ hoặc cụm từ có thể được diễn đạt bằng một phím tắt hay tổ hợp phím.
  • <li>: Dùng để xác định danh mục trong một danh sách.
  • <main>: Dùng để xác định thân của trang web.
  • <map> & <area>: Dùng để tạo bản đồ ảnh.
  • <mark>: Sử dụng để đánh dấu màu nền của text.
  • <meta>: Dùng để cung cấp cho trình duyệt, hay công cụ tìm kiếm các thông tin mô tả về trang web.
  • <meter>: Dùng để tạo phần tử như ổ đĩa, thước đo…
  • <nav>: Dùng để xác định tập hợp các liên kết. Nó thường được đi kèm với CSS để tạo thanh menu.
  • <noframes>: Dùng để xác định nội dung hiển thị trong trường hợp trình duyệt không hỗ trợ thẻ. 
  • <object>: Được sử dụng để nhúng tài liệu vào trang web.
  • <ol>: Được sử dụng để xác định danh sách theo một thứ tự nào đó.
  • <p>: Dùng để xác đoạn văn bản.
  • <pre>: Được sử dụng nhằm mục đích giữ định dạng gốc của nội dung hiển thị trên màn hình.
  • <progress>: Dùng để tạo thanh tiến trình.
  • <q>: Dùng để xác định câu trích dẫn ngắn.
  • <s>: Dùng để tạo đường kẻ ngang trên văn bản.
  • <small>: Được sử dụng để xác định đoạn text có chữ nhỏ hơn kích thước của văn bản bình thường.
  • <source>: Được sử dụng để xác định tài nguyên cung cấp cho trình nghe nhạc hoặc xem phim.
  • <span>: Được sử dụng nhằm mục đích nhóm các phần tử nội tuyến, giúp thuận tiện cho việc định dạng CSS.
  • <strong>: Dùng để in đậm văn bản.
  • <style>: Được sử dụng làm nơi chứa đoạn mã CSS.
  • <sub>: Có chức năng tạo văn bản kích thước nhỏ. Nó bằng khoảng nửa dưới của văn bản có kích thước bình thường.
  • <sup>: Được dùng để tạo văn bản kích thước nhỏ. Nó bằng khoảng nửa trên của văn bản có kích thước bình thường.
  • <table>: Được sử dụng để xác định một bảng.
  • <tbody>: Được sử dụng để xác định các dòng thuộc phần thân của bảng.
  • <td>: Được sử dụng để xác định một ô trong hàng. 
  • <tfoot>: Được dùng để xác định các dòng thuộc phần của bảng.
  • <th>: Được sử dụng để xác định một ô tiêu đề có trong hàng.
  • <thead>: Được sử dụng để xác định các dòng thuộc phần đầu bảng.
  • <time>: Dùng để đánh dấu thời gian, ngày tháng, lễ tết… trong văn bản.
  • <title>: Sử dụng để định danh tiêu đề trang web.
  • <tr>: Được dùng để xác định các phần tử cùng thuộc một hàng trong bảng.
  • <track>: Dùng để chèn phụ đề vào video.
  • <u>: Được dùng để tạo đường gạch chân lên text.
  • <ul>: Được sử dụng cho mục đích xác định danh sách không theo thứ tự.
  • <video>: Được dùng để tạo trình xem phim trên website.
  • <wbr>: Dùng để ngắt ký tự của cùng một từ và cho nó xuống dòng. Tag này được sử dụng trong trường hợp chiều rộng không đủ để chứa hết từ.
  • html la gi

Ưu điểm và nhược điểm của HTML là gì?

Ưu điểm:

  • Có nhiều tài nguyên hỗ trợ và số lượng người sử dụng cực lớn.
  • Tương thích, chạy mượt mà trên các trình duyệt.
  • Đơn giản, dễ thực hiện.
  • Mã nguồn mở và miễn phí.
  • “Đánh dấu” gọn và đồng nhất.
  • Chuẩn chính được vận hành bởi W3C.
  • Dễ tích hợp với các ngôn ngữ lập trình như PHP và Node.js.

Nhược điểm: