Bộ câu hỏi phỏng vấn HTML dành cho lập trình viên

Top 73 câu hỏi phỏng vấn HTML

HTML là gì?

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu chuẩn dùng để tạo ra các trang web. Nó mô tả cấu trúc nội dung trên web bằng cách sử dụng các thẻ (tags) và thuộc tính (attributes). HTML là một trong những công nghệ cơ bản của World Wide Web, bên cạnh CSS (Cascading Style Sheets) và JavaScript, và nó định nghĩa nội dung và cấu trúc của trang web.

Các Đặc Điểm Chính của HTML:

Cấu trúc nội dung: HTML sử dụng các thẻ để đánh dấu cấu trúc của nội dung, bao gồm văn bản, hình ảnh, liên kết, danh sách, bảng, v.v
Thẻ (Tags): Các thẻ HTML, được viết trong cặp dấu ngoặc nhọn (< và >), định nghĩa các phần tử trên trang web, như tiêu đề (<h1> đến <h6>), đoạn văn (<p>), liên kết (<a>), hình ảnh (<img>), v.v
Thuộc tính (Attributes): Các thuộc tính cung cấp thông tin bổ sung cho các thẻ, như đường dẫn của hình ảnh trong thẻ <img src="url"> hoặc địa chỉ URL trong thẻ liên kết <a href="url">
Semantic HTML: Là việc sử dụng các thẻ HTML theo cách mà chúng thể hiện ý nghĩa của nội dung, giúp trang web dễ hiểu hơn đối với cả người và máy

Tại Sao HTML Lại Quan Trọng?

Nền tảng của web: Mọi trang web đều được xây dựng dựa trên HTML. Nó là ngôn ngữ cơ bản mà mọi trình duyệt web đều hiểu và hiển thị
Tương thích: HTML được hỗ trợ bởi tất cả các trình duyệt web trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động
Dễ học và sử dụng: HTML có cú pháp đơn giản và dễ hiểu, làm cho nó trở thành điểm khởi đầu lý tưởng cho bất kỳ ai muốn bắt đầu học phát triển web

HTML5 là phiên bản mới nhất và được sử dụng rộng rãi nhất của HTML, bổ sung nhiều tính năng mới như hỗ trợ video và âm thanh trực tiếp trong trình duyệt, cải thiện hỗ trợ cho các ứng dụng web tương tác và đồ họa, cũng như nhiều cải tiến về hiệu suất và tính năng

Thuộc tính trong HTML là gì?

Trong ngôn ngữ HTML, thuộc tính (attribute) là một loại thông tin bổ sung liên quan đến phần tử HTML. Mỗi thuộc tính được đại diện bởi một từ khóa bằng tiếng Anh và thường xuất hiện dưới dạng cặp tên/giá trị, được đặt trong thẻ mở của phần tử HTML. Thuộc tính cung cấp thông tin bổ sung về một phần tử, như định dạng, hành vi hoặc nội dung, và giúp trình duyệt hiểu cách hiển thị hoặc xử lý phần tử đó.

Ví dụ, thuộc tính width và height được sử dụng để chỉ định chiều rộng và chiều cao của một phần tử, như một hình ảnh. Thuộc tính href được sử dụng trong thẻ <a> để chỉ định URL mà liên kết sẽ dẫn đến khi người dùng nhấp vào

Cách khai báo thuộc tính cho phần tử:

html

<a href="https://example.com" target="_blank">Visit Example</a>

Trong ví dụ trên, thẻ <a> có hai thuộc tính: href, chỉ định URL mà liên kết sẽ dẫn đến, và target với giá trị _blank, chỉ định rằng liên kết sẽ được mở trong một tab mới.

Thuộc tính id và class là hai thuộc tính quan trọng khác trong HTML, được sử dụng để đặt tên (phân loại) các phần tử, giúp tiện cho việc quản lý và định dạng các phần tử sau này thông qua CSS hoặc JavaScript

id là một thuộc tính duy nhất được sử dụng để xác định một phần tử cụ thể trong tài liệu.
class được sử dụng để xác định một hoặc nhiều phần tử với một nhóm đặc điểm chung, cho phép áp dụng cùng một kiểu định dạng hoặc hành vi cho tất cả các phần tử trong nhóm đó.

Thuộc tính là một phần không thể thiếu trong việc xây dựng các trang web, giúp tạo ra các trang web đa dạng và tương tác

HTML semantic là gì?

HTML semantic, hay còn gọi là các phần tử ngữ nghĩa trong HTML, là cách sử dụng các thẻ HTML theo cách mà chúng phản ánh nội dung được chứa bên trong đó. Các thẻ ngữ nghĩa giúp mô tả rõ ràng ý nghĩa của nội dung cho cả trình duyệt và người phát triển, thay vì chỉ sử dụng các thẻ dựa trên cách chúng hiển thị nội dung

Các thẻ ngữ nghĩa trong HTML5 như <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, và <time> giúp xác định cấu trúc của một trang web một cách rõ ràng và có ý nghĩa. Chúng cung cấp thông tin về loại nội dung mà phần tử đó chứa đựng, giúp cải thiện khả năng truy cập và tối ưu hóa cho công cụ tìm kiếm

Ví dụ, sử dụng <nav> cho phần điều hướng, <header> cho phần đầu trang, <footer> cho phần cuối trang, và <article> cho một bài viết độc lập. Điều này giúp các trình duyệt và công cụ tìm kiếm hiểu được cấu trúc và nội dung của trang web, từ đó có thể xử lý và hiển thị thông tin một cách chính xác hơn

Có phải tất cả các thẻ HTML đều có thẻ đóng không?

Không phải tất cả các thẻ HTML đều có thẻ đóng. Trong HTML, có một loại thẻ được gọi là "void elements" hoặc "self-closing tags," những thẻ này không yêu cầu và không được có thẻ đóng

Void Elements (Thẻ Tự Đóng)

Void elements là các thẻ chỉ có thẻ mở và không chứa nội dung bên trong. Các thẻ này không cần và không được có thẻ đóng vì chúng không bao giờ chứa nội dung. Ví dụ về các void elements bao gồm:

<br>: Chèn một dòng ngắt (line break).
<img>: Định nghĩa một hình ảnh.
<input>: Định nghĩa một trường nhập liệu.
<hr>: Tạo một đường ngang (horizontal rule).
<meta>: Cung cấp thông tin siêu dữ liệu.
<link>: Liên kết với các tài nguyên bên ngoài như CSS.
<area>, <base>, <col>, <embed>, <param>, <source>, <track>, <wbr>: Các thẻ khác cũng không yêu cầu thẻ đóng.

Trong HTML5, việc thêm một dấu gạch chéo (/) trước dấu đóng ngoặc nhọn trong thẻ mở của void elements là không cần thiết và không ảnh hưởng đến việc phân tích cú pháp của trình duyệt. Tuy nhiên, việc thêm dấu gạch chéo có thể giúp mã nguồn trở nên rõ ràng hơn và tương thích với cú pháp của XHTML, nơi mà dấu gạch chéo là bắt buộc cho các thẻ tự đóng.

Ví dụ, cả hai cách viết sau đều hợp lệ trong HTML5:

html

<br>
<br />

Nhưng trong XHTML, bạn cần phải viết như sau:

html

<br />

Đối với các thẻ không phải là void elements, bạn cần phải cung cấp cả thẻ mở và thẻ đóng để định nghĩa nội dung của phần tử đó.

Sự khác biệt giữa thẻ <link> và thẻ <a> trong HTML là gì?

Thẻ <link> và thẻ <a> trong HTML đều được sử dụng để tạo liên kết nhưng có mục đích và cách sử dụng khác nhau:

Thẻ `<link>`

Mục đích: Thẻ <link> chủ yếu được sử dụng để liên kết tài liệu HTML với một tài nguyên bên ngoài, thường là các tệp CSS hoặc favicon
Vị trí: Thường được đặt trong phần <head> của tài liệu HTML
Không hiển thị nội dung: Thẻ <link> không hiển thị nội dung trực tiếp trên trang web mà chỉ định cách trang web được hiển thị hoặc hoạt động
Ví dụ:

html

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

Thẻ `<a>`

Mục đích: Thẻ <a>, còn được gọi là thẻ neo (anchor tag), được sử dụng để tạo hyperlinks, cho phép người dùng chuyển từ trang này sang trang khác hoặc một phần khác của cùng một trang
Vị trí: Có thể được đặt ở bất kỳ đâu trong phần <body> của tài liệu HTML
Hiển thị nội dung: Thẻ <a> hiển thị nội dung có thể nhấp vào, như văn bản hoặc hình ảnh, để người dùng có thể tương tác
Ví dụ:

html

<a href="https://www.example.com">Truy cập trang web của chúng tôi</a>

Sự Khác Biệt Chính

Mục đích sử dụng: Thẻ <link> chủ yếu được sử dụng để liên kết với các tài nguyên bên ngoài như CSS, trong khi thẻ <a> được sử dụng để tạo hyperlinks giữa các trang web hoặc các phần của trang web
Vị trí: <link> thường được đặt trong <head>, còn <a> được đặt trong <body>
Hiển thị: <link> không tạo ra nội dung có thể nhấp được trên trang, trong khi <a> tạo ra nội dung có thể tương tác được với người dùng

Cả hai thẻ đều quan trọng trong việc xây dựng các trang web hiện đại, với <link> hỗ trợ việc tải các tài nguyên bên ngoài và <a> tạo điều hướng giữa các trang hoặc tài liệu.

Sự khác nhau của thuộc tính id và class trong phần tử HTML là gì?

Trong HTML, thuộc tính id và class đều được sử dụng để xác định các phần tử, nhưng chúng có những sự khác biệt quan trọng:

Tính duy nhất:
- id: Mỗi phần tử trên một trang HTML chỉ có thể có một id duy nhất. Điều này có nghĩa là không có hai phần tử nào trên cùng một trang có thể có cùng một giá trị id
- class: Một class có thể được sử dụng trên nhiều phần tử trên cùng một trang. Điều này cho phép bạn áp dụng cùng một tập hợp các quy tắc CSS hoặc thao tác JavaScript cho nhiều phần tử
Mục đích sử dụng:
- id: Thường được sử dụng để xác định một phần tử cụ thể mà bạn muốn thao tác hoặc áp dụng kiểu dáng đặc biệt thông qua CSS hoặc JavaScript
- class: Thường được sử dụng để xác định một nhóm các phần tử có đặc điểm chung hoặc cần được áp dụng cùng một kiểu dáng
Cú pháp trong CSS:
- Khi sử dụng id trong CSS, bạn sẽ sử dụng dấu thăng (#) trước tên id
- Khi sử dụng class trong CSS, bạn sẽ sử dụng dấu chấm (.) trước tên class
Sử dụng trong JavaScript:
- Để truy cập một phần tử bằng id, bạn có thể sử dụng document.getElementById('idName')
- Để truy cập các phần tử bằng class, bạn có thể sử dụng document.getElementsByClassName('className'), lưu ý rằng phương thức này trả về một danh sách các phần tử

Tóm lại, id được sử dụng để xác định một phần tử duy nhất trên trang, trong khi class được sử dụng để xác định một nhóm các phần tử có đặc điểm chung. Việc lựa chọn giữa id và class phụ thuộc vào nhu cầu cụ thể của bạn khi thiết kế và phát triển trang web.

Có bao nhiêu cách để dùng CSS cùng với HTML?

Có ba cách chính để sử dụng CSS cùng với HTML:

CSS Nội tuyến (Inline CSS): CSS nội tuyến được sử dụng để áp dụng CSS trực tiếp trên một dòng hoặc một phần tử cụ thể. Để sử dụng CSS nội tuyến, bạn sử dụng thuộc tính style trên thẻ HTML liên quan

Ví dụ:
html
```
<p style="color: red;">Đây là một đoạn văn màu đỏ.</p>
```
CSS Nội bộ (Internal CSS): CSS nội bộ được đặt trong thẻ <style> ở phần <head> của tài liệu HTML. CSS nội bộ áp dụng cho toàn bộ trang và chỉ ảnh hưởng đến tài liệu mà nó được khai báo

Ví dụ:
html
```
<head>
<style>
  p { color: blue; }
</style>
</head>
<body>
  <p>Đây là một đoạn văn màu xanh.</p>
</body>
```
CSS Bên ngoại (External CSS): CSS bên ngoại được viết trong một tệp riêng biệt với phần mở rộng .css và sau đó được liên kết với tài liệu HTML thông qua thẻ <link> trong phần <head> của tài liệu

Ví dụ:
html
```
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
```
Trong đó styles.css là tệp CSS bên ngoại chứa các quy tắc CSS.

Mỗi phương pháp có ưu và nhược điểm riêng, và việc lựa chọn sử dụng phương pháp nào phụ thuộc vào nhu cầu cụ thể của dự án. CSS bên ngoại thường được ưa chuộng vì nó giúp tách biệt nội dung và thiết kế, làm cho việc bảo trì và quản lý mã nguồn trở nên dễ dàng hơn

Sự khác nhau giữa thẻ section và thẻ div trong HTML là gì?

Thẻ section và thẻ div trong HTML đều được sử dụng để nhóm nội dung và phần tử, nhưng chúng có sự khác biệt về mặt ngữ nghĩa và mục đích sử dụng:

Thẻ `section`

Là một phần tử ngữ nghĩa được sử dụng để định nghĩa một phần hoặc khu vực độc lập trong một trang web có nội dung liên quan đến một chủ đề cụ thể
Thường đi kèm với một tiêu đề (<h1>-<h6>) và được sử dụng để tạo cấu trúc nội dung của trang web theo cách có ý nghĩa
Các ví dụ về việc sử dụng section bao gồm các khu vực như giới thiệu, tin tức, thông tin liên hệ, v.v., trên trang chủ của một website

Thẻ `div`

Là một container không ngữ nghĩa, thường được sử dụng để bố cục hoặc tổ chức nội dung và phong cách trên trang web
div không mang thông tin ngữ nghĩa về nội dung bên trong nó và thường được sử dụng khi không có phần tử ngữ nghĩa nào khác phù hợp
div thường được sử dụng cho mục đích CSS và JavaScript, như áp dụng phong cách hoặc xử lý sự kiện

Khi nào sử dụng?

Sử dụng section khi bạn muốn nhóm nội dung có liên quan đến một chủ đề cụ thể và muốn nó được hiểu là một phần độc lập của trang web
Sử dụng div khi bạn cần một container để bố cục hoặc áp dụng phong cách cho nội dung mà không cần thêm ý nghĩa ngữ nghĩa vào cấu trúc trang web

Tóm lại, section và div đều là các phần tử quan trọng trong việc xây dựng trang web, nhưng sự lựa chọn giữa chúng phụ thuộc vào mục đích sử dụng: section cho nội dung ngữ nghĩa và div cho bố cục hoặc phong cách

Sự khác biệt giữa attribute và property trong HTML là gì?

Trong HTML, thuộc tính (attributes) và thuộc tính (properties) thường gây nhầm lẫn nhưng chúng có những đặc điểm khác nhau:

Thuộc Tính (Attributes)

Định nghĩa: Thuộc tính là thông tin bổ sung được xác định trong thẻ HTML để khởi tạo khi tạo ra phần tử
Tính chất: Giá trị của thuộc tính là cố định, dựa trên những gì được viết trong mã HTML ban đầu
Truy cập: Có thể truy cập và thay đổi thông qua các phương thức DOM như getAttribute(), setAttribute(), và removeAttribute()
Ví dụ: type="text" trong <input type="text"> là một thuộc tính xác định loại trường nhập liệu.

Thuộc Tính (Properties)

Định nghĩa: Thuộc tính là các đặc tính của một nút DOM (đối tượng), mà bạn có thể thao tác
Tính chất: Giá trị của thuộc tính có thể thay đổi và thường phản ánh trạng thái hiện tại của phần tử DOM
Truy cập: Có thể truy cập và thay đổi trực tiếp thông qua đối tượng DOM, ví dụ: document.getElementById('myElement').value
Ví dụ: value trong document.getElementById('myInput').value là một thuộc tính của đối tượng DOM cho phần tử <input>.

Sự Khác Biệt Chính

Khởi tạo: Thuộc tính HTML xác định các giá trị khởi tạo của đối tượng. Thuộc tính DOM là các đặc tính có thể thay đổi của đối tượng mà chúng ta có thể thao tác để thay đổi hình thức, cảm giác và hành vi của ứng dụng
Đồng bộ hóa: Khi một thuộc tính HTML tiêu chuẩn thay đổi, thuộc tính DOM tương ứng thường được tự động cập nhật để phản ánh thay đổi đó và ngược lại. Tuy nhiên, có những ngoại lệ, ví dụ như thuộc tính value của phần tử <input> chỉ đồng bộ từ thuộc tính HTML sang thuộc tính DOM, nhưng không ngược lại

Sử dụng thuộc tính hay thuộc tính phụ thuộc vào nhu cầu cụ thể của bạn. Nếu bạn cần làm việc với giá trị khởi tạo như được xác định trong mã HTML, bạn sẽ sử dụng thuộc tính. Nếu bạn cần thao tác với trạng thái hiện tại của phần tử, bạn sẽ sử dụng thuộc tính

Thẻ datalist trong HTML là gì?

Thẻ datalist trong HTML là một phần tử cho phép bạn cung cấp một danh sách các tùy chọn được định nghĩa trước cho các trường nhập liệu (input fields) trên một biểu mẫu web. Khi người dùng bắt đầu nhập vào trường input được liên kết với datalist, họ sẽ thấy một danh sách gợi ý xuất hiện, giúp họ có thể chọn nhanh một trong các tùy chọn đã được định nghĩa.

Để sử dụng datalist, bạn cần định nghĩa một phần tử <datalist> chứa một danh sách các phần tử <option>. Mỗi phần tử <option> định nghĩa một tùy chọn có thể được chọn. Bạn sau đó liên kết datalist với một trường input bằng cách sử dụng thuộc tính list của input, giá trị của thuộc tính list này phải trùng với giá trị id của datalist

Ví dụ cách sử dụng datalist:

html

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

Trong ví dụ trên, khi người dùng nhập vào trường input, họ sẽ được cung cấp một danh sách gợi ý với các tùy chọn "Apple", "Banana", và "Cherry" để chọn.

Sử dụng datalist có thể cải thiện trải nghiệm người dùng bằng cách cung cấp chức năng tự động gợi ý, giảm thiểu lỗi nhập liệu và tăng tốc độ nhập liệu, đặc biệt là trên các thiết bị di động nơi mà việc nhập liệu có thể khó khăn hơn

Một trang web có thể chứa nhiều thẻ header, footer không?

Có, một trang web có thể chứa nhiều thẻ header và footer. Tuy nhiên, cần lưu ý cách sử dụng chúng để đảm bảo rằng mã HTML tuân theo ngữ nghĩa và cấu trúc đúng đắn.

Theo tài liệu của W3C, các thẻ header và footer đại diện cho các khu vực đầu trang và cuối trang của phần tử "sectioning" gần nhất hoặc phần tử "sectioning root" như <body>, <article>, <section>, và <nav>. Mỗi phần tử "sectioning" hoặc "sectioning root" có thể chứa một thẻ header và một thẻ footer riêng biệt.

Ví dụ, một trang web có thể có một header chính cho toàn trang, và các header khác cho mỗi <article> hoặc <section> riêng lẻ bên trong trang đó. Tương tự, mỗi <article> hoặc <section> có thể có một footer riêng

Điều này có nghĩa là bạn có thể sử dụng nhiều header và footer trong một trang, miễn là chúng được sử dụng một cách ngữ nghĩa và phù hợp với cấu trúc của trang. Mỗi header nên chứa thông tin đầu trang cho phần tử "sectioning" mà nó thuộc về, và mỗi footer nên chứa thông tin cuối trang cho phần tử đó

Giải thích mục đích của thẻ main trong HTML để làm gì?

Thẻ <main> trong HTML đại diện cho nội dung chính hoặc nội dung cốt lõi của thân tài liệu (document body). Đây là một phần tử ngữ nghĩa và cấu trúc được giới thiệu trong HTML5. Dưới đây là một số đặc điểm chính của thẻ <main>:

Ngữ Nghĩa và Cấu Trúc: Thẻ <main> cung cấp một cách ngữ nghĩa để đánh dấu nội dung chính của một trang web, giúp cải thiện khả năng truy cập và tối ưu hóa cho công cụ tìm kiếm
Nội Dung Duy Nhất: Nội dung bên trong thẻ <main> nên là duy nhất cho tài liệu và không bao gồm các phần tử lặp lại trên nhiều trang của website như thanh điều hướng, thông tin bản quyền, logo trang web, và biểu mẫu tìm kiếm
Một Thẻ <main> Trên Mỗi Trang: Một tài liệu nên chỉ chứa một thẻ <main> để tránh gây nhầm lẫn cho công cụ tìm kiếm và công nghệ hỗ trợ
Không Nằm Trong Các Phần Tử Khác: Thẻ <main> không nên là phần tử con của các thẻ <article>, <aside>, <footer>, <header>, hoặc <nav>
Hỗ Trợ Công Nghệ Hỗ Trợ: Thẻ <main> hữu ích cho các công nghệ hỗ trợ như máy đọc màn hình, giúp người dùng có thể bỏ qua phần điều hướng và các nội dung không liên quan để trực tiếp đến nội dung chính của trang
Không Có Kiểu Mặc Định: Mặc dù thẻ <main> không có kiểu mặc định, nhưng bạn có thể dễ dàng áp dụng CSS để tùy chỉnh kiểu dáng cho nó

Ví dụ sử dụng thẻ <main>:

html

<!DOCTYPE html>
<html>
<head>
    <title>Trang Web của Tôi</title>
</head>
<body>
    <header>
        <!-- Nội dung header như logo, menu -->
    </header>
    <main>
        <!-- Nội dung chính của trang -->
        <h1>Chào mừng đến với trang web của tôi</h1>
        <p>Đây là nội dung chính mà người dùng sẽ quan tâm.</p>
    </main>
    <footer>
        <!-- Thông tin footer như thông tin bản quyền, liên hệ -->
    </footer>
</body>
</html>

Trong ví dụ trên, thẻ <main> được sử dụng để bao bọc nội dung chính của trang, giúp tách biệt nó với các phần khác như header và footer, từ đó cải thiện cấu trúc và ngữ nghĩa của trang web.

Khi nào thì nên để sử dụng thẻ small trong HTML?

Trong HTML, thẻ <small> được sử dụng để biểu diễn các phần văn bản phụ hoặc văn bản nhỏ, như bản quyền, văn bản pháp lý, hoặc các chú thích phụ, độc lập với cách trình bày được thiết lập của nó. Theo mặc định, nó làm cho văn bản bên trong nó nhỏ hơn một cỡ chữ, ví dụ từ cỡ chữ nhỏ xuống cỡ chữ rất nhỏ

Sử dụng thẻ <small> thích hợp cho:

Các bình luận phụ hoặc văn bản nhỏ, như bản quyền và văn bản pháp lý
Các thông tin phụ hoặc không phải là trọng tâm chính của trang, tương tự như cách sử dụng thẻ <aside> cho nội dung không phải là trọng tâm chính của trang
Các thông tin bổ sung như thông tin cấp phép, tuyên bố từ chối trách nhiệm, hoặc thông tin bản quyền trong chân trang của trang web

Ví dụ sử dụng thẻ <small>:

html

<p>Đây là câu đầu tiên. <small>Đoạn văn này được viết bằng chữ nhỏ.</small></p>

Mặc dù CSS cũng có thể cung cấp một hiệu ứng tương tự hoặc phong phú hơn cho phần tử HTML <small>, nhưng thẻ này vẫn chưa bị lỗi thời và được khuyến khích sử dụng khi cần biểu diễn nội dung phụ hoặc thông tin bổ sung một cách ngữ nghĩa

Làm sao để làm nổi bật (highlight) chữ trong HTML?

Để làm nổi bật (highlight) chữ trong HTML, có một số cách khác nhau mà bạn có thể sử dụng, tùy thuộc vào mục đích và yêu cầu cụ thể của bạn. Dưới đây là một số phương pháp phổ biến:

Sử dụng Thẻ `<mark>`

HTML5 giới thiệu thẻ <mark> để đánh dấu hoặc làm nổi bật văn bản có ý nghĩa đặc biệt hoặc liên quan trong tài liệu HTML. Các trình duyệt thường hiển thị văn bản trong thẻ <mark> với màu nền mặc định là màu vàng

Ví dụ:

html

<p>Đây là một đoạn văn bản với <mark>văn bản được làm nổi bật</mark>.</p>

Sử dụng CSS với Thẻ `<span>`

Bạn cũng có thể sử dụng thẻ <span> kết hợp với CSS để tạo ra hiệu ứng làm nổi bật văn bản. Điều này cho phép bạn tùy chỉnh màu nền và màu văn bản một cách linh hoạt hơn

Ví dụ:

html

<style>
.highlight {
  background-color: yellow;
}
</style>

<p>Đây là một đoạn văn bản với <span class="highlight">văn bản được làm nổi bật</span>.</p>

Sử dụng CSS Class

Bạn có thể tạo một class CSS với thuộc tính background-color để định nghĩa màu nền cho văn bản làm nổi bật. Sau đó, áp dụng class này cho các thẻ HTML chứa văn bản bạn muốn làm nổi bật

Ví dụ:

html

<style>
.highlightme {
  background-color: #FFFF00; /* Màu vàng */
}
</style>

<p>Đây là một đoạn văn bản với <span class="highlightme">văn bản được làm nổi bật</span>.</p>

Trong tất cả các phương pháp trên, việc sử dụng thẻ <mark> là cách đơn giản và nhanh chóng nhất để làm nổi bật văn bản, vì nó không yêu cầu thêm CSS. Tuy nhiên, nếu bạn muốn tùy chỉnh màu sắc và kiểu dáng nổi bật, việc sử dụng CSS với thẻ <span> hoặc các thẻ khác sẽ cung cấp cho bạn sự linh hoạt hơn

Character Encoding trong HTML là gì?

Trong HTML, Character Encoding (mã hóa ký tự) là phương pháp chuyển đổi các byte thành ký tự. Để hiển thị một tài liệu HTML một cách chính xác, trình duyệt web cần biết nên sử dụng bộ mã hóa ký tự nào. Việc xác định mã hóa ký tự thường được thực hiện thông qua thẻ <meta> với thuộc tính charset

Ví dụ về cách khai báo mã hóa ký tự UTF-8 trong HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
</head>
<body>
    <!-- Nội dung trang web -->
</body>
</html>

Trong ví dụ trên, thẻ <meta charset="UTF-8"> được đặt ngay sau thẻ <head> để chỉ định rằng tài liệu sử dụng mã hóa ký tự UTF-8. UTF-8 là một bộ mã hóa ký tự rất phổ biến vì nó hỗ trợ gần như tất cả các ký tự và biểu tượng trên thế giới, từ các ngôn ngữ phương Tây đến các ngôn ngữ có ký tự đặc biệt như tiếng Trung, tiếng Nhật, tiếng Ả Rập, và nhiều ngôn ngữ khác

Khai báo mã hóa ký tự là quan trọng không chỉ cho việc hiển thị nội dung cho người đọc mà còn cho việc xử lý dữ liệu không phải ASCII, như dữ liệu nhập từ người dùng trong các biểu mẫu, trong URL được tạo bởi script, và các tình huống khác

Các thuộc tính data- trong HTML dùng vào việc gì?

Các thuộc tính data- trong HTML được sử dụng để lưu trữ thông tin bổ sung về một phần tử mà không ảnh hưởng đến hành vi hoặc hiển thị của phần tử đó. Các thuộc tính này cho phép bạn gắn các thông tin tùy ý vào các phần tử HTML mà không cần sử dụng các thuộc tính không chuẩn hoặc thêm các thuộc tính mới vào DOM

Mục đích của việc sử dụng các thuộc tính data- bao gồm:

Lưu Trữ Thông Tin: Các thuộc tính data- thường được sử dụng để lưu trữ thông tin mà có thể cần thiết cho logic JavaScript, nhưng không cần hiển thị trực tiếp trên giao diện người dùng
Tương Tác với JavaScript: Thông tin lưu trữ trong các thuộc tính data- có thể dễ dàng truy cập và thao tác bằng JavaScript thông qua đối tượng dataset
Tùy Chỉnh CSS: Các thuộc tính data- có thể được sử dụng trong CSS để áp dụng các quy tắc kiểu dáng dựa trên giá trị của chúng
Tính Linh Hoạt: Các thuộc tính data- cung cấp một cách linh hoạt để thêm thông tin tùy chỉnh vào một phần tử mà không cần phải mở rộng hoặc thay đổi DOM

Cách sử dụng thuộc tính data-:

html

<div id="myDiv" data-user="johnDoe" data-age="28" data-state="active"></div>

Trong ví dụ trên, phần tử div có ba thuộc tính data-: data-user, data-age, và data-state. Các giá trị này sau đó có thể được truy cập bằng JavaScript:

javascript

let div = document.getElementById('myDiv');
console.log(div.dataset.user); // johnDoe
console.log(div.dataset.age); // 28
console.log(div.dataset.state); // active

Các thuộc tính data- giúp tạo ra các ứng dụng web phức tạp mà không làm rối loạn cấu trúc HTML và giữ cho mã nguồn trở nên sạch sẽ và dễ bảo trì

Thuộc tính rel="noopener" trong HTML được sử dụng ở đâu và tại sao?

Mục đích của việc sử dụng các thuộc tính data- bao gồm:

Lưu Trữ Thông Tin: Các thuộc tính data- thường được sử dụng để lưu trữ thông tin mà có thể cần thiết cho logic JavaScript, nhưng không cần hiển thị trực tiếp trên giao diện người dùng
Tương Tác với JavaScript: Thông tin lưu trữ trong các thuộc tính data- có thể dễ dàng truy cập và thao tác bằng JavaScript thông qua đối tượng dataset
Tùy Chỉnh CSS: Các thuộc tính data- có thể được sử dụng trong CSS để áp dụng các quy tắc kiểu dáng dựa trên giá trị của chúng
Tính Linh Hoạt: Các thuộc tính data- cung cấp một cách linh hoạt để thêm thông tin tùy chỉnh vào một phần tử mà không cần phải mở rộng hoặc thay đổi DOM

Cách sử dụng thuộc tính data-:

html

<div id="myDiv" data-user="johnDoe" data-age="28" data-state="active"></div>

Trong ví dụ trên, phần tử div có ba thuộc tính data-: data-user, data-age, và data-state. Các giá trị này sau đó có thể được truy cập bằng JavaScript:

javascript

let div = document.getElementById('myDiv');
console.log(div.dataset.user); // johnDoe
console.log(div.dataset.age); // 28
console.log(div.dataset.state); // active

Các thuộc tính data- giúp tạo ra các ứng dụng web phức tạp mà không làm rối loạn cấu trúc HTML và giữ cho mã nguồn trở nên sạch sẽ và dễ bảo trì

Bạn biết gì về thuộc tính srcset trong thẻ img?

Thuộc tính srcset trong thẻ img của HTML5 cho phép bạn định nghĩa nhiều kích thước của cùng một hình ảnh, giúp trình duyệt có thể chọn nguồn hình ảnh phù hợp nhất dựa trên điều kiện của trình duyệt, như kích thước màn hình hoặc độ phân giải. Điều này giúp tối ưu hóa hiệu suất tải trang và cải thiện trải nghiệm người dùng bằng cách đảm bảo rằng hình ảnh không bị quá lớn hoặc quá nhỏ so với kích thước màn hình của người dùng.

Cách Sử Dụng `srcset`

Bạn sử dụng srcset bằng cách liệt kê các URL của hình ảnh và kích thước tương ứng của chúng, phân tách bằng dấu phẩy. Kích thước có thể được chỉ định bằng số pixel (đánh dấu bằng w cho chiều rộng) hoặc bằng mật độ điểm ảnh (đánh dấu bằng x)

html

<img srcset="example-small.jpg 500w, example-medium.jpg 1000w, example-large.jpg 1500w"
     src="example-fallback.jpg"
     alt="Mô tả hình ảnh">

Trong ví dụ trên, trình duyệt sẽ chọn example-small.jpg nếu chiều rộng của khu vực hiển thị hình ảnh là 500px, example-medium.jpg cho 1000px, và example-large.jpg cho 1500px. Thuộc tính src cung cấp một hình ảnh dự phòng cho các trình duyệt không hỗ trợ srcset.

Sử Dụng `sizes`

Thuộc tính sizes có thể được sử dụng cùng với srcset để cung cấp thông tin thêm về kích thước hình ảnh dự kiến sẽ hiển thị trên trang, giúp trình duyệt chọn hình ảnh phù hợp hơn

html

<img srcset="example-small.jpg 500w, example-medium.jpg 1000w, example-large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"
     src="example-fallback.jpg"
     alt="Mô tả hình ảnh">

Trong ví dụ này, sizes chỉ định rằng nếu chiều rộng của viewport nhỏ hơn 600px, hình ảnh sẽ chiếm 500px của viewport; nếu nhỏ hơn 900px, hình ảnh sẽ chiếm 1000px; và trong các trường hợp khác, hình ảnh sẽ chiếm 1500px.

Sử dụng srcset và sizes cùng nhau giúp tạo ra các trang web đáp ứng, nơi hình ảnh được tải với kích thước phù hợp nhất với kích thước màn hình và độ phân giải của người dùng, cải thiện hiệu suất tải trang và trải nghiệm người dùng.

WebP là gì?

WebP là một định dạng hình ảnh được phát triển bởi Google, nhằm mục đích thay thế cho các định dạng hình ảnh truyền thống như JPEG, PNG và GIF[1]. WebP hỗ trợ cả nén có mất dữ liệu (lossy) và không mất dữ liệu (lossless), cũng như hỗ trợ hoạt hình và trong suốt alpha

WebP cung cấp nhiều ưu điểm so với các định dạng hình ảnh khác, bao gồm:

Kích thước tệp nhỏ hơn: WebP có khả năng giảm kích thước tệp hình ảnh so với JPEG và PNG, giúp giảm thời gian tải trang web và tiết kiệm băng thông
Chất lượng hình ảnh cao: WebP có thể duy trì chất lượng hình ảnh tốt trong khi vẫn giảm kích thước tệp
Hỗ trợ đa tính năng: WebP hỗ trợ nén ảnh, hoạt hình và trong suốt alpha, cung cấp nhiều lựa chọn hơn cho các nhà phát triển web

Tuy nhiên, một số nhược điểm của WebP bao gồm:

Khả năng tương thích: Mặc dù hỗ trợ WebP trên các trình duyệt web phổ biến ngày càng được cải thiện, nhưng một số trình duyệt cũ hơn và một số công cụ chỉnh sửa hình ảnh vẫn không hỗ trợ định dạng này
Cần công cụ chuyển đổi: Để sử dụng hình ảnh WebP trên các trang web không hỗ trợ, có thể cần sử dụng các công cụ hoặc plugin để chuyển đổi hình ảnh sang định dạng WebP hoặc từ WebP sang các định dạng khác

Google đã công bố định dạng WebP vào tháng 9 năm 2010 và đã phát hành phiên bản ổn định đầu tiên của thư viện hỗ trợ vào tháng 4 năm 2018. WebP ngày càng được sử dụng rộng rãi trên web nhờ khả năng nén ảnh hiệu quả và chất lượng hình ảnh tốt, đặc biệt là trong việc tối ưu hóa hiệu suất trang web

Mã hóa URL là gì? Tại sao URL được mã hóa bằng HTML?

Mã hóa URL, còn được gọi là percent-encoding, là một phương pháp để mã hóa dữ liệu không in được hoặc các ký tự đặc biệt thành một định dạng được chấp nhận bởi các máy chủ web và trình duyệt. Mục đích của việc mã hóa URL là để đảm bảo rằng các URL được gửi trên Internet có thể được xử lý một cách đúng đắn, đặc biệt là khi chúng chứa dữ liệu không phải là ký tự ASCII

URL cần được mã hóa nếu chúng chứa các ký tự không phải ASCII hoặc có ý nghĩa đặc biệt trong URL, như dấu cách, dấu nhỏ hơn, dấu lớn hơn, dấu và (&), và các ký tự khác. Khi một URL chứa dấu cách, ví dụ, nó cần được thay thế bằng ký tự "+" hoặc "%20", là mã ASCII cho dấu cách. Việc mã hóa URL cũng cần thiết khi gửi dữ liệu thông qua các biểu mẫu HTML trong các yêu cầu HTTP, vì dữ liệu biểu mẫu có thể chứa các ký tự đặc biệt

Mã hóa URL là quan trọng vì các lý do sau:

Đảm bảo URL hợp lệ: Mã hóa URL chuyển đổi các ký tự không hợp lệ hoặc có ý nghĩa đặc biệt trong URL thành một định dạng hợp lệ mà tất cả các trình duyệt web và máy chủ có thể hiểu được
Tránh xung đột: Một số ký tự có ý nghĩa đặc biệt trong URL, như dấu hỏi (?) đánh dấu bắt đầu của chuỗi truy vấn, hoặc dấu thăng (#) đánh dấu một phần tử neo trên trang. Mã hóa URL ngăn chặn sự nhầm lẫn giữa các ký tự này và dữ liệu thực sự cần được truyền
Tương thích: Mã hóa URL đảm bảo rằng dữ liệu có thể được truyền qua Internet mà không gặp vấn đề, ngay cả khi dữ liệu chứa các ký tự không phải ASCII hoặc các ký tự điều khiển

Ví dụ về mã hóa URL:

Ký tự dấu cách được mã hóa thành %20.
Ký tự dấu nháy kép (") được mã hóa thành %22.
Ký tự dấu và (&) được mã hóa thành %26.

Mã hóa URL là một phần quan trọng của việc phát triển web và là cần thiết để đảm bảo rằng các ứng dụng web hoạt động một cách chính xác và an toàn

Có gì mới trong HTML5?

HTML5, phiên bản mới nhất của HTML, mang lại nhiều tính năng mới và cải tiến so với các phiên bản trước, giúp tạo ra các trang web phong phú hơn, tương tác hơn và thân thiện hơn với người dùng. Dưới đây là một số tính năng chính của HTML5:

Hỗ trợ đa phương tiện: HTML5 cung cấp hỗ trợ tích hợp cho việc nhúng nội dung âm thanh và video mà không cần đến các plugin bên thứ ba như Flash. Các thẻ <audio> và <video> cho phép nhúng trực tiếp các tệp âm thanh và video vào trang web
Các phần tử ngữ nghĩa: HTML5 giới thiệu các phần tử ngữ nghĩa mới như <header>, <footer>, <article>, <section>, <nav>, và <figure> giúp cấu trúc nội dung trang web một cách rõ ràng và dễ hiểu hơn, cả cho người lập trình và công cụ tìm kiếm
Canvas và SVG: HTML5 bổ sung các phần tử <canvas> và hỗ trợ đồ họa vector SVG, cho phép tạo và điều khiển đồ họa và hoạt hình trực tiếp trong trình duyệt bằng JavaScript
Hỗ trợ lưu trữ ngoại tuyến và cục bộ: HTML5 cung cấp các API lưu trữ như localStorage và sessionStorage cho phép lưu trữ dữ liệu trên trình duyệt của người dùng, cũng như Application Cache giúp các ứng dụng web có thể hoạt động ngoại tuyến hoặc với kết nối internet chậm
Thẻ progress và meter: Các thẻ này cung cấp cách thức ngữ nghĩa để hiển thị tiến trình hoặc đo lường giá trị trong một phạm vi cụ thể
Hỗ trợ thiết kế đáp ứng: HTML5 hoạt động liền mạch với CSS3 để hỗ trợ thiết kế web đáp ứng, cho phép trang web tự động điều chỉnh giao diện phù hợp với kích thước màn hình và phương thức nhập liệu khác nhau của thiết bị
Cải tiến biểu mẫu: HTML5 giới thiệu các loại input mới và thuộc tính biểu mẫu như required, placeholder, autofocus, và pattern, giúp tạo ra các biểu mẫu tương tác và dễ sử dụng hơn
Web Workers: Cho phép thực thi script trong một luồng nền, giúp cải thiện hiệu suất của ứng dụng web mà không ảnh hưởng đến giao diện người dùng
WebSockets: Hỗ trợ giao tiếp thời gian thực giữa trình duyệt và máy chủ thông qua một kết nối duy trì
Drag and Drop: HTML5 bao gồm hỗ trợ tích hợp cho chức năng kéo và thả, giúp tạo ra giao diện người dùng tương tác và thân thiện hơn

Các tính năng này cùng với những cải tiến khác làm cho HTML5 trở thành một công cụ mạnh mẽ và không thể thiếu cho việc phát triển web hiện đại

Thuộc tính dir trong HTML dùng để làm gì?

Thuộc tính dir trong HTML là một thuộc tính toàn cục được sử dụng để chỉ định hướng văn bản của một phần tử. Thuộc tính này giúp xác định hướng viết của văn bản, đặc biệt hữu ích cho các ngôn ngữ được viết từ trái sang phải (LTR - Left to Right) hoặc từ phải sang trái (RTL - Right to Left). Thuộc tính dir có thể nhận các giá trị sau:

ltr: Chỉ định rằng văn bản được viết từ trái sang phải, thường được sử dụng cho các ngôn ngữ như tiếng Anh
rtl: Chỉ định rằng văn bản được viết từ phải sang trái, thường được sử dụng cho các ngôn ngữ như tiếng Ả Rập và tiếng Hebrew
auto: Cho phép trình duyệt tự quyết định hướng văn bản dựa trên nội dung bên trong phần tử. Trình duyệt sẽ phân tích các ký tự trong phần tử cho đến khi tìm thấy ký tự có hướng mạnh mẽ, sau đó áp dụng hướng đó cho toàn bộ phần tử

Sử dụng thuộc tính dir giúp đảm bảo rằng văn bản được hiển thị đúng cách theo hướng đọc tự nhiên của ngôn ngữ, cũng như hỗ trợ tốt hơn cho khả năng truy cập và tối ưu hóa cho công cụ tìm kiếm.

Ví dụ sử dụng thuộc tính dir:

html

<p dir="ltr">This text is written from left to right.</p>
<p dir="rtl">.هذا النص مكتوب من اليمين إلى اليسار</p>
<p dir="auto">This text direction will be determined automatically.</p>

Trong ví dụ trên, thuộc tính dir được sử dụng để chỉ định hướng văn bản cho mỗi đoạn văn. Điều này giúp văn bản hiển thị đúng hướng đọc dựa trên ngôn ngữ của nội dung

HTML Preprocessor là gì và bạn biết gì về nó?

Một HTML Preprocessor là một công cụ hoặc phần mềm được sử dụng để tạo mã HTML thông qua một ngôn ngữ hoặc cú pháp đặc biệt trước khi trang web được tải lên trình duyệt. Công cụ này cho phép các nhà phát triển viết mã theo một cách linh hoạt và mạnh mẽ hơn, thường bằng cách sử dụng các biến, hàm, và các cấu trúc điều khiển logic, sau đó "biên dịch" hoặc "xử lý" mã đó thành HTML thuần túy để trình duyệt có thể hiểu và hiển thị.

Các HTML Preprocessor giúp tối ưu hóa quy trình làm việc của nhà phát triển bằng cách cung cấp các tính năng như:

Tái sử dụng mã: Cho phép sử dụng lại các phần mã như header, footer, hoặc các thành phần UI khác trên nhiều trang, giảm thiểu sự trùng lặp và tăng tính nhất quán.
Sử dụng biến và hàm: Cho phép định nghĩa biến và hàm, giúp quản lý và cập nhật dễ dàng các giá trị hoặc logic được sử dụng thường xuyên trên trang web.
Cấu trúc điều khiển logic: Hỗ trợ các cấu trúc điều khiển như vòng lặp và điều kiện, giúp tạo ra mã HTML động dựa trên các điều kiện cụ thể.

Một số HTML Preprocessor phổ biến bao gồm:

Pug (trước đây là Jade): Một HTML Preprocessor dựa trên JavaScript, cung cấp cú pháp ngắn gọn và mạnh mẽ để viết HTML.
Haml: Một HTML Preprocessor chủ yếu được sử dụng trong các ứng dụng Ruby on Rails, cung cấp một cú pháp rõ ràng và sạch sẽ để viết HTML.
Slim: Tương tự như Haml, Slim cung cấp một cú pháp tối giản để viết HTML, chủ yếu được sử dụng trong Ruby on Rails.

Sử dụng HTML Preprocessor có thể giúp tăng tốc độ phát triển và cải thiện khả năng bảo trì của mã nguồn, nhưng cũng đòi hỏi một quá trình học tập để làm quen với cú pháp và công cụ mới.

Liệt kê các cách để định nghĩa 1 màu trong HTML?

Trong HTML, có nhiều cách để định nghĩa một màu sắc cho các phần tử trên trang web. Dưới đây là các phương pháp phổ biến:

1. Sử dụng Tên Màu

Bạn có thể sử dụng một trong số 140 tên màu chuẩn được HTML hỗ trợ để định nghĩa màu sắc

Ví dụ:

html

<p style="color:Tomato;">Đây là một đoạn văn màu cà chua.</p>

2. Sử dụng Mã Màu HEX

Mã màu HEX bao gồm một ký tự hash (#) theo sau là sáu ký tự hexa (từ 00 đến FF) đại diện cho mức độ của màu đỏ, xanh lá, và xanh dương

Ví dụ:

html

<p style="color:#FF6347;">Đây là một đoạn văn màu hồng.</p>

3. Sử dụng Giá Trị RGB

Giá trị RGB được định nghĩa bằng cách sử dụng hàm rgb(), với ba giá trị số từ 0 đến 255 đại diện cho mức độ của màu đỏ, xanh lá, và xanh dương

Ví dụ:

html

<p style="color:rgb(255,99,71);">Đây là một đoạn văn màu hồng.</p>

4. Sử dụng Giá Trị RGBA

Giá trị RGBA tương tự như RGB nhưng thêm một giá trị alpha (độ trong suốt) từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt)

Ví dụ:

html

<p style="color:rgba(255,99,71,0.5);">Đây là một đoạn văn màu hồng với độ trong suốt.</p>

5. Sử dụng Giá Trị HSL

Giá trị HSL định nghĩa màu sắc thông qua hue (sắc độ), saturation (độ bão hòa), và lightness (độ sáng)

Ví dụ:

html

<p style="color:hsl(9, 100%, 64%);">Đây là một đoạn văn màu hồng.</p>

6. Sử dụng Giá Trị HSLA

Giá trị HSLA tương tự như HSL nhưng thêm một giá trị alpha (độ trong suốt)

Ví dụ:

html

<p style="color:hsla(9, 100%, 64%, 0.5);">Đây là một đoạn văn màu hồng với độ trong suốt.</p>

Mỗi phương pháp có những ưu điểm riêng và việc lựa chọn sử dụng phụ thuộc vào yêu cầu cụ thể của dự án và sở thích cá nhân của nhà phát triển.

DOM là gì?

DOM trong ngữ cảnh của phát triển web là viết tắt của Document Object Model. Đây là một giao diện lập trình ứng dụng (API) đa nền tảng và độc lập với ngôn ngữ lập trình, cho phép các tài liệu HTML hoặc XML được xem như một cấu trúc cây, trong đó mỗi nút của cây đại diện cho một phần của tài liệu

Đặc Điểm của DOM:

Cấu trúc cây: DOM mô tả tài liệu dưới dạng một cấu trúc cây, với mỗi phần tử, thuộc tính, và nội dung văn bản được biểu diễn như là một nút (node) trong cây
Tương tác: DOM cho phép các ngôn ngữ lập trình như JavaScript tương tác với tài liệu, cho phép thay đổi cấu trúc, kiểu dáng và nội dung của tài liệu một cách động
Độc lập với ngôn ngữ: Mặc dù DOM thường được sử dụng với JavaScript, nó được thiết kế để độc lập với bất kỳ ngôn ngữ lập trình cụ thể nào và có thể được triển khai cho bất kỳ ngôn ngữ nào

DOM không phải là một phần của ngôn ngữ JavaScript; nó là một Web API được sử dụng để xây dựng các trang web. JavaScript thường được sử dụng để tương tác với DOM và thực hiện các thao tác như thêm, xóa hoặc sửa đổi các phần tử HTML, lắng nghe và xử lý sự kiện, và thay đổi CSS của các phần tử

Sự khác biệt giữa dislay: none và visibility: hidden trong HTML là gì?

Trong HTML và CSS, display: none và visibility: hidden là hai cách để ẩn một phần tử, nhưng chúng có những ảnh hưởng khác nhau đến bố cục (layout) của trang:

`display: none`

Khi sử dụng display: none, phần tử sẽ bị ẩn hoàn toàn và không chiếm không gian nào trên trang. Điều này có nghĩa là phần tử sẽ không hiển thị và không gian mà nó lẽ ra chiếm giữ sẽ được các phần tử khác lấp đầy
display: none loại bỏ phần tử khỏi luồng bố cục, làm cho trang web hoạt động như thể phần tử đó không tồn tại.
Thay đổi giữa display: none và display: block (hoặc giá trị display khác) không cho phép sử dụng CSS transitions, vì việc này không tạo ra một sự thay đổi có thể chuyển đổi được

`visibility: hidden`

Khi sử dụng visibility: hidden, phần tử sẽ bị ẩn nhưng vẫn chiếm không gian trên trang như thường lệ
Phần tử không hiển thị cho người dùng, nhưng không gian mà nó chiếm giữ không bị các phần tử khác lấp đầy.
Thay đổi giữa visibility: hidden và visibility: visible cho phép sử dụng CSS transitions, vì đây là một sự thay đổi thuộc tính có thể chuyển đổi được

Khi nào sử dụng?

Sử dụng display: none khi bạn muốn loại bỏ một phần tử khỏi bố cục và không muốn nó chiếm không gian trên trang.
Sử dụng visibility: hidden khi bạn muốn giữ không gian của phần tử trên trang nhưng không muốn nó hiển thị. Điều này hữu ích trong các trường hợp bạn muốn giữ khoảng cách và bố cục giữa các phần tử mà không hiển thị một số phần tử cụ thể.

Cả hai phương pháp đều có ứng dụng riêng tùy thuộc vào mục tiêu thiết kế và yêu cầu chức năng của trang web

Giải thích sự khác biệt giữa Cookie, Session Storage và Local Storage là gì?

Trong phát triển web, việc hiểu biết về Cookie, Session Storage, và Local Storage là rất quan trọng vì chúng cung cấp các phương thức khác nhau để lưu trữ dữ liệu trên phía client và giữa các phiên làm việc của người dùng. Dưới đây là sự khác biệt chính giữa ba cơ chế này:

Dung lượng lưu trữ: Giới hạn ở khoảng 4KB.
Thời gian tồn tại: Có thể được cấu hình thông qua thuộc tính Expires hoặc Max-Age. Cookies có thể là session cookies (bị xóa khi trình duyệt đóng) hoặc persistent cookies (tồn tại qua nhiều phiên làm việc).
Phạm vi truy cập: Có thể được truy cập từ cả phía client và server. Cookies được gửi đến server với mỗi yêu cầu HTTP, có thể ảnh hưởng đến hiệu suất do tăng lưu lượng dữ liệu truyền.
Mục đích sử dụng: Thường được sử dụng cho việc xác thực, lưu trữ tùy chọn người dùng, và theo dõi phiên làm việc

Local Storage

Dung lượng lưu trữ: Lên đến 5-10MB tùy theo trình duyệt.
Thời gian tồn tại: Dữ liệu không bị xóa khi trình duyệt đóng và không có hạn sử dụng mặc định.
Phạm vi truy cập: Chỉ có thể được truy cập từ phía client.
Mục đích sử dụng: Lưu trữ dữ liệu không nhạy cảm giữa các phiên làm việc của trình duyệt, như tùy chọn người dùng hoặc dữ liệu ứng dụng

Session Storage

Dung lượng lưu trữ: Lên đến 5MB tùy theo trình duyệt.
Thời gian tồn tại: Dữ liệu bị xóa khi tab hoặc cửa sổ trình duyệt đóng.
Phạm vi truy cập: Chỉ có thể được truy cập từ phía client và chỉ trong cùng một tab hoặc cửa sổ.
Mục đích sử dụng: Lưu trữ dữ liệu tạm thời cần thiết cho một phiên làm việc cụ thể, như dữ liệu biểu mẫu hoặc trạng thái ứng dụng

Khi nào sử dụng?

Sử dụng Cookie: Khi cần dữ liệu được truy cập từ cả phía server và client, hoặc cần kiểm soát thời gian tồn tại của dữ liệu.
Sử dụng Local Storage: Khi cần lưu trữ lượng lớn dữ liệu qua nhiều phiên làm việc mà không cần dữ liệu được gửi đến server.
Sử dụng Session Storage: Khi cần lưu trữ dữ liệu tạm thời cho một phiên làm việc cụ thể và dữ liệu không cần tồn tại sau khi tab đóng.

Mỗi cơ chế lưu trữ có ưu và nhược điểm riêng, việc lựa chọn sử dụng phụ thuộc vào yêu cầu cụ thể của ứng dụng web

HTML Entities là gì?

Trong HTML, HTML Entities (thực thể HTML) là một cách để biểu diễn các ký tự đặc biệt hoặc dành riêng mà không bị nhầm lẫn với các thẻ hoặc ký tự điều khiển của HTML. Các thực thể này thường được sử dụng để:

Hiển thị các ký tự mà nếu không sử dụng thực thể, trình duyệt có thể hiểu nhầm là một phần của cú pháp HTML, như dấu nhỏ hơn (<) hoặc dấu lớn hơn (>)
Hiển thị các ký tự không có trên bàn phím hoặc không dễ dàng nhập trực tiếp, như các biểu tượng toán học hoặc biểu tượng cảm xúc
Tránh việc trình duyệt tự động hợp nhất các khoảng trắng liên tiếp hoặc ngắt dòng không mong muốn

Các thực thể HTML được biểu diễn bằng cách sử dụng một trong hai cú pháp sau:

Dùng tên thực thể: &entity_name; (ví dụ: < cho dấu nhỏ hơn).
Dùng số thực thể: &#entity_number; (ví dụ: < cho dấu nhỏ hơn)

Một số thực thể HTML phổ biến bao gồm:

 : Khoảng trắng không bị ngắt (non-breaking space).
<: Dấu nhỏ hơn (<).
>: Dấu lớn hơn (>).
&: Dấu và (&).
": Dấu trích dẫn kép (").
': Dấu trích dẫn đơn (').
©: Ký tự bản quyền (©).
®: Ký tự đăng ký thương hiệu (®)

Lưu ý rằng tên thực thể có phân biệt chữ hoa và chữ thường, và không phải tất cả các trình duyệt đều hỗ trợ tất cả các tên thực thể

Công dụng của thẻ figure trong HTML5 là gì?

Thẻ <figure> trong HTML5 được sử dụng để đánh dấu nội dung tự chứa, thường là một hình ảnh, biểu đồ, hoặc bất kỳ đối tượng nào có liên quan đến nội dung chính nhưng có thể đứng độc lập và có thể được di chuyển sang một phần khác của tài liệu mà không ảnh hưởng đến dòng chảy chính của nội dung. Dưới đây là một số đặc điểm của thẻ <figure>:

Độc lập với Luồng Chính: Mặc dù nội dung của phần tử <figure> có liên quan đến luồng chính, nhưng vị trí của nó độc lập với luồng chính và nó có thể được di chuyển hoặc định vị lại mà không làm gián đoạn văn bản chính
Kết hợp với <figcaption>: Thẻ <figure> thường được sử dụng kết hợp với thẻ <figcaption> để cung cấp chú thích hoặc mô tả cho nội dung bên trong <figure>
Tăng Cường Ngữ Nghĩa: Sử dụng <figure> giúp tăng cường ngữ nghĩa của tài liệu HTML, làm cho nó dễ hiểu hơn đối với cả người dùng và công cụ tìm kiếm
Tính Linh Hoạt: Nội dung bên trong <figure> có thể bao gồm hình ảnh, biểu đồ, mã nguồn, hoặc các loại nội dung phong phú khác

Ví dụ sử dụng thẻ <figure>:

html

<figure>
  <img src="image.jpg" alt="Mô tả hình ảnh">
  <figcaption>Chú thích cho hình ảnh</figcaption>
</figure>

Trong ví dụ trên, một hình ảnh được bao bọc bởi thẻ <figure> và có một chú thích được cung cấp bởi thẻ <figcaption>. Điều này không chỉ giúp tổ chức nội dung một cách rõ ràng mà còn cung cấp thông tin bổ sung cho người đọc và công cụ tìm kiếm.

Trong HTML, làm sao để hỗ trợ đa ngôn ngữ?

Để hỗ trợ đa ngôn ngữ trong một trang web HTML, bạn có thể sử dụng một số phương pháp khác nhau. Dưới đây là một số cách tiếp cận:

Sử dụng thuộc tính lang:
- Bạn có thể đặt thuộc tính lang trong thẻ <html> để khai báo ngôn ngữ mặc định cho toàn bộ trang
- Thuộc tính lang cũng có thể được định nghĩa ở bất kỳ phần tử nào trong tài liệu, cho phép bạn chỉ định ngôn ngữ cụ thể cho các phần nội dung khác nhau
- Ví dụ:
  html
```
<html lang="en">
<body>
  <p>French "<span lang="fr">Bonjour</span>"</p>
  <p>Spanish "<span lang="es">Hola</span>"</p>
</body>
</html>
```
Tạo các phiên bản trang web riêng biệt cho mỗi ngôn ngữ:
- Bạn có thể tạo các phiên bản khác nhau của trang web, mỗi phiên bản sử dụng một ngôn ngữ khác nhau
- Điều này thường đòi hỏi việc duy trì nhiều tệp HTML và có thể sử dụng một công cụ chuyển đổi ngôn ngữ hoặc một menu dropdown để người dùng lựa chọn ngôn ngữ[2][4].
Sử dụng JavaScript hoặc thư viện bên thứ ba:
- Bạn có thể sử dụng JavaScript để thay đổi nội dung trang web dựa trên ngôn ngữ được chọn
- Có thể sử dụng các thư viện như i18next hoặc các API như Google Translate để tự động dịch nội dung
Sử dụng các tệp JSON hoặc XML để lưu trữ nội dung đa ngôn ngữ:
- Bạn có thể lưu trữ nội dung đa ngôn ngữ trong các tệp JSON hoặc XML và sử dụng JavaScript để tải và hiển thị nội dung phù hợp
Sử dụng các công cụ quản lý nội dung đa ngôn ngữ (CMS):
- Các hệ thống quản lý nội dung như WordPress hoặc Drupal cung cấp các plugin hoặc mô-đun để hỗ trợ đa ngôn ngữ
Sử dụng các tiêu chuẩn mã hóa ký tự quốc tế:
- Đảm bảo rằng trang web của bạn sử dụng mã hóa UTF-8 để hỗ trợ các ký tự từ nhiều ngôn ngữ khác nhau

Khi triển khai hỗ trợ đa ngôn ngữ, quan trọng là phải cân nhắc về khả năng truy cập, SEO và việc duy trì nội dung. Đảm bảo rằng ngôn ngữ có thể dễ dàng chuyển đổi và nội dung được cập nhật đồng bộ trên tất cả các phiên bản ngôn ngữ của trang web.

Có bao nhiêu cách để hiển thị phần tử HTML?

Trong HTML và CSS, có nhiều cách để hiển thị phần tử HTML, bao gồm sử dụng các thuộc tính như display, visibility, và cách sử dụng CSS để kiểm soát bố cục trang web. Dưới đây là một số cách phổ biến:

Thuộc tính display: Là một trong những thuộc tính quan trọng nhất trong CSS, được sử dụng để kiểm soát cách một phần tử được hiển thị trên trang web. Các giá trị của display bao gồm:
- block: Phần tử sẽ hiển thị dưới dạng khối, chiếm toàn bộ chiều rộng có sẵn.
- inline: Phần tử sẽ hiển thị trên cùng một dòng với nội dung xung quanh nó.
- inline-block: Kết hợp giữa inline và block, phần tử sẽ hiển thị trên cùng một dòng nhưng vẫn có thể thiết lập chiều rộng và chiều cao.
- none: Ẩn phần tử và không chiếm không gian trên trang.
- flex, grid: Cho phép tạo bố cục linh hoạt và lưới.
Thuộc tính visibility: Được sử dụng để kiểm soát việc một phần tử có được hiển thị hay không mà không ảnh hưởng đến bố cục trang. Các giá trị của visibility bao gồm:
- visible: Phần tử được hiển thị (mặc định).
- hidden: Phần tử bị ẩn nhưng vẫn chiếm không gian trên trang.
- collapse: Đặc biệt dùng cho các phần tử bảng, giống như hidden nhưng không chiếm không gian.
Sử dụng CSS để kiểm soát bố cục: Bên cạnh việc sử dụng display và visibility, bạn cũng có thể sử dụng các thuộc tính CSS khác như position, float, clear, flexbox, và grid để kiểm soát cách thức hiển thị và bố trí các phần tử trên trang web
Sử dụng JavaScript: JavaScript cũng có thể được sử dụng để thay đổi cách thức hiển thị của các phần tử bằng cách thay đổi thuộc tính style của chúng.

Lựa chọn phương pháp phù hợp phụ thuộc vào yêu cầu cụ thể của trang web và bố cục bạn muốn đạt được. Việc kết hợp linh hoạt giữa các phương pháp này sẽ giúp bạn tạo ra các trang web đẹp mắt và tương tác tốt với người dùng.

Các khối xây dựng (building blocks) của HTML5 là gì?

Các khối xây dựng cơ bản của HTML5, xem xét như một nền tảng web mở, bao gồm các yếu tố sau:

Ngữ nghĩa (Semantics): Cho phép bạn mô tả nội dung của bạn một cách chính xác hơn. HTML5 giới thiệu các thẻ ngữ nghĩa mới như <article>, <section>, <nav>, <header>, <footer>, và <aside> để cải thiện cấu trúc của tài liệu và giúp nội dung dễ hiểu hơn đối với cả người và máy.
Kết nối (Connectivity): Cho phép bạn giao tiếp với máy chủ theo những cách mới và sáng tạo thông qua các API như WebSocket và Server-Sent Events.
Ngoại tuyến và lưu trữ (Offline and Storage): Cho phép các trang web lưu trữ dữ liệu trên phía máy khách một cách cục bộ và hoạt động ngoại tuyến một cách hiệu quả hơn thông qua Web Storage, IndexedDB, và Application Cache.
Đa phương tiện (Multimedia): Biến video và âm thanh trở thành công dân hạng nhất trên Web Mở với sự hỗ trợ của các thẻ <video> và <audio>.
Đồ họa 2D/3D và hiệu ứng (2D/3D Graphics and Effects): Cho phép một loạt các tùy chọn trình bày đa dạng hơn thông qua Canvas, WebGL, và CSS3.
Hiệu suất và tích hợp (Performance and Integration): Cung cấp tối ưu hóa tốc độ lớn hơn và sử dụng tốt hơn phần cứng máy tính.
Truy cập thiết bị (Device Access): Cho phép sử dụng các thiết bị nhập và xuất đa dạng.
Styling: Cho phép các tác giả viết các chủ đề phong cách phức tạp hơn.

Ngoài ra, HTML5 cũng hỗ trợ các thuộc tính mới như data-* để lưu trữ dữ liệu tùy chỉnh, cũng như các API mạnh mẽ như Drag and Drop, File API, và nhiều hơn nữa. Các khối xây dựng này làm cho HTML5 trở thành một nền tảng mạnh mẽ cho việc phát triển web hiện đại, cho phép tạo ra các trang web tương tác, đa phương tiện, và dễ sử dụng trên nhiều thiết bị và trình duyệt.

Thẻ tự đóng (self closing tag) trong HTML là gì?

Trong HTML, một thẻ tự đóng (self-closing tag), còn được gọi là void element, là một phần tử không chứa nội dung và do đó không cần một thẻ đóng. Các thẻ này chỉ bao gồm một thẻ mở và được sử dụng để biểu diễn các phần tử không chứa bất kỳ nội dung nào, như hình ảnh, ngắt dòng, hoặc liên kết tài nguyên

Các thẻ tự đóng trong HTML bao gồm các thẻ như <img>, <br>, <input>, và <meta>. Trong HTML5, việc thêm một dấu gạch chéo (/) trước dấu đóng ngoặc của thẻ mở (ví dụ: <br /> hoặc <img src="image.jpg" />) là tùy chọn và không cần thiết, nhưng nó thường được thêm vào để tăng tính tương thích với XHTML hoặc để làm cho mã nguồn dễ đọc hơn

Tuy nhiên, trong XHTML, việc sử dụng dấu gạch chéo trước dấu đóng ngoặc là bắt buộc cho các thẻ tự đóng để đảm bảo mã nguồn tuân thủ cú pháp XML. Trong khi đó, trong HTML thuần túy, các trình duyệt web sẽ phân tích cú pháp các thẻ tự đóng mà không cần dấu gạch chéo, và việc thêm dấu gạch chéo không ảnh hưởng đến cách trình duyệt hiển thị nội dung

Mặc dù việc sử dụng dấu gạch chéo trong các thẻ tự đóng có thể không cần thiết trong HTML5, nó vẫn được nhiều nhà phát triển sử dụng như một thói quen tốt để tăng tính rõ ràng và tương thích với các chuẩn web khác nhau

Sự khác nhau giữa một phần tử inline và một phần tử block trong HTML là gì?

Trong HTML, phần tử inline và phần tử block có những đặc điểm hiển thị khác nhau:

Phần tử `block`

Bắt đầu trên một dòng mới: Phần tử block luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, kéo dài từ lề trái đến lề phải
Khoảng cách tự động: Trình duyệt thường tự động thêm một khoảng cách (margin) trước và sau phần tử block
Ví dụ: Các phần tử block phổ biến bao gồm <div>, <p>, <h1> đến <h6>, <ul>, <ol>, <li>, <section>, và <article>

Phần tử `inline`

Không bắt đầu trên dòng mới: Phần tử inline không bắt đầu trên một dòng mới. Nó chỉ chiếm đủ không gian cần thiết cho nội dung của nó
Không ảnh hưởng đến dòng chảy: Phần tử inline không làm gián đoạn dòng chảy của văn bản hoặc các phần tử khác và thường được sử dụng để định dạng một phần của văn bản
Ví dụ: Các phần tử inline phổ biến bao gồm <span>, <a>, <strong>, <em>, <img>, và <button>

Sự Khác Biệt Chính

Chiếm không gian: Phần tử block chiếm toàn bộ chiều rộng có sẵn, trong khi phần tử inline chỉ chiếm không gian cần thiết cho nội dung của nó
Khoảng cách: Phần tử block có khoảng cách trước và sau nó, còn phần tử inline thì không
Chứa phần tử khác: Một phần tử inline không thể chứa một phần tử block, nhưng phần tử block có thể chứa cả inline và block

Lựa chọn giữa sử dụng phần tử inline hay block phụ thuộc vào cách bạn muốn nội dung được hiển thị và dòng chảy của trang web. Các phần tử block thường được sử dụng để tạo cấu trúc chính của trang, trong khi các phần tử inline thường được sử dụng để định dạng và tạo kiểu cho văn bản hoặc nội dung nhỏ hơn bên trong các phần tử block.

Giải thích sự khác biệt giữa các thẻ block và các thẻ inline trong HTML?

Trong HTML, phần tử inline và phần tử block có những đặc điểm hiển thị khác nhau:

Phần tử `block`

Bắt đầu trên một dòng mới: Phần tử block luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, kéo dài từ lề trái đến lề phải
Khoảng cách tự động: Trình duyệt thường tự động thêm một khoảng cách (margin) trước và sau phần tử block
Ví dụ: Các phần tử block phổ biến bao gồm <div>, <p>, <h1> đến <h6>, <ul>, <ol>, <li>, <section>, và <article>

Phần tử `inline`

Không bắt đầu trên dòng mới: Phần tử inline không bắt đầu trên một dòng mới. Nó chỉ chiếm đủ không gian cần thiết cho nội dung của nó
Không ảnh hưởng đến dòng chảy: Phần tử inline không làm gián đoạn dòng chảy của văn bản hoặc các phần tử khác và thường được sử dụng để định dạng một phần của văn bản
Ví dụ: Các phần tử inline phổ biến bao gồm <span>, <a>, <strong>, <em>, <img>, và <button>

Sự Khác Biệt Chính

Chiếm không gian: Phần tử block chiếm toàn bộ chiều rộng có sẵn, trong khi phần tử inline chỉ chiếm không gian cần thiết cho nội dung của nó
Khoảng cách: Phần tử block có khoảng cách trước và sau nó, còn phần tử inline thì không
Chứa phần tử khác: Một phần tử inline không thể chứa một phần tử block, nhưng phần tử block có thể chứa cả inline và block

Sự khác nhau giữa thẻ <strong> và <b>, thẻ <em> và <i> trong HTML là gì?

Trong HTML, thẻ <strong> và thẻ <b>, cũng như thẻ <em> và thẻ <i>, đều có thể làm cho văn bản hiển thị đậm hoặc nghiêng. Tuy nhiên, chúng khác nhau về ý nghĩa ngữ nghĩa (semantic meaning) và mục đích sử dụng

Thẻ `<strong>` và `<b>`

<strong>: Được sử dụng để chỉ ra rằng một phần văn bản có tầm quan trọng đặc biệt hoặc cần được nhấn mạnh. Thẻ này mang ý nghĩa ngữ nghĩa và thường được các công cụ đọc màn hình (screen readers) và công cụ tìm kiếm xem xét để xác định các phần văn bản quan trọng
<b>: Thường được sử dụng để làm cho văn bản hiển thị đậm mà không thêm ý nghĩa ngữ nghĩa nào. Nó chủ yếu dùng cho mục đích trình bày và không ảnh hưởng đến cách mà nội dung được hiểu hoặc xử lý bởi công cụ đọc màn hình hoặc công cụ tìm kiếm

Thẻ `<em>` và `<i>`

<em>: Được sử dụng để nhấn mạnh một phần văn bản, thường là để thay đổi ý nghĩa của câu hoặc để chỉ ra rằng một từ hoặc cụm từ cần được chú ý đặc biệt. Thẻ này cũng mang ý nghĩa ngữ nghĩa và có thể ảnh hưởng đến cách mà văn bản được đọc bởi công cụ đọc màn hình
<i>: Thường được sử dụng để hiển thị văn bản nghiêng cho các mục đích trình bày, như tên của tác phẩm nghệ thuật, thuật ngữ kỹ thuật, hoặc khi muốn chỉ ra rằng văn bản đó khác biệt với phần còn lại của nội dung mà không thêm ý nghĩa ngữ nghĩa nào

Tóm lại, <strong> và <em> nên được sử dụng khi bạn muốn nhấn mạnh ý nghĩa ngữ nghĩa của văn bản, trong khi <b> và <i> nên được sử dụng cho các mục đích trình bày không liên quan đến ý nghĩa ngữ nghĩa. Sử dụng đúng cách các thẻ này không chỉ giúp cải thiện khả năng truy cập mà còn giúp nội dung của bạn được hiểu một cách rõ ràng hơn.

Thẻ meta được dùng để làm gì trong HTML?

Trong HTML, thẻ meta được sử dụng để cung cấp thông tin siêu dữ liệu (metadata) về tài liệu HTML. Siêu dữ liệu này không hiển thị trực tiếp trên trình duyệt, nhưng có thể được trình duyệt và các công cụ tìm kiếm sử dụng để hiểu thêm về nội dung của trang web

Các Chức Năng Chính của Thẻ `meta`:

Xác Định Bộ Mã Hóa Ký Tự (Character Encoding):
html
```
<meta charset="UTF-8">
```
Thẻ trên xác định bộ mã hóa ký tự UTF-8 cho trang web, giúp hiển thị chính xác các ký tự đặc biệt hoặc tiếng nói khác nhau
Cung Cấp Thông Tin về Trang Web:
- Mô Tả (Description): Mô tả ngắn gọn nội dung của trang web, thường được sử dụng bởi các công cụ tìm kiếm trong kết quả tìm kiếm (SERPs).
  html
```
<meta name="description" content="Tìm hiểu về metadata trong HTML">
```
- Từ Khóa (Keywords): Định nghĩa các từ khóa liên quan đến nội dung trang web, giúp cải thiện SEO.
  html
```
<meta name="keywords" content="HTML, meta tag, metadata">
```
- Tác Giả (Author): Xác định tác giả của trang web.
  html
```
<meta name="author" content="Tên tác giả">
```
Hướng Dẫn Các Công Cụ Tìm Kiếm (Search Engine Directives):
- Robots: Hướng dẫn cho các công cụ tìm kiếm về việc lập chỉ mục hoặc theo dõi các liên kết trên trang.
  html
```
<meta name="robots" content="index, follow">
```
Viewport: Định nghĩa cách trang web được hiển thị trên các thiết bị di động, đặc biệt quan trọng cho thiết kế web đáp ứng (responsive design).
html
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
HTTP-Equiv: Cung cấp các chỉ thị tương đương với các tiêu đề HTTP, như làm mới trang hoặc kiểm soát bộ nhớ cache.
html
```
<meta http-equiv="refresh" content="30">
```

Thẻ meta phải được đặt bên trong phần tử <head> của tài liệu HTML. Việc sử dụng thẻ meta một cách hiệu quả có thể cải thiện khả năng hiển thị của trang web trên các công cụ tìm kiếm và góp phần vào việc tối ưu hóa SEO

Sự khác biệt giữa HTML và XHTML là gì?

HTML (Hypertext Markup Language) và XHTML (eXtensible Hypertext Markup Language) đều là các ngôn ngữ đánh dấu được sử dụng để tạo các trang web. Tuy nhiên, chúng có một số khác biệt quan trọng:

Cú pháp: XHTML kế thừa cú pháp của XML, nên nó yêu cầu cú pháp nghiêm ngặt hơn so với HTML. Trong XHTML, tất cả các phần tử và thuộc tính phải được viết thường, các thẻ phải được đóng đúng cách, và các phần tử phải được lồng đúng quy cách
Đóng thẻ: Trong XHTML, mọi thẻ đều phải được đóng, kể cả các thẻ tự đóng như <img> và <br>, thường được viết dưới dạng <img /> và <br /> để tuân thủ cú pháp XML
Phân biệt chữ hoa chữ thường: XHTML phân biệt chữ hoa chữ thường, điều này không có ở HTML. Điều này có nghĩa là trong XHTML, tên thẻ và thuộc tính phải được viết bằng chữ thường
Khai báo DOCTYPE: XHTML yêu cầu khai báo DOCTYPE để đảm bảo rằng trình duyệt xử lý tài liệu theo đúng chuẩn XHTML
Tính tương thích: XHTML được thiết kế để tương thích với các chuẩn web và có thể được xử lý bởi các công cụ XML. Điều này giúp tài liệu XHTML có thể được sử dụng trên nhiều nền tảng và thiết bị hơn
Lỗi cú pháp: Trình duyệt web có thể phục hồi từ các lỗi cú pháp trong HTML, nhưng sẽ không thể làm điều tương tự với XHTML. Nếu một tài liệu XHTML có lỗi cú pháp, trình duyệt có thể từ chối hiển thị nó hoàn toàn

Trong khi HTML là ngôn ngữ đánh dấu linh hoạt và được sử dụng rộng rãi, XHTML đòi hỏi sự chính xác và tuân thủ cú pháp nghiêm ngặt hơn. HTML5, phiên bản mới nhất của HTML, đã kết hợp nhiều tính năng của XHTML nhưng với cú pháp linh hoạt hơn, giúp nó trở thành chuẩn mực cho việc phát triển web hiện đại.

Thuộc tính defer và async trên thẻ script trong HTML là gì?

Thuộc tính defer và async trong thẻ <script> của HTML được sử dụng để kiểm soát cách thức và thời điểm mà các tệp JavaScript được tải và thực thi, đặc biệt là khi chúng được tham chiếu từ một nguồn bên ngoài thông qua thuộc tính src

Thuộc tính `defer`

Khi sử dụng thuộc tính defer, trình duyệt sẽ tải tệp JavaScript một cách song song với quá trình phân tích cú pháp HTML nhưng sẽ không thực thi script cho đến khi toàn bộ tài liệu HTML đã được phân tích cú pháp xong
Các script có thuộc tính defer sẽ được thực thi theo thứ tự mà chúng xuất hiện trong tài liệu, đảm bảo rằng các script phụ thuộc vào nhau sẽ chạy đúng trình tự

Thuộc tính `async`

Khi sử dụng thuộc tính async, tệp JavaScript sẽ được tải một cách độc lập với quá trình phân tích cú pháp HTML và sẽ được thực thi ngay khi nó được tải xong, không đợi HTML phân tích cú pháp hoàn tất
Không giống như defer, async không đảm bảo thứ tự thực thi của các script. Điều này có nghĩa là các script có thể chạy không theo thứ tự, và điều này có thể gây ra vấn đề nếu một script phụ thuộc vào script khác

Sự Khác Biệt Chính

Thời điểm thực thi: defer đảm bảo rằng script sẽ chỉ chạy sau khi tài liệu HTML đã được phân tích cú pháp hoàn toàn, trong khi async cho phép script chạy ngay khi nó được tải xong, có thể là trước hoặc sau khi phân tích cú pháp HTML hoàn tất
Thứ tự thực thi: defer giữ nguyên thứ tự thực thi của các script như chúng xuất hiện trong tài liệu, còn async không đảm bảo thứ tự và các script có thể chạy theo thứ tự tùy ý

Cả hai thuộc tính này đều giúp cải thiện hiệu suất tải trang bằng cách giảm thời gian chờ đợi cho việc tải và thực thi script, nhưng chúng nên được sử dụng một cách cẩn thận để đảm bảo rằng các phụ thuộc giữa các script được xử lý đúng cách.

Thuộc tính target trong HTML để làm gì?

Thuộc tính target trong HTML được sử dụng để xác định cách mở tài liệu liên kết hoặc form khi người dùng thực hiện hành động click (hoặc tab nếu trên thiết bị điện thoại) lên một liên kết (<a>) hoặc gửi một form (<form>). Thuộc tính này cho phép bạn chỉ định nơi mà tài liệu liên kết sẽ được mở, có thể là trong cùng một cửa sổ/tab hiện tại, một cửa sổ/tab mới, hoặc trong một iframe cụ thể

Các giá trị cơ bản của thuộc tính target bao gồm:

_blank: Mở tài liệu liên kết trong một cửa sổ hoặc tab mới
_self: Mở tài liệu liên kết trong cùng một khung nơi nó được click (mặc định)
_parent: Mở tài liệu liên kết trong khung cha của khung hiện tại. Nếu không có khung cha, hành vi giống như _self
_top: Mở tài liệu liên kết trong toàn bộ cửa sổ, bỏ qua tất cả các khung (frames) lồng nhau

Sử dụng thuộc tính target giúp tạo ra trải nghiệm người dùng tốt hơn bằng cách kiểm soát cách mở liên kết, đặc biệt hữu ích khi bạn muốn giữ người dùng trên trang web của mình trong khi cung cấp liên kết đến nội dung bên ngoài hoặc khi bạn muốn hiển thị nội dung trong một cửa sổ hoặc tab mới mà không làm mất đi nội dung hiện tại mà người dùng đang xem

Thẻ script được dùng ở đâu trong HTML?

Thẻ <script> trong HTML được sử dụng để định nghĩa mã JavaScript hoặc tham chiếu đến một tệp JavaScript bên ngoài mà bạn muốn chạy trên trang web của mình. Thẻ này có thể được đặt ở nhiều vị trí trong tài liệu HTML, nhưng thông thường nó được đặt trong hai vị trí chính:

Trong phần <head>: Đặt thẻ <script> trong phần <head> của tài liệu HTML sẽ khiến mã JavaScript được tải và thực thi trước khi nội dung trang được hiển thị. Điều này thường được sử dụng cho các script cấu hình hoặc khởi tạo mà không phụ thuộc vào các phần tử DOM
html
```
<head>
  <script src="path/to/script.js"></script>
</head>
```
Trước thẻ đóng </body>: Đặt thẻ <script> ngay trước thẻ đóng </body> giúp tối ưu hóa thời gian tải trang, vì các phần tử HTML sẽ được tải xong trước khi script bắt đầu thực thi. Điều này đặc biệt quan trọng cho các script tương tác với DOM hoặc khi bạn muốn đảm bảo rằng tất cả các phần tử HTML đã sẵn sàng trước khi JavaScript chạy
html
```
<body>
  
  <script src="path/to/script.js"></script>
</body>
```

Thẻ <script> cũng có các thuộc tính như async và defer để kiểm soát cách thức và thời điểm mà các tệp JavaScript được tải và thực thi. Sử dụng async khi bạn muốn tệp JavaScript được tải một cách độc lập với việc phân tích cú pháp HTML, và sử dụng defer khi bạn muốn chắc chắn rằng tệp JavaScript chỉ được tải sau khi HTML đã được phân tích cú pháp hoàn toàn nhưng trước khi sự kiện DOMContentLoaded được kích hoạt.

Thẻ optional trong HTML là gì?

Trong HTML, không có thẻ optional như một phần của tiêu chuẩn. Tuy nhiên, có một số thẻ và thuộc tính trong HTML được coi là "tùy chọn" dựa trên ngữ cảnh sử dụng hoặc dựa trên các phiên bản của HTML. Ví dụ, trong HTML5, một số thẻ đóng có thể được bỏ qua nếu các yêu cầu cụ thể về cấu trúc của tài liệu được thỏa mãn

Thẻ và Thuộc Tính "Tùy Chọn" trong HTML:

Thẻ Đóng Tùy Chọn: Trong một số phiên bản của HTML, thẻ đóng có thể được coi là tùy chọn cho một số phần tử. Ví dụ, trong HTML5, thẻ đóng cho các phần tử như <li>, <td>, <tr>, và <th> có thể được bỏ qua trong một số trường hợp cụ thể
Thẻ Khởi Đầu và Kết Thúc Tùy Chọn: Một số thẻ như <html>, <head>, và <body> có thể không cần thiết phải khai báo rõ ràng trong một số trường hợp. Trình duyệt có thể tự động suy luận sự hiện diện của chúng dựa trên cấu trúc của tài liệu
Thuộc Tính Tùy Chọn: Một số thuộc tính trong các thẻ HTML có thể không bắt buộc. Ví dụ, thuộc tính type trong thẻ <script> khi sử dụng JavaScript là tùy chọn trong HTML5 vì text/javascript là kiểu mặc định

Lưu Ý:

Việc bỏ qua một số thẻ đóng hoặc không sử dụng một số thẻ khởi đầu có thể làm cho mã nguồn trở nên gọn gàng hơn nhưng cũng có thể gây ra nhầm lẫn hoặc khó đọc cho người khác, đặc biệt là khi làm việc trong một nhóm lớn hoặc khi mã nguồn được chia sẻ rộng rãi
Mặc dù một số thẻ và thuộc tính có thể được coi là tùy chọn, nhưng việc tuân thủ các tiêu chuẩn và sử dụng thẻ đóng đúng cách giúp đảm bảo tính tương thích và dễ bảo trì của mã nguồn

Trong thực tế, việc quyết định sử dụng thẻ và thuộc tính "tùy chọn" nên dựa trên mục tiêu cụ thể của dự án, yêu cầu về tính tương thích trình duyệt, và tiêu chuẩn lập trình của nhóm phát triển.

Accessibility và ARIA role có ý nghĩa gì trong HTML?

Trong HTML, Accessibility (Khả năng tiếp cận) là việc đảm bảo rằng các trang web và ứng dụng web có thể được sử dụng bởi mọi người, bao gồm cả những người có khuyết tật. Điều này bao gồm việc tạo ra các trang web có thể dễ dàng tương tác với các công nghệ hỗ trợ như trình đọc màn hình, bàn phím chỉ, và các thiết bị đầu vào khác. Một phần quan trọng của việc tạo ra trang web có khả năng tiếp cận là sử dụng semantic HTML, tức là sử dụng các thẻ HTML đúng cách theo mục đích của chúng, như <button> cho nút bấm thay vì sử dụng <div> hoặc <span>

ARIA (Accessible Rich Internet Applications) là một bộ các thuộc tính đặc biệt có thể được thêm vào HTML để cải thiện khả năng tiếp cận, đặc biệt là cho các ứng dụng web phức tạp và các phần tử giao diện người dùng tương tác. ARIA giúp mô tả rõ ràng hơn về các phần tử và trạng thái của chúng cho các công nghệ hỗ trợ, qua đó giúp người dùng khuyết tật có thể hiểu và tương tác với nội dung một cách hiệu quả hơn. Ví dụ, thuộc tính role có thể được sử dụng để chỉ định rõ ràng vai trò của một phần tử, như role="button" cho biết một phần tử nên được coi như một nút bấm

Tuy nhiên, quan trọng là phải sử dụng ARIA một cách cẩn thận. Các nguyên tắc cơ bản bao gồm việc ưu tiên sử dụng các thẻ HTML ngữ nghĩa khi có thể, và chỉ sử dụng ARIA khi không có thẻ HTML nào phù hợp với mục đích. Điều này giúp đảm bảo rằng các trang web không chỉ tiếp cận được với người dùng khuyết tật mà còn duy trì tính tương thích và dễ sử dụng cho tất cả mọi người.

Các kiểu input mới trong HTML5 trong form là gì?

Date - Chọn ngày bằng cách dùng type="date"
Week - Chọn tuần bằng cách dùng type="week"
Time - Chọn thời gian bằng cách dùng type="time"
Month - Chọn tháng bằng cách dùng type="month"
Datetime - Kết hợp ngày và thời gian dùng type="datetime"
Datetime-local - Kết hợp ngày và thời gian và chặn timezone,dùng type="datetime"
Color - Chấp nhận nhiều màu dùng type="color"
Email - Chấp nhận một hay nhiều email dùng type="email"
Number - Chấp nhận một giá trị số với các kiểm tra bổ sung như min và max, sử dụng type="number"
Search - Cho phép truy vấn tìm kiếm văn bản dùng type="search"
Tel - Cho phép các số điện thoại khác nhau dùng type="tel"
Placeholder - Để hiển thị một gợi ý ngắn trước khi nhập giá trị bằng cách sử dụng type="placeholder"
Range - Chấp nhận giá trị số trong một phạm vi cụ thể dùng type="range"
Url - Chập nhận địa chỉ trang web dùng type="url"

html

<form>  
    <div>
        <label>Date:</label>
        <input type="date" id="date" />
        <br>
        <label>Week:</label>
        <input type="week" id="week" />
        <br>
        <label>Month:</label>
        <input type="month" id="month" />
        <br>
        <label>Time:</label>
        <input type="time" id="time" />
        <br>
        <label>Datetime:</label>
        <input type="datetime" id="datetime" />
        <br>
        <label>Datetime Local:</label>
        <input type="datetime-local" id="datetime-local" />
        <br>
        <label>Color:</label>
        <input type="color" id="color"/>
        <br>
        <label>Email:</label>
        <input type="email" id="email" placeholder="email address" />
        <br>
        <label>Number:</label>
        <input type="number" id="number" />
        <br>
        <label>Search:</label>
        <input type="search" id="search" />
        <br>
        <label>Phone:</label>
        <input type="tel" id="phone" placeholder="Phone Number" pattern="\d{10}$" />
        <br>
        <label>Range:</label>
        <input type="range" id="range" />
        <br>
        <label>URL:</label>
        <input type="url" id="url"/>
    </div>  
</form>

Làm thế nào để set mode phù hợp với IE(Internet Explorer)?

Để thiết lập mode phù hợp với Internet Explorer (IE), bạn có thể sử dụng thẻ meta tag X-UA-Compatible hoặc thiết lập thông qua HTTP header. Dưới đây là cách thực hiện cho cả hai phương pháp:

Sử dụng thẻ meta tag `X-UA-Compatible`

Bạn có thể thêm một thẻ meta vào phần <head> của tài liệu HTML để chỉ định phiên bản IE mà trang web nên tương thích hoặc mô phỏng

Ví dụ:

html

<head>
  <!-- Hướng dẫn IE sử dụng phiên bản render mới nhất -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Trong ví dụ trên, content="IE=edge" chỉ định rằng IE nên sử dụng phiên bản render mới nhất có sẵn. Bạn cũng có thể chỉ định các phiên bản cụ thể như IE=9, IE=10, hoặc sử dụng IE=EmulateIE7 để mô phỏng IE7, tùy thuộc vào yêu cầu tương thích của trang web

Sử dụng HTTP header

Bạn cũng có thể thiết lập mode thông qua cấu hình máy chủ web để gửi HTTP header X-UA-Compatible cùng với phản hồi HTTP. Cách thực hiện này phụ thuộc vào loại máy chủ web bạn đang sử dụng (ví dụ: Apache, IIS, nginx, v.v.).

Ví dụ:

Đối với máy chủ IIS, bạn có thể thêm một custom HTTP header thông qua file web.config hoặc thông qua IIS Manager.

xml

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-UA-Compatible" value="IE=edge" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Trong ví dụ trên, header X-UA-Compatible được thiết lập với giá trị IE=edge để chỉ định cho IE sử dụng phiên bản render mới nhất

Lưu ý rằng việc sử dụng thẻ meta X-UA-Compatible hoặc HTTP header là không cần thiết nếu bạn đang sử dụng <!DOCTYPE html> (HTML5 doctype) và không có yêu cầu tương thích với các phiên bản cũ của IE. Các phiên bản mới hơn của IE và các trình duyệt hiện đại khác sẽ tự động sử dụng chế độ chuẩn dựa trên doctype

Sự khác biệt giữa thẻ <meter> và thẻ <process> trong HTML là gì?

Thẻ <meter> và thẻ <progress> trong HTML đều được sử dụng để hiển thị một loại thanh chỉ báo, nhưng chúng có mục đích sử dụng khác nhau:

Thẻ `<meter>`

Thẻ <meter> được sử dụng để biểu diễn một phép đo vô hướng trong một phạm vi đã biết, hoặc một giá trị phân số; ví dụ như việc sử dụng đĩa, mức độ liên quan của một truy vấn, hoặc mức độ đầy của pin
Thẻ này thường được sử dụng để hiển thị các thông số đo lường như dung lượng đĩa cứng sử dụng, mức độ tiêu thụ nhiên liệu của xe, hoặc bất kỳ chỉ số đo lường nào khác trong một phạm vi cụ thể

Thẻ `<progress>`

Thẻ <progress> được sử dụng để biểu diễn tiến trình hoàn thành của một nhiệm vụ. Nó thường được sử dụng để hiển thị tiến độ của một quá trình như tải lên tệp, tiến độ của một trò chơi, hoặc tiến độ hoàn thành một biểu mẫu trực tuyến
Thẻ này thường được sử dụng khi bạn muốn biểu diễn tiến độ của một tác vụ cụ thể, như tiến độ tải lên một tệp hoặc tiến độ của người dùng trong một quy trình nhiều bước

Sự khác biệt chính giữa hai thẻ này là <meter> được sử dụng để hiển thị một giá trị đo lường trong một phạm vi cố định, trong khi <progress> được sử dụng để biểu diễn tiến độ của một tác vụ hoặc quá trình đang diễn ra.

Bạn biết gì về DOCTYPE trong HTML?

Trong HTML, DOCTYPE là một khai báo (không phải là một thẻ HTML) đặt ở đầu tài liệu HTML để chỉ ra phiên bản HTML mà tài liệu đó sử dụng. Mục đích chính của DOCTYPE là để ngăn trình duyệt chuyển sang chế độ "quirks mode" khi hiển thị tài liệu, đảm bảo rằng trình duyệt cố gắng tuân thủ các tiêu chuẩn web hiện hành thay vì sử dụng một chế độ hiển thị không tương thích với một số tiêu chuẩn

Ví dụ về Khai Báo `DOCTYPE`:

HTML5:

html

<!DOCTYPE html>

Đây là khai báo DOCTYPE đơn giản và được khuyến khích sử dụng cho tất cả các tài liệu HTML5. Nó báo cho trình duyệt biết rằng tài liệu được viết theo tiêu chuẩn HTML5

HTML 4.01 và XHTML:
Trong các phiên bản HTML cũ hơn như HTML 4.01 hoặc XHTML, khai báo DOCTYPE có thể phức tạp hơn và thường bao gồm một tham chiếu đến một DTD (Document Type Definition) để xác định cấu trúc của tài liệu

Tại Sao `DOCTYPE` Lại Quan Trọng?

Tương thích Trình Duyệt: Khai báo DOCTYPE giúp đảm bảo rằng trang web của bạn hiển thị một cách nhất quán trên các trình duyệt khác nhau
Chế Độ Tiêu Chuẩn và Chế Độ Quirks: Nếu không có khai báo DOCTYPE, trình duyệt có thể chuyển sang chế độ quirks, trong đó các tiêu chuẩn web không được tuân thủ chặt chẽ, dẫn đến việc hiển thị không đúng của trang web
Xác Định Phiên Bản HTML: DOCTYPE giúp xác định phiên bản HTML được sử dụng, cho phép trình duyệt hiểu và xử lý tài liệu một cách chính xác

Khai báo DOCTYPE là bước đầu tiên và cần thiết trong mọi tài liệu HTML để đảm bảo tính tương thích và hiển thị đúng đắn của trang web trên các trình duyệt web

Bạn sẽ chọn sử dụng svg hay canvas cho trang web của mình? Tại sao?

SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML. Canvas vẽ đồ họa 2D một cách nhanh chóng (với JavaScript).

Sự khác biệt giữa SVG và Canvas sẽ hữu ích trong việc chọn đúng.

Canva

Phụ thuộc resolution
Không hỗ trợ các Event handler
Khả năng hiển thị văn bản kém
Bạn có thể lưu hình ảnh kết quả dưới dạng .png hoặc .jpg
Rất thích hợp cho các trò chơi đồ họa chuyên sâu

SVG

Resolution độc lập
Hỗ trợ các Event handler
Phù hợp nhất cho các ứng dụng có khu vực hiển thị lớn (Google Maps)
Render chậm nếu phức tạp (bất kỳ thứ gì sử dụng DOM nhiều sẽ chậm)
Không phù hợp với ứng dụng trò chơi

SVG	Canvas
SVG là dựa trên vector, để tạo hình dạng	Dựa trên Raster, tức là bao gồm pixel
Hoạt động tốt hơn với surface lớn	Hoạt động tốt hơn với surface nhỏ
Có thể chỉnh sửa với script và css	Chỉ có thể chỉnh sửa với script
Khả năng mở rộng cao. Có thể in ở độ phân giải cao.	Khả năng mở rộng thấp

Kết luận: SVG tốt hơn cho các ứng dụng và ứng dụng có ít item. Canvas tốt hơn cho hàng nghìn đối tượng và thao tác cẩn thận, nhưng cần nhiều mã hơn (hoặc một thư viện) để hoàn thiện nó.

Form là gì và cách tạo form trong HTML như thế nào?

Trong HTML, Form là một phần của tài liệu chứa các phần tử đặc biệt gọi là controls (như checkboxes, radio buttons, menus, v.v.), cùng với các nhãn (labels) cho những controls đó. Form thường được sử dụng để thu thập dữ liệu từ người dùng, sau đó dữ liệu này có thể được gửi đến một máy chủ web hoặc máy chủ thư để xử lý

Để tạo một form trong HTML, bạn sử dụng thẻ <form> và bên trong đó bạn có thể đặt các phần tử như <input>, <label>, <textarea>, <button>, <select>, và các phần tử khác để thu thập thông tin từ người dùng. Các phần tử này có thể bao gồm các trường nhập văn bản, vùng nhập văn bản đa dòng, checkboxes, dropdowns, và nhiều hơn nữa

Các thuộc tính quan trọng của thẻ <form> bao gồm:

action: Định nghĩa hành động sẽ được thực hiện khi form được gửi. Thông thường, giá trị của thuộc tính này là URL của máy chủ sẽ xử lý dữ liệu form
method: Xác định phương thức HTTP sẽ được sử dụng để gửi form, thường là GET hoặc POST

Ví dụ về cách tạo một form đơn giản:

html

<form action="http://somesite.com/prog/adduser" method="post">
  <label for="firstname">First name: </label>
  <input type="text" id="firstname" name="firstname" required><br>
  <label for="lastname">Last name: </label>
  <input type="text" id="lastname" name="lastname" required><br>
  <label for="email">Email: </label>
  <input type="email" id="email" name="email" required><br>
  <input type="submit" value="Submit">
</form>

Trong ví dụ trên, form bao gồm các trường để nhập tên, họ và email. Khi người dùng nhấn nút submit, dữ liệu form sẽ được gửi đến URL được chỉ định trong thuộc tính action của thẻ <form> sử dụng phương thức POST

Thuộc tính alt trong thẻ img để làm gì?

Thuộc tính alt trong thẻ img của HTML được sử dụng để cung cấp một văn bản thay thế (alternative text) cho hình ảnh. Văn bản thay thế này có một số mục đích quan trọng:

Trợ giúp cho người dùng khi hình ảnh không hiển thị: Nếu hình ảnh không thể tải được do lỗi đường dẫn, vấn đề kết nối, hoặc người dùng đã tắt hình ảnh trong trình duyệt, văn bản alt sẽ được hiển thị thay thế
Hỗ trợ người dùng có hạn chế về thị lực: Văn bản alt được đọc bởi các công cụ đọc màn hình, giúp người dùng khiếm thị hiểu được nội dung hoặc mục đích của hình ảnh
Cải thiện SEO (Tối ưu hóa công cụ tìm kiếm): Các công cụ tìm kiếm sử dụng văn bản alt để hiểu nội dung của hình ảnh, điều này giúp hình ảnh có thể được lập chỉ mục và xếp hạng tốt hơn trong kết quả tìm kiếm hình ảnh
Tăng cường khả năng truy cập (Accessibility): Văn bản alt giúp trang web tuân thủ các nguyên tắc về khả năng truy cập web, đảm bảo rằng nội dung có thể được truy cập bởi tất cả mọi người, bất kể khả năng hoặc công nghệ họ sử dụng

Văn bản alt nên mô tả nội dung hoặc chức năng của hình ảnh một cách ngắn gọn và chính xác. Điều này không chỉ giúp người dùng hiểu được hình ảnh khi họ không thể nhìn thấy nó, mà còn giúp hình ảnh của bạn trở nên hữu ích hơn trong các tình huống khác nhau, như khi hình ảnh được sử dụng làm liên kết hoặc khi bạn muốn hình ảnh đóng góp vào thông điệp tổng thể của trang web

Mô tả ngắn gọn các thẻ sau header, article, section, footer trong HTML?

Trong HTML, các thẻ header, article, section, và footer đều là các phần tử ngữ nghĩa được giới thiệu trong HTML5. Chúng giúp cấu trúc nội dung trang web một cách rõ ràng và có ý nghĩa, cải thiện khả năng truy cập và tối ưu hóa cho công cụ tìm kiếm

Thẻ `header`

Thẻ header định nghĩa phần đầu của một tài liệu hoặc một phần (section), thường chứa thông tin giới thiệu như logo, menu điều hướng, hoặc tiêu đề trang

Thẻ `article`

Thẻ article định nghĩa một phần tử độc lập và tự chứa trong tài liệu, trang, hoặc trang web. Nó thường được sử dụng cho các bài viết trên blog, bài báo, bình luận người dùng, hoặc bất kỳ nội dung nào có thể tồn tại độc lập và có ý nghĩa riêng

Thẻ `section`

Thẻ section định nghĩa một phần trong tài liệu, thường là một nhóm nội dung có liên quan. section giúp tổ chức nội dung trang web thành các phần có ý nghĩa, như các chương hoặc các phần khác nhau của một trang

Thẻ `footer`

Thẻ footer định nghĩa phần cuối của một tài liệu hoặc một phần (section), thường chứa thông tin như bản quyền, thông tin liên hệ, hoặc liên kết đến các tài liệu liên quan

Sử dụng các thẻ này giúp tăng cường ngữ nghĩa của tài liệu HTML, làm cho nó dễ hiểu hơn đối với cả người dùng và công cụ tìm kiếm, cũng như hỗ trợ công nghệ hỗ trợ như trình đọc màn hình. Điều này cải thiện khả năng truy cập và SEO của trang web.

Hãy nêu những đặc điểm của thẻ meta trong HTML?

Thẻ meta trong HTML được sử dụng để cung cấp thông tin về trang web, thường được đặt trong phần <head> của tài liệu HTML. Dưới đây là một số đặc điểm chính của thẻ meta:

Thông tin Meta: Thẻ meta chứa thông tin metadata không hiển thị trực tiếp trên trang web nhưng có thể được các công cụ tìm kiếm và trình duyệt sử dụng để hiểu rõ hơn về nội dung của trang
SEO: Thẻ meta như meta description và meta keywords có thể ảnh hưởng đến cách trang web được hiển thị trong kết quả tìm kiếm và giúp cải thiện SEO
Thuộc tính name và content: Thẻ meta thường có hai thuộc tính chính là name, chỉ định tên của thông tin metadata, và content, chỉ định giá trị của thông tin đó
Thẻ meta quan trọng:
- meta charset: Xác định bảng mã ký tự của tài liệu, thường là UTF-8
- meta name="description": Mô tả nội dung của trang, thường được hiển thị dưới dạng mô tả ngắn trong kết quả tìm kiếm
- meta name="keywords": Chứa danh sách các từ khóa liên quan đến nội dung trang
- meta name="viewport": Kiểm soát cách trang web được hiển thị trên thiết bị di động, quan trọng cho thiết kế web đáp ứng (responsive design)
Không hiển thị trực tiếp: Thông tin trong thẻ meta không hiển thị trực tiếp trên trang web nhưng có thể được xem trong mã nguồn của trang
Tối ưu hóa CTR: Một meta description được viết tốt có thể tăng tỷ lệ nhấp chuột (CTR) từ kết quả tìm kiếm, do đó có thể ảnh hưởng gián tiếp đến thứ hạng trang web
Chỉ dẫn cho Trình duyệt và Công cụ tìm kiếm: Thẻ meta có thể chứa chỉ dẫn cho trình duyệt về cách hiển thị nội dung hoặc cho công cụ tìm kiếm về cách xử lý trang, như chỉ dẫn không lập chỉ mục trang hoặc không theo dõi liên kết

Thẻ meta là một phần quan trọng của tối ưu hóa trang web cho SEO và cung cấp thông tin cần thiết cho trình duyệt và công cụ tìm kiếm để hiểu và xử lý trang web một cách hiệu quả.

Trong HTML, thẻ Iframe là gì và nó hoạt động như thế nào?

Trong HTML, thẻ iframe (Inline Frame) là một phần tử được sử dụng để nhúng một trang web khác hoặc một tài liệu HTML khác vào bên trong một trang web hiện tại. Thẻ iframe tạo ra một khung (frame) trong đó có thể hiển thị nội dung từ một nguồn khác, và nó hoạt động như một cửa sổ hoặc một khung nhìn vào trang web hoặc tài liệu được nhúng

Cách sử dụng thẻ iframe cơ bản như sau:

html

<iframe src="url" width="width" height="height"></iframe>

Trong đó:

src là thuộc tính chỉ định URL của trang web hoặc tài liệu mà bạn muốn nhúng
width và height là các thuộc tính chỉ định chiều rộng và chiều cao của khung iframe, có thể được đặt bằng pixel hoặc phần trăm

iframe thường được sử dụng để nhúng các video từ YouTube, bản đồ từ Google Maps, hoặc các phần tử web khác như hộp chat và widget xã hội vào một trang web. Tuy nhiên, việc sử dụng iframe cũng có thể ảnh hưởng đến tốc độ tải trang và SEO, do đó cần cân nhắc khi sử dụng

Ngoài ra, iframe cũng có các thuộc tính khác như name, style, border, longdesc, và nhiều thuộc tính khác để tùy chỉnh cách hiển thị và hành vi của khung nhúng

Mục đích của thẻ base href là gì?

Thẻ <base> trong HTML được sử dụng để xác định URL cơ sở cho tất cả các URL tương đối trong một tài liệu. Điều này có nghĩa là, khi bạn đặt một URL cơ sở trong phần đầu (header) của một trang, tất cả các liên kết tương đối sau đó sẽ sử dụng URL này làm cơ sở. Thẻ <base> chỉ có thể tồn tại một lần trong một tài liệu và phải bao gồm một thuộc tính href, thuộc tính target, hoặc cả hai.

Thẻ <base> không chỉ liên quan trực tiếp đến việc cải thiện bảo mật web mà còn giúp chuẩn hóa và cải thiện bảo mật trong một số trường hợp nhất định. Ví dụ, nó giúp ngăn chặn các cuộc tấn công bằng cách thao túng URL, bảo vệ chống lại các nỗ lực clickjacking bằng cách đảm bảo tất cả các liên kết mở trong một tab hoặc cửa sổ mới, và giúp ngăn chặn các cuộc tấn công dựa trên việc điều hướng đường dẫn bằng cách hạn chế quyền truy cập tệp trong phạm vi URL cơ sở đã xác định.

Ngoài ra, thẻ <base> quan trọng trong việc tạo ra các đường dẫn chính xác, đặc biệt là khi bạn triển khai dự án của mình trong một thư mục con. Nó giúp bộ định tuyến Angular tạo ra các URL điều hướng chính xác bằng cách thông báo cho trình duyệt về nơi thực thi các tệp kịch bản và giúp bộ định tuyến tạo ra một URL điều hướng.

Tóm lại, thẻ <base> đóng một vai trò quan trọng trong việc quản lý các URL tương đối trong một tài liệu HTML, giúp cải thiện bảo mật web và đảm bảo tính nhất quán và chính xác của các đường dẫn trên trang web.

Sự khác biệt giữa thẻ img và thẻ figure trong HTML là gì?

Trong HTML, thẻ img và thẻ figure đều liên quan đến việc hiển thị hình ảnh, nhưng chúng có mục đích và cách sử dụng khác nhau:

Thẻ `img`

Thẻ img được sử dụng để nhúng một hình ảnh vào tài liệu HTML. Nó là một phần tử tự đóng và không chứa nội dung con. Thẻ img yêu cầu thuộc tính src để chỉ định đường dẫn của hình ảnh cần hiển thị và thường có thuộc tính alt để mô tả nội dung của hình ảnh cho trường hợp hình ảnh không thể hiển thị hoặc cho người dùng sử dụng trình đọc màn hình.

Ví dụ:

html

<img src="image.jpg" alt="Mô tả hình ảnh">

Thẻ `figure`

Thẻ figure được sử dụng để biểu diễn một thành phần độc lập trong tài liệu, thường là một hình ảnh, biểu đồ, mã nguồn, hoặc bất kỳ nội dung nào khác, kèm theo một chú thích (figcaption) để giải thích hoặc nhận xét về nội dung đó. figure có thể chứa một hoặc nhiều hình ảnh, và chú thích của nó được định nghĩa bởi thẻ figcaption, giúp làm rõ ý nghĩa hoặc ngữ cảnh của hình ảnh hoặc nội dung được chứa bên trong.

Ví dụ:

html

<figure>
  <img src="image.jpg" alt="Mô tả hình ảnh">
  <figcaption>Chú thích cho hình ảnh</figcaption>
</figure>

Sự khác biệt chính giữa img và figure là img chỉ dùng để nhúng hình ảnh vào tài liệu mà không cung cấp thêm ngữ cảnh hoặc chú thích, trong khi figure được sử dụng để định nghĩa một phần tử độc lập có thể chứa hình ảnh và chú thích, làm cho nội dung trở nên rõ ràng và có ý nghĩa hơn.

Mô tả ngắn gọn cách sử dụng đúng các phần tử ngữ nghĩa HTML5 sau: <header>, <article>, <section>, <footer>?

<header>: Phần tử <header> định nghĩa một phần đầu (header) cho tài liệu hoặc một phần. Nó thường chứa thông tin giới thiệu như logo, liên kết điều hướng, và thông tin tác giả. <header> có thể được sử dụng ở đầu của một tài liệu, một phần (<section>), hoặc một bài viết (<article>).
<article>: Phần tử <article> định nghĩa một nội dung độc lập, tự chứa, có thể tồn tại độc lập khỏi phần còn lại của tài liệu. Ví dụ về nơi sử dụng <article> bao gồm bài đăng trên diễn đàn, bài viết trên blog, hoặc bài báo trên báo chí. Một <article> nên có ý nghĩa khi được đọc độc lập từ phần còn lại của trang web.
<section>: Phần tử <section> định nghĩa một phần trong tài liệu với một nhóm nội dung có chủ đề liên quan. Mỗi <section> nên có tiêu đề của riêng mình và được sử dụng để nhóm các phần nội dung có liên quan. Ví dụ, một trang chủ có thể được chia thành các <section> cho giới thiệu, nội dung chính, và thông tin liên hệ.
<footer>: Phần tử <footer> định nghĩa một phần chân trang (footer) cho tài liệu hoặc một phần. Nó thường chứa thông tin như thông tin tác giả, bản quyền, liên kết đến điều khoản sử dụng, thông tin liên hệ, và các liên kết liên quan khác. Một <footer> có thể được sử dụng ở cuối của một tài liệu, một phần (<section>), hoặc một bài viết (<article>).

Các phần tử ngữ nghĩa HTML5 như <header>, <article>, <section>, và <footer> giúp tạo ra cấu trúc rõ ràng và có ý nghĩa cho tài liệu web, làm cho nó dễ đọc và hiểu hơn đối với cả người dùng và các công cụ tìm kiếm, đồng thời cải thiện khả năng truy cập và SEO.

Giải thích 3 mode almost standard, full standard và quirks trong HTML là gì?

Trong quá trình phát triển web, các trình duyệt web đã giới thiệu ba chế độ để xử lý các trang web tuân thủ chuẩn mới khác với các trang web cũ: quirks mode, limited-quirks mode (còn gọi là almost standards mode), và no-quirks mode (còn gọi là full standards mode)

Quirks Mode (Chế độ tương thích):
- Trong quirks mode, trình duyệt sẽ mô phỏng hành vi của các trình duyệt cũ như Netscape Navigator 4 và Internet Explorer 5
- Chế độ này hỗ trợ các trang web được xây dựng trước khi chuẩn web được áp dụng rộng rãi
- Các trang web sẽ được hiển thị theo cách mà các trình duyệt cũ thường xử lý, có thể không tuân thủ chuẩn hiện đại
Limited-Quirks Mode (Chế độ gần như chuẩn):
- Limited-quirks mode chỉ triển khai một số ít hành vi quirks
- Chế độ này gần giống với full standards mode nhưng có một số ngoại lệ, chẳng hạn như cách xử lý chiều cao của các ô trong bảng
No-Quirks Mode (Chế độ chuẩn đầy đủ):
- Trong no-quirks mode, hành vi của trình duyệt sẽ tuân thủ theo các chuẩn HTML và CSS hiện đại
- Đây là chế độ mong muốn để xây dựng các trang web mới và tuân thủ chuẩn

Cách trình duyệt xác định chế độ nào sẽ được sử dụng phụ thuộc vào khai báo DOCTYPE ở đầu tài liệu HTML. Để đảm bảo rằng trang của bạn sử dụng full standards mode, hãy chắc chắn rằng trang của bạn có một DOCTYPE như trong ví dụ sau:

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
</head>
<body></body>
</html>

DOCTYPE được hiển thị trong ví dụ trên, <!DOCTYPE html>, là DOCTYPE đơn giản nhất và được khuyến nghị bởi các chuẩn HTML hiện tại. Tất cả các trình duyệt hiện đại ngày nay sẽ sử dụng full standards mode cho DOCTYPE này, kể cả Internet Explorer phiên bản cũ. Không có lý do chính đáng nào để sử dụng một DOCTYPE phức tạp hơn.

Image Map trong HTML là gì?

Trong HTML, Image Map là một hình ảnh có các khu vực có thể nhấp vào được. Các khu vực này được định nghĩa bằng một hoặc nhiều thẻ <area>. Mục đích của Image Map là cho phép bạn tạo ra các liên kết siêu văn bản trên các khu vực hình học khác nhau trên một hình ảnh, mà không cần phải chia nhỏ hình ảnh đó. Điều này có thể được sử dụng để tạo các giao diện người dùng tương tác, như bản đồ có các khu vực nhấp vào để hiển thị thông tin, hoặc hình ảnh có nhiều đối tượng mà mỗi đối tượng dẫn đến một liên kết khác nhau.

Để tạo một Image Map, bạn cần một hình ảnh và một số mã HTML mô tả các khu vực có thể nhấp vào. Bạn sẽ sử dụng thẻ <map> để định nghĩa Image Map và liên kết nó với hình ảnh bằng cách sử dụng thuộc tính usemap trong thẻ <img>

Ví dụ về cách sử dụng Image Map:

html

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Trong ví dụ trên, hình ảnh workplace.jpg có ba khu vực có thể nhấp vào được: một hình chữ nhật quanh máy tính, một hình chữ nhật quanh điện thoại, và một hình tròn quanh cốc cà phê. Khi người dùng nhấp vào mỗi khu vực, họ sẽ được chuyển đến trang web tương ứng được chỉ định trong thuộc tính href của mỗi thẻ <area>.

Image Map là một công cụ hữu ích để tạo các trang web tương tác và cung cấp thông tin một cách trực quan thông qua hình ảnh.

Làm thế nào để tạo khoá công khai (public key) trong HTML?

Để tạo một khóa công khai (public key) trong môi trường trình duyệt web, bạn có thể sử dụng Web Cryptography API, cụ thể là phương thức SubtleCrypto.generateKey() để tạo ra cặp khóa công khai và khóa riêng tư (private key), sau đó sử dụng SubtleCrypto.exportKey() để xuất khóa công khai. Đây là một API JavaScript hiện đại cho phép thực hiện các tác vụ mã hóa mà không cần dựa vào các thư viện bên thứ ba.

Dưới đây là một ví dụ về cách tạo và xuất một khóa công khai RSA sử dụng Web Cryptography API:

javascript

window.crypto.subtle.generateKey(
  {
    name: "RSA-OAEP",
    modulusLength: 2048, // Có thể là 1024, 2048 hoặc 4096
    publicExponent: new Uint8Array([1, 0, 1]), // Thông thường là 65537
    hash: {name: "SHA-256"}, // Có thể là "SHA-1", "SHA-256", "SHA-384", hoặc "SHA-512"
  },
  true, // Khóa có thể xuất được
  ["encrypt", "decrypt"] // Có thể sử dụng để mã hóa hoặc giải mã
)
.then((keyPair) => {
  // Xuất khóa công khai
  window.crypto.subtle.exportKey(
    "spki", // Định dạng khóa công khai
    keyPair.publicKey // Khóa công khai cần xuất
  )
  .then((exportedKey) => {
    // Chuyển đổi khóa sang dạng PEM
    const exportedAsString = new TextDecoder().decode(exportedKey);
    const exportedAsBase64 = window.btoa(exportedAsString);
    const pemExported = `-----BEGIN PUBLIC KEY-----\n${exportedAsBase64}\n-----END PUBLIC KEY-----`;

    // Hiển thị khóa công khai hoặc sử dụng nó theo cách bạn muốn
    console.log(pemExported);
  })
  .catch((error) => {
    console.error('Error exporting public key', error);
  });
})
.catch((error) => {
  console.error('Error generating key pair', error);
});

Lưu ý rằng Web Cryptography API chỉ hoạt động trong các ngữ cảnh an toàn (secure contexts), tức là trang web phải được phục vụ qua HTTPS. Điều này đảm bảo rằng các tác vụ mã hóa được thực hiện một cách an toàn và không bị nghe lén hoặc can thiệp.

Nếu bạn muốn tạo khóa công khai để sử dụng với SSH hoặc một mục đích khác không liên quan đến trình duyệt, bạn có thể sử dụng công cụ như OpenSSL hoặc các công cụ tương tự trên hệ điều hành của bạn

Việc sử dụng thuộc tính novalidate cho thẻ form trong HTML5 để làm gì?

Thuộc tính novalidate trong thẻ <form> của HTML5 được sử dụng để tắt việc kiểm tra hợp lệ (validation) mặc định của trình duyệt cho form khi nó được gửi đi (submit). Khi thuộc tính này được thêm vào một form, trình duyệt sẽ không thực hiện kiểm tra các yêu cầu về dữ liệu đầu vào như bắt buộc phải nhập (required), kiểm tra định dạng email, số, và các ràng buộc khác mà thường được áp dụng tự động bởi trình duyệt.

Sử dụng novalidate có thể hữu ích trong các trường hợp như:

Bạn muốn quản lý việc kiểm tra hợp lệ bằng JavaScript của riêng mình thay vì sử dụng kiểm tra hợp lệ mặc định của trình duyệt
Bạn muốn cho phép người dùng lưu trạng thái của form để họ có thể tiếp tục điền vào sau mà không cần phải kiểm tra hợp lệ tất cả các trường ngay lập tức

Ví dụ sử dụng novalidate:

html

<form action="/submit-form" method="post" novalidate>
  Email: <input type="email" name="user_email" required>
  <input type="submit" value="Submit">
</form>

Trong ví dụ trên, dù trường email được đánh dấu là bắt buộc và yêu cầu phải có định dạng email, nhưng khi form được gửi đi, trình duyệt sẽ không kiểm tra các ràng buộc này do có thuộc tính novalidate.

Tuy nhiên, cần lưu ý rằng việc tắt kiểm tra hợp lệ mặc định của trình duyệt không loại bỏ nhu cầu phải thực hiện kiểm tra hợp lệ dữ liệu trên máy chủ (server-side validation), vì kiểm tra hợp lệ trên máy chủ là cần thiết để đảm bảo an toàn và tính toàn vẹn của dữ liệu

Bạn đã từng sử dụng ngôn ngữ template HTML nào chưa? Bạn biết gì về nó?

Có, đó là:

PUG
ERB
Slim
Handlebars
Jinja
Liquid

Theo tôi, chúng ít nhiều giống nhau và cung cấp chức năng tương tự như nội dung và các bộ lọc hữu ích để thao tác dữ liệu được hiển thị. Hầu hết các công cụ tạo templating cũng sẽ cho phép bạn chèn các bộ lọc của riêng mình trong trường hợp bạn cần xử lý tùy chỉnh trước khi hiển thị.

Trong HTML, mục đích của việc chặn cache là gì, và làm sao để đạt được điều đó?

Chặn cache trong HTML có mục đích chính là ngăn trình duyệt lưu trữ bản sao của các tài nguyên trang web (như HTML, CSS, JavaScript, hình ảnh, v.v.) vào bộ nhớ cache của nó. Điều này đảm bảo rằng người dùng luôn nhận được phiên bản mới nhất của trang web mỗi khi họ truy cập, thay vì phiên bản đã được lưu trữ trước đó. Việc này rất quan trọng trong quá trình phát triển web hoặc khi bạn cập nhật nội dung trang web thường xuyên và muốn người dùng xem các thay đổi ngay lập tức mà không cần phải làm mới trang một cách thủ công

Để đạt được điều này, bạn có thể sử dụng một số phương pháp sau:

Sử dụng Meta Tags: Bạn có thể thêm các thẻ meta vào phần <head> của tài liệu HTML để chỉ thị cho trình duyệt không lưu trữ cache

html

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Cài đặt HTTP Headers: Cài đặt các HTTP headers phù hợp trên máy chủ web cũng có thể ngăn chặn việc caching. Các headers như Cache-Control, Pragma, và Expires có thể được cấu hình để chỉ thị cho trình duyệt không lưu trữ cache
Sử dụng Query Strings: Một kỹ thuật khác là thêm một chuỗi truy vấn (query string), thường là một dấu thời gian hoặc một giá trị ngẫu nhiên, vào URL của tài nguyên (như tệp CSS hoặc JavaScript). Điều này khiến trình duyệt coi mỗi yêu cầu là duy nhất và do đó không sử dụng phiên bản đã được lưu trong cache

Lưu ý rằng việc chặn cache có thể làm tăng thời gian tải trang và sử dụng băng thông, vì trình duyệt sẽ phải tải lại tất cả tài nguyên mỗi lần trang được yêu cầu. Do đó, cần cân nhắc khi sử dụng các kỹ thuật này, đặc biệt là trên một trang web đã hoàn thiện và được công bố rộng rãi.

IndexedDB là gì?

IndexedDB là một API JavaScript cung cấp khả năng quản lý một cơ sở dữ liệu NoSQL của các đối tượng trên trình duyệt web. Đây là một tiêu chuẩn được duy trì bởi World Wide Web Consortium (W3C). Là một phương tiện thay thế cho Web storage, IndexedDB cung cấp khả năng lưu trữ với dung lượng lớn hơn nhiều so với Web storage, vốn có giới hạn cố định cho mỗi trang web. Các giới hạn dung lượng của IndexedDB thường rất lớn, nếu không muốn nói là không giới hạn, tùy thuộc vào trình duyệt và dung lượng đĩa cứng

IndexedDB hỗ trợ lưu trữ dữ liệu dưới dạng cặp khóa-giá trị, và không phải là một cơ sở dữ liệu quan hệ hay SQL. API này hoạt động một cách bất đồng bộ, không chặn hoạt động của trang web trong khi thực hiện các thao tác với cơ sở dữ liệu, và hỗ trợ truy xuất các cơ sở dữ liệu có cùng domain

Các trường hợp sử dụng cho IndexedDB bao gồm việc lưu trữ dữ liệu ứng dụng web để có sẵn khi offline, caching dữ liệu để cải thiện hiệu suất ứng dụng, và lưu trữ lượng lớn dữ liệu mà không bị giới hạn bởi dung lượng lưu trữ nhỏ của cookies hay Web storage

IndexedDB được hỗ trợ rộng rãi trên các trình duyệt hiện đại, bao gồm Firefox, Google Chrome, Internet Explorer 10 trở lên, Safari 8 trở lên, và Microsoft Edge. Điều này làm cho IndexedDB trở thành một giải pháp lưu trữ phía client mạnh mẽ và linh hoạt cho các ứng dụng web hiện đại

Tại sao chúng ta cần phần tử MathML trong HTML5?

Phần tử MathML trong HTML5 có mục đích chính là để hiển thị các biểu thức toán học một cách chính xác và ngữ nghĩa trên trang web. MathML là viết tắt của Mathematical Markup Language, một ngôn ngữ đánh dấu dựa trên XML được thiết kế đặc biệt cho việc mô tả các công thức toán học phức tạp. Sử dụng MathML trong HTML5 mang lại một số lợi ích sau:

Chính xác và Ngữ nghĩa: MathML cho phép biểu diễn các công thức toán học một cách chính xác và ngữ nghĩa, giúp các công cụ tìm kiếm và công nghệ hỗ trợ có thể hiểu và xử lý chúng một cách dễ dàng
Tương thích với Trình duyệt: MathML được hỗ trợ bởi một số trình duyệt web hiện đại, giúp việc hiển thị công thức toán học trở nên dễ dàng và tiện lợi hơn cho người dùng cuối
Tích hợp với HTML5: MathML có thể được tích hợp trực tiếp vào tài liệu HTML5, giúp việc tạo và quản lý nội dung toán học trở nên thuận tiện và hiệu quả hơn
Tương tác và Truy cập: MathML hỗ trợ việc tạo ra các công thức toán học có thể tương tác và dễ dàng truy cập, hỗ trợ tốt cho việc giáo dục và nghiên cứu

Tuy nhiên, cần lưu ý rằng không phải tất cả trình duyệt đều hỗ trợ MathML một cách đầy đủ và có thể cần sử dụng các thư viện JavaScript như MathJax để cải thiện khả năng tương thích và hiển thị trên các trình duyệt không hỗ trợ hoặc hỗ trợ một phần MathML

File manifest trong HTML5 là gì?

Trong HTML5, file manifest (thường được gọi là cache manifest) là một tệp văn bản đơn giản cho phép trình duyệt lưu trữ cục bộ các tài nguyên như HTML, CSS, JavaScript, và hình ảnh để có thể truy cập ứng dụng web ngay cả khi không có kết nối mạng. Điều này được thực hiện bằng cách sử dụng thuộc tính manifest trong thẻ <html> để chỉ định tệp manifest, và tất cả các trang web có thuộc tính manifest hoặc được chỉ định trong tệp manifest sẽ được lưu vào bộ nhớ cache khi người dùng truy cập trang đó

Tệp manifest thường có phần mở rộng .appcache và bắt đầu bằng từ khóa CACHE MANIFEST. Nó chứa ba phần chính

CACHE: Liệt kê tất cả các tài nguyên sẽ được lưu vào cache ngay sau khi tải xuống lần đầu và có thể sử dụng offline mà không cần kết nối đến máy chủ
NETWORK: Liệt kê các tài nguyên sẽ không bao giờ được lưu vào cache. Những tài nguyên này không thể sử dụng khi offline và luôn yêu cầu kết nối đến máy chủ
FALLBACK: Liệt kê các tài nguyên dự phòng sẽ được sử dụng trong trường hợp một trang không thể truy cập được. Nó chỉ định tài nguyên chính sẽ được thay thế bằng tài nguyên dự phòng được chỉ định bên cạnh nó trong trường hợp không kết nối được với máy chủ

Tuy nhiên, cần lưu ý rằng tính năng cache manifest trong HTML5 đã bị loại bỏ khỏi các trình duyệt hiện đại như Firefox và Chrome, và không còn được khuyến nghị sử dụng. Thay vào đó, các nhà phát triển web được khuyến khích sử dụng Service Workers để xây dựng các ứng dụng web có khả năng hoạt động offline. Service Workers cung cấp một cách tiếp cận mạnh mẽ và linh hoạt hơn để lưu trữ tài nguyên và quản lý cache cho các ứng dụng web tiến bộ (Progressive Web Apps - PWAs)

Mục đích của chặn bộ nhớ cache (cache busting) trong HTML là gì và làm thế nào bạn có thể thực hiện nó?

Chặn bộ nhớ cache (cache busting) trong HTML là một kỹ thuật được sử dụng bởi các nhà phát triển web để buộc trình duyệt tải phiên bản mới nhất của một tệp tin, thay vì phiên bản đã được lưu trong bộ nhớ cache trước đó. Mục đích của việc này là để đảm bảo rằng người dùng luôn nhìn thấy nội dung cập nhật nhất của trang web, đặc biệt quan trọng đối với các trang web thường xuyên cập nhật nội dung hoặc thay đổi thiết kế.

Để thực hiện cache busting, bạn có thể sử dụng một số kỹ thuật sau:

Thêm một tham số truy vấn vào URL của tệp tin: Bằng cách thêm một tham số truy vấn (ví dụ: một dấu thời gian hoặc một số phiên bản) vào URL của tệp tin tài nguyên (như CSS hoặc JavaScript), bạn có thể khiến trình duyệt coi mỗi yêu cầu là duy nhất và buộc nó tải tệp tin từ máy chủ
html
```
<link rel="stylesheet" href="style.css?v=3.4.2">
```
Trong ví dụ trên, thêm tham số v với giá trị phiên bản vào URL của tệp CSS. Khi bạn thay đổi nội dung tệp CSS, bạn chỉ cần thay đổi giá trị của tham số v để trình duyệt nhận biết và tải phiên bản mới.
Sử dụng tên tệp tin có chứa hash: Một kỹ thuật khác là đổi tên tệp tin tài nguyên bằng cách bao gồm một giá trị hash của nội dung tệp tin. Khi nội dung tệp tin thay đổi, giá trị hash cũng thay đổi, và trình duyệt sẽ tải tệp tin mới vì nó có tên khác.
html
```
<link rel="stylesheet" href="style.abcdef123456.css">
```
Trong ví dụ trên, abcdef123456 là một giá trị hash được tạo ra từ nội dung của tệp CSS. Mỗi lần tệp CSS thay đổi, bạn sẽ tạo một giá trị hash mới và đổi tên tệp tin.

Lưu ý rằng việc sử dụng cache busting có thể làm tăng lượng dữ liệu cần được truyền giữa máy chủ và máy khách, vì mỗi lần tệp tin được cập nhật, phiên bản mới phải được tải xuống, ngay cả khi các thay đổi là nhỏ. Điều này có thể dẫn đến việc tăng sử dụng băng thông và thời gian tải trang chậm hơn.

Web Workers là gì?

Web Workers là một tính năng trong HTML5 cho phép thực thi các script JavaScript trong một luồng nền (background thread) riêng biệt, độc lập với luồng chính của trình duyệt, thường là luồng xử lý giao diện người dùng (UI). Điều này giúp cải thiện hiệu suất và đáp ứng của ứng dụng web bằng cách cho phép các tác vụ nặng hoặc tốn thời gian được xử lý mà không làm gián đoạn hoặc chậm trễ giao diện người dùng.

Đặc Điểm của Web Workers:

Đa luồng: Web Workers cho phép thực hiện đa luồng trong JavaScript, một ngôn ngữ thường được coi là đơn luồng
Không làm treo giao diện: Vì Web Workers chạy độc lập với luồng UI, chúng không làm treo hoặc chậm trễ giao diện người dùng khi thực hiện các tác vụ
Không truy cập DOM: Web Workers không thể trực tiếp tương tác với DOM của trang web. Mọi tương tác với trang web phải thông qua hệ thống gửi và nhận tin nhắn
Giao tiếp qua tin nhắn: Giao tiếp giữa Web Workers và luồng chính được thực hiện thông qua việc gửi và nhận tin nhắn sử dụng phương thức postMessage và sự kiện onmessage

Ví dụ Sử Dụng Web Workers:

javascript

// Tạo một Web Worker mới
var myWorker = new Worker('worker.js');

// Gửi tin nhắn đến Web Worker
myWorker.postMessage('Hello, worker!');

// Nhận tin nhắn từ Web Worker
myWorker.onmessage = function(e) {
    console.log('Message received from worker: ', e.data);
};

Trong ví dụ trên, một Web Worker mới được tạo từ file worker.js. Luồng chính gửi một tin nhắn đến worker và thiết lập một trình xử lý sự kiện để nhận tin nhắn trả về từ worker.

Web Workers là một công cụ quan trọng cho các nhà phát triển web để tối ưu hóa các ứng dụng web phức tạp, đặc biệt là khi cần xử lý các tác vụ nặng mà không muốn ảnh hưởng đến trải nghiệm người dùng

Microdata là gì?

Microdata là một cách để thêm thông tin ngữ nghĩa vào nội dung web, giúp máy tính và các công cụ tìm kiếm hiểu rõ hơn về dữ liệu trên trang web của bạn. Nó là một phần của HTML5 và cho phép bạn tạo ra các cặp tên-giá trị mô tả các phần tử trên trang web của mình. Các cặp tên-giá trị này được gọi là các mục (items), và mỗi cặp tên-giá trị là một thuộc tính (property) của mục đó

Mục đích của Microdata:

Cải thiện SEO: Giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung trang web, từ đó cải thiện khả năng hiển thị của trang web trong kết quả tìm kiếm
Tạo dữ liệu có cấu trúc: Cung cấp một cách để đánh dấu thông tin có cấu trúc trên trang web, giúp các công cụ và ứng dụng khác dễ dàng trích xuất và sử dụng thông tin này
Tăng cường khả năng truy cập: Giúp các công cụ đọc màn hình và các công nghệ hỗ trợ khác hiểu rõ hơn về cấu trúc và nội dung của trang web, từ đó cải thiện trải nghiệm người dùng

Cách thực hiện Microdata:

Sử dụng các thuộc tính Microdata: Bạn thêm các thuộc tính như itemscope, itemtype, và itemprop vào các thẻ HTML để định nghĩa các mục và thuộc tính của chúng
Chọn một từ điển (vocabulary): Để sử dụng Microdata, bạn cần chọn một từ điển như Schema.org, cung cấp một tập hợp các loại mục và thuộc tính mà bạn có thể sử dụng để mô tả nội dung của mình

Ví dụ:

html

<div itemscope itemtype="http://schema.org/Person">
  <h1 itemprop="name">John Doe</h1>
  <p>Works at <span itemprop="worksFor">Example Company</span></p>
  <p>Email: <span itemprop="email">john.doe@example.com</span></p>
</div>

Trong ví dụ trên, một mục của loại Person từ Schema.org được định nghĩa, với các thuộc tính name, worksFor, và email được đánh dấu.

Khi sử dụng Microdata, quan trọng là phải chọn từ điển phù hợp và sử dụng các thuộc tính một cách chính xác để đảm bảo thông tin được mô tả một cách rõ ràng và có thể được các công cụ tìm kiếm và ứng dụng khác sử dụng một cách hiệu quả

Bạn biết những cách để tối ưu tải tài nguyên nào cho website?

Để tối ưu tải tài nguyên website và cải thiện tốc độ tải trang, bạn có thể áp dụng một số kỹ thuật sau:

Giảm số lượng yêu cầu HTTP: Mỗi tệp CSS, JavaScript, hình ảnh hoặc video đều tạo ra một yêu cầu HTTP riêng. Bạn có thể giảm số lượng yêu cầu bằng cách gộp các tệp CSS và JavaScript lại với nhau, sử dụng CSS sprites cho hình ảnh, và tránh sử dụng quá nhiều widget hoặc plugin không cần thiết
Sử dụng Content Delivery Network (CDN): CDN giúp phân phối nội dung từ các máy chủ đặt tại nhiều vị trí địa lý khác nhau, giảm độ trễ và tăng tốc độ tải trang cho người dùng ở các khu vực khác nhau
Tối ưu hóa hình ảnh: Nén hình ảnh và chọn định dạng phù hợp (ví dụ: JPEG, PNG, WebP) để giảm kích thước tệp mà không làm giảm chất lượng hình ảnh
Minify và nén tệp CSS, JavaScript và HTML: Loại bỏ khoảng trắng, dấu chấm phẩy không cần thiết và bình luận để giảm kích thước tệp và tăng tốc độ tải trang
Sử dụng bộ nhớ đệm trình duyệt: Cấu hình bộ nhớ đệm trên trình duyệt để lưu trữ các tài nguyên tĩnh, giúp trang web tải nhanh hơn trong các lần truy cập sau
Tối ưu hóa mã nguồn: Loại bỏ mã nguồn không sử dụng, sử dụng các kỹ thuật như Code Splitting và Tree Shaking để giảm kích thước của mã JavaScript
Tối ưu hóa thời gian phản hồi của máy chủ (TTFB): Cải thiện cấu hình máy chủ, sử dụng các phiên bản PHP mới nhất và tối ưu hóa cơ sở dữ liệu để giảm TTFB
Sử dụng các kỹ thuật tải không đồng bộ và hoãn tải: Sử dụng thuộc tính async và defer cho thẻ <script> để kiểm soát việc tải và thực thi JavaScript, giúp trang web có thể hiển thị nhanh hơn
Tối ưu hóa CSS và JavaScript: Sử dụng các kỹ thuật như Critical CSS để tải trước nội dung quan trọng và hoãn tải các tài nguyên không cần thiết cho việc hiển thị ban đầu của trang
Kiểm tra và theo dõi hiệu suất: Sử dụng các công cụ như Google PageSpeed Insights, GTmetrix hoặc Pingdom để đánh giá hiệu suất hiện tại của trang web và xác định các vấn đề cần giải quyết

Bằng cách áp dụng các kỹ thuật trên, bạn có thể cải thiện đáng kể tốc độ tải trang, cung cấp trải nghiệm người dùng tốt hơn và cải thiện thứ hạng tìm kiếm của trang web.

Có các kỹ thuật nào trong HTML để có có thứ hạng tốt hơn trong Search Engines?

Để cải thiện thứ hạng trên các công cụ tìm kiếm (Search Engines) thông qua HTML, bạn có thể áp dụng một số kỹ thuật SEO (Search Engine Optimization) sau đây:

Nội dung chất lượng cao: Đây là yếu tố quan trọng nhất trong SEO. Nội dung phải chính xác, có thẩm quyền, và hữu ích cho người dùng. Nội dung tốt sẽ thu hút lưu lượng truy cập và cải thiện độ uy tín và liên quan của trang web
Sử dụng thẻ tiêu đề (<title>) một cách hiệu quả: Tiêu đề trang nên chứa từ khóa chính và mô tả chính xác nội dung trang. Tiêu đề này thường là điều đầu tiên mà người dùng và công cụ tìm kiếm nhìn thấy
Thẻ mô tả meta (<meta name="description" content="...">): Mô tả meta nên cung cấp một bản tóm tắt ngắn gọn và hấp dẫn về nội dung trang, bao gồm từ khóa chính
Thẻ định dạng tiêu đề (<h1>, <h2>, v.v.): Sử dụng các thẻ tiêu đề để cấu trúc nội dung và giúp công cụ tìm kiếm hiểu được cấu trúc của nội dung
Thuộc tính alt cho hình ảnh (<img alt="...">): Mô tả hình ảnh bằng cách sử dụng thuộc tính alt để cải thiện khả năng truy cập và giúp công cụ tìm kiếm hiểu nội dung hình ảnh
URL thân thiện với SEO: Đảm bảo rằng URL của trang web dễ đọc và chứa từ khóa
Sử dụng thẻ meta viewport cho thiết kế đáp ứng: Đảm bảo trang web của bạn tương thích với thiết bị di động bằng cách sử dụng thẻ <meta name="viewport" content="width=device-width, initial-scale=1">
Tối ưu hóa tốc độ trang: Tốc độ tải trang nhanh là một yếu tố quan trọng trong SEO. Sử dụng công cụ như Google PageSpeed Insights để kiểm tra và cải thiện tốc độ trang
Cập nhật nội dung thường xuyên: Nội dung mới và cập nhật thường xuyên có thể giúp trang web của bạn trở nên liên quan và hấp dẫn hơn đối với cả người dùng và công cụ tìm kiếm
Sử dụng thẻ meta và link cho SEO: Các thẻ như <meta name="robots" content="..."> và <link rel="canonical" href="..."> có thể hướng dẫn công cụ tìm kiếm cách xử lý trang của bạn
Sử dụng thẻ ngữ nghĩa HTML5: Các thẻ như <article>, <section>, <aside>, <header>, và <footer> giúp cấu trúc nội dung một cách rõ ràng và có thể cải thiện SEO
Liên kết nội bộ: Sử dụng liên kết nội bộ giữa các trang trên trang web của bạn để giúp công cụ tìm kiếm khám phá nội dung mới và hiểu mối quan hệ giữa các trang

Những kỹ thuật này chỉ là một phần của quá trình tối ưu hóa công cụ tìm kiếm. Để có kết quả tốt nhất, bạn cũng cần xem xét các yếu tố khác như tối ưu hóa ngoài trang (off-page SEO), xây dựng backlink chất lượng, và tạo nội dung hấp dẫn và giá trị cho người dùng

Server-sent events trong HTML5 là gì?

Server-Sent Events (SSE) hay còn được biết đến với tên gọi Event Source là một Web Api cho phép kết nối thời gian thực giữa server và client (browser). SSE tạo ra kết nối một chiều từ server đến client sử dụng giao thức HTTP truyền thống với định nghĩa dữ liệu đơn giản cho phía server (event stream format) và API gọn nhẹ phía client.

So với phương pháp polling từ client lên server để kiểm tra dữ liệu thì SSE hiệu quả hơn rất nhiều do client chỉ cần tạo kết nối HTTP lên server một lần, và server giữ kết nối đó để liên tục gửi data cho client.

WebSockets thì phức tạp và hoành tráng hơn hẳn SSE. Tuy nhiên WebSockets là kết nối hai chiều mà đôi khi ta lại không cần chiều từ client lên server. Ngoài ra WebSockets là một giao thức hoàn toàn khác và đòi hỏi server phải hỗ trợ.

Để dùng SSE, phần tử <eventsource> được dùng. Thuộc tính src dùng để chỉ định URL của server gửi luồng dữ liệu cho các sự kiện.

html

<eventsource src = "/cgi-bin/myfile.cgi" />

Web Components là gì?

Web Components là một tập hợp các tiêu chuẩn web cho phép tạo ra các thành phần web tùy chỉnh, có thể tái sử dụng, và đóng gói, giúp cô lập chúng với phần còn lại của mã nguồn. Các Web Components bao gồm ba công nghệ chính:

1. Custom Elements

Cho phép các nhà phát triển tạo ra các phần tử HTML mới với các tag name, hành vi và đánh dấu tùy chỉnh. Ví dụ, bạn có thể tạo một phần tử <my-custom-element> với các tính năng và kiểu dáng đặc biệt

2. Shadow DOM

Cho phép tạo ra một DOM ảo và cô lập cho mỗi Web Component, giúp cô lập CSS và JavaScript, ngăn chặn sự xung đột và giữ cho các kiểu và script của thành phần không ảnh hưởng hoặc bị ảnh hưởng bởi phần còn lại của tài liệu

3. HTML Templates

Cung cấp cách để tạo ra các mẫu nội dung HTML không được hiển thị cho đến khi được kích hoạt bởi JavaScript. Thẻ <template> được sử dụng để định nghĩa một mẫu, và nội dung bên trong nó có thể được sao chép và chèn vào DOM khi cần

Các Web Components giúp phát triển front-end trở nên linh hoạt và dễ quản lý hơn bằng cách cho phép các nhà phát triển đóng gói và tái sử dụng mã nguồn một cách hiệu quả. Các thành phần này có thể được sử dụng trong nhiều dự án và chia sẻ giữa các nhà phát triển, giúp tiết kiệm thời gian và công sức khi xây dựng các ứng dụng web phức tạp

WebSQL là gì?

WebSQL là một API trình duyệt web đã bị loại bỏ, ban đầu được thiết kế để lưu trữ dữ liệu trong các cơ sở dữ liệu có thể truy vấn bằng một biến thể của SQL. Công nghệ này chỉ được triển khai trong các trình duyệt dựa trên Blink và WebKit như Google Chrome và Microsoft Edge mới. Tuy nhiên, WebSQL đã bị khai tử và không còn được duy trì hoặc phát triển nữa.

WebSQL được sử dụng để tạo các ứng dụng web có khả năng hoạt động ngay cả khi không có kết nối internet bằng cách cho phép lưu trữ dữ liệu trên máy khách (client-side). Nó sử dụng SQLite làm hệ quản trị cơ sở dữ liệu phía sau

Tuy nhiên, do sự thiếu hỗ trợ từ các trình duyệt khác và quan ngại về việc chuẩn hóa một hệ quản trị cơ sở dữ liệu cụ thể (SQLite), WebSQL đã bị W3C ngừng phát triển và không bao giờ trở thành một tiêu chuẩn chính thức. Thay vào đó, các công nghệ như WebStorage, IndexedDB và OPFS được khuyến nghị sử dụng để thực hiện các chức năng tương tự

Các trình duyệt đã từng hỗ trợ WebSQL như Google Chrome, Opera, Microsoft Edge và Android Browser đang dần loại bỏ hỗ trợ cho API này. Ví dụ, Chrome đã loại bỏ hỗ trợ WebSQL trong các ngữ cảnh của bên thứ ba từ phiên bản 97 và dự kiến sẽ loại bỏ hoàn toàn từ phiên bản 123

Top 73 câu hỏi phỏng vấn HTML

Các Đặc Điểm Chính của HTML:

Tại Sao HTML Lại Quan Trọng?

Void Elements (Thẻ Tự Đóng)

Thẻ <link>

Thẻ <a>

Sự Khác Biệt Chính

Thẻ section

Thẻ div

Khi nào sử dụng?

Thuộc Tính (Attributes)

Thuộc Tính (Properties)

Sự Khác Biệt Chính

Sử dụng Thẻ <mark>

Sử dụng CSS với Thẻ <span>

Sử dụng CSS Class

Ví dụ về cách khai báo mã hóa ký tự UTF-8 trong HTML:

Cách Sử Dụng srcset

Sử Dụng sizes

1. Sử dụng Tên Màu

2. Sử dụng Mã Màu HEX

3. Sử dụng Giá Trị RGB

4. Sử dụng Giá Trị RGBA

5. Sử dụng Giá Trị HSL

6. Sử dụng Giá Trị HSLA

Đặc Điểm của DOM:

display: none

visibility: hidden

Khi nào sử dụng?

Cookie

Local Storage

Session Storage

Khi nào sử dụng?

Phần tử block

Phần tử inline

Sự Khác Biệt Chính

Phần tử block

Phần tử inline

Sự Khác Biệt Chính

Thẻ <strong> và <b>

Thẻ <em> và <i>

Các Chức Năng Chính của Thẻ meta:

Thuộc tính defer

Thuộc tính async

Sự Khác Biệt Chính

Thẻ và Thuộc Tính "Tùy Chọn" trong HTML:

Lưu Ý:

Sử dụng thẻ meta tag X-UA-Compatible

Sử dụng HTTP header

Thẻ <meter>

Thẻ <progress>

Ví dụ về Khai Báo DOCTYPE:

Tại Sao DOCTYPE Lại Quan Trọng?

Thẻ header

Thẻ article

Thẻ section

Thẻ footer

Thẻ img

Thẻ figure

Đặc Điểm của Web Workers:

Ví dụ Sử Dụng Web Workers:

Mục đích của Microdata:

Cách thực hiện Microdata:

Ví dụ:

1. Custom Elements

2. Shadow DOM

3. HTML Templates

Thẻ `<link>`

Thẻ `<a>`

Thẻ `section`

Thẻ `div`

Sử dụng Thẻ `<mark>`

Sử dụng CSS với Thẻ `<span>`

Cách Sử Dụng `srcset`

Sử Dụng `sizes`

`display: none`

`visibility: hidden`

Phần tử `block`

Phần tử `inline`

Phần tử `block`

Phần tử `inline`

Thẻ `<strong>` và `<b>`

Thẻ `<em>` và `<i>`

Các Chức Năng Chính của Thẻ `meta`:

Thuộc tính `defer`

Thuộc tính `async`

Sử dụng thẻ meta tag `X-UA-Compatible`

Thẻ `<meter>`

Thẻ `<progress>`

Ví dụ về Khai Báo `DOCTYPE`:

Tại Sao `DOCTYPE` Lại Quan Trọng?

Thẻ `header`

Thẻ `article`

Thẻ `section`

Thẻ `footer`

Thẻ `img`

Thẻ `figure`