Bài viết này được viết vào ngày 6 tháng 11 năm 2026.
Các công cụ AI thay đổi rất nhanh. Nhưng khung xương cơ bản của một trang web thì không. Đầu trang (header), khu vực chính (hero), phần nội dung (section), chân trang (footer), thanh điều hướng (navigation), thẻ (card) — một người chỉ cần học sáu thuật ngữ này là đã có thể mô tả khung cho màn hình đầu tiên. Menu bên trong sản phẩm có thể di chuyển. Bạn hãy đọc bài viết này như bản đồ cấu trúc của một trang web, chứ không phải chuyến tham quan các bảng điều khiển của phần mềm tạo trang.
Trước khi trang trí, một trang web là một chuỗi các nhiệm vụ. Có thành phần cho biết bạn đang ở đâu. Có thành phần khẳng định trang này là gì trong một câu. Có thành phần lặp lại một loại thông tin cùng chuẩn. Có thành phần trỏ đến vị trí tiếp theo, và có thành phần kết thúc trang. Khi những nhiệm vụ đó không được đặt tên rõ ràng, mô hình AI sẽ tạo ra một tấm áp phích: một hình ảnh lớn, chữ bay lơ lửng, và không có cách nào để cuộn xuống. Trang trông có vẻ hoàn thành nhưng lại không thể dùng được trên điện thoại.
Hãy đặt tên các nhiệm vụ bằng tiếng Anh trong câu lệnh, và giải thích nội dung bằng ngôn ngữ của bạn ở bên dưới. Nếu ngôn ngữ của bạn đã có một từ thông dụng và chuẩn xác, hãy dùng từ đó kèm thuật ngữ tiếng Anh trong ngoặc đơn ở lần đầu tiên. Nếu không có từ tương đương, đừng tự tạo ra một từ mới. Một lời giải thích ngắn gọn cộng với danh từ tiếng Anh là đủ.
Sáu vị trí, theo thứ tự người dùng bắt gặp
Thanh header là dải mỏng ở trên cùng. Nó chứa tên trang web và một vài đường dẫn thoát chính. Header không phải là nơi đặt một hero thứ hai. Nếu mọi thứ quan trọng đều bị nhồi nhét vào header, trang web sẽ không còn phần đỉnh rõ ràng mà chỉ là một sự lộn xộn.
Khu vực hero là khoảng không gian lớn đầu tiên người dùng nhìn thấy. Nội dung hero gồm một tuyên bố chính, một câu hỗ trợ, và một nút hành động. Một phòng khám có thể nêu rõ dịch vụ của mình và đưa ra nút “Đặt lịch khám”. Một cửa hàng có thể nêu sản phẩm nổi bật và đưa ra nút “Xem bánh mì hôm nay”. Một hero cố nhồi nhét toàn bộ thông tin kinh doanh chỉ là một tờ rơi dán ở trên cùng. Phần còn lại của trang sau đó sẽ chỉ lặp lại điều đó, và người dùng điện thoại sẽ không bao giờ cuộn tới được phần giá cả hay địa chỉ.
Một section là một chủ đề riêng biệt có tiêu đề. Giờ mở cửa, giá cả, đội ngũ, hay câu hỏi thường gặp. Section là cách làm cho một trang web dài trở nên dễ đọc lướt. Hãy yêu cầu section dựa trên câu hỏi thực tế mà người truy cập có, chứ không chỉ dùng từ “section” đơn độc. Câu lệnh như “Một section có tiêu đề Giờ làm việc, với danh sách tuần được viết dạng văn bản chứ không phải hình ảnh” sẽ giữ nguyên hiệu quả sau khi dịch. Ngược lại, hình ảnh chụp thời gian biểu sẽ không thể xử lý tốt.
Phần footer là phần kết thúc trang. Địa chỉ, giờ mở cửa một lần nữa jika cần, và cách thức liên hệ với bạn. Những người dùng bị lạc thường cố ý cuộn xuống tận cùng trang. Một footer chỉ có dải trang trí sẽ làm họ thất vọng.
Thanh navigation là danh sách ngắn các điểm đến, thường nằm trong header. Năm mục đã là nhiều trên màn hình điện thoại. Nhiều hơn thế nên được ẩn sau một nút điều khiển, chứ không phải một hàng từ bị thu nhỏ. Đừng yêu cầu một navigation lặp lại mọi tiêu đề section; đó chỉ là một mục lục giả vờ làm trang web.
Thẻ card là hộp lặp lại cho một loại thông tin cùng chuẩn: dịch vụ, lớp học, hay sản phẩm. Mỗi card có cấu trúc ô chứa giống nhau: biểu tượng hoặc hình ảnh nếu có, tiêu đề, một câu mô tả, và một nút hành động. Các card mà mỗi cái lại tự tạo một bố cục khác nhau thì không phải là một bộ chuẩn, mà là năm tấm áp phích ghép lại.
Cùng một bộ card, hai lựa chọn chiều rộng
Một trang web chỉ được thiết kế theo chiều rộng máy tính sẽ bị hỏng ở những quốc gia nơi điện thoại là máy tính chính. Hãy nói rõ số cột. Trên màn hình rộng, hiển thị ba card thành một hàng. Trên màn hình hẹp, hiển thị từng card xếp chồng lên nhau. Nội dung chữ bên trong card không đổi, chỉ có hàng ngang bị tách ra. Đó là bố cục thích ứng (responsive layout), và đó là một điều kiện kỹ thuật chứ không phải một tâm trạng. Yêu cầu “làm cho nó thích ứng” để mặc cho mô hình AI chọn điểm ngắt có thể làm ẩn mất nút bấm. Yêu cầu “Ba cột khi màn hình rộng, một cột khi màn hình hẹp, nút hành động luôn hiển thị” sẽ ngăn chặn điều đó.
Màn hình máy tính bảng có thể nằm ở giữa với hai cột. Bạn có thể nói rõ điều đó, nhưng không bắt buộc. Khái niệm một và ba cột đã đủ truyền tải ý tưởng: nội dung là một danh sách, còn hàng ngang là đặc quyền của chiều rộng màn hình.
Thanh header cố định (sticky header) — thanh header giữ nguyên vị trí khi trang cuộn — là tùy chọn. Nó hữu ích khi thanh navigation là đường chính để quay lại. Nhưng nó gây khó chịu khi chiếm mất một phần ba màn hình điện thoại ngắn. Chỉ yêu cầu sticky header nếu đường quay lại quan trọng hơn đoạn văn tiếp theo. Hãy nói “sticky header” nếu bạn muốn thuật ngữ tiếng Anh, và hãy nêu rõ điều kiện: nó giữ kích thước gọn nhẹ và không che mất tiêu đề đầu tiên.
Một trang trông có vẻ hoàn chỉnh nhưng không thể dùng được
Một phòng khám nhỏ từng yêu cầu “một trang chủ đẹp mắt”. Mô hình AI trả về một bức ảnh dọc cao về hành lang, khẩu hiệu đè lên ảnh, và một hàng biểu tượng nhạt màu không có chữ giải thích. Trên máy tính xách tay ở cửa hàng, nó trông thật yên bình. Nhưng trên điện thoại ở trạm xe buýt, khẩu hiệu che mất lối vào, các biểu tượng dồn thành một dải không thể đọc được, còn giờ mở cửa thì in chết vào hình ảnh nên không thể dịch cũng như không thể đọc bởi trình đọc màn hình (screen reader). Không có gì trên trang đó đóng vai trò là header, hero, section, hay card. Đó chỉ là một tấm áp phích đã học cách cuộn.
Bản tóm tắt thứ hai đã đặt tên rõ các khung xương và loại bỏ từ ngữ về vẻ đẹp ra khỏi câu lệnh. Header chứa tên phòng khám và ba liên kết: thăm khám, giờ làm việc, đường đi. Hero chứa một câu và một nút “Đặt lịch khám”. Ba section được viết hoàn toàn dưới dạng văn bản. Một bộ card cho ba loại dịch vụ khám, xếp ba cột khi màn hình rộng và xếp chồng khi màn hình hẹp. Footer chứa địa chỉ dưới dạng văn bản. Trang web trở nên thực dụng và bình thường — đúng những gì một người ở trạm xe buýt có thể dùng được. Bức ảnh hành lang vẫn có thể tồn tại bên trong hero với kích thước nhỏ hơn câu chủ đạo, chứ không còn chiếm trọn trang web.
Đó là sự thay đổi thực tế mà sáu thuật ngữ này tạo ra trong công việc. Chúng ngăn mô hình AI dành toàn bộ câu trả lời chỉ để tạo ra bầu không khí visual. Bầu không khí có thể nằm bên trong một khu vực, chứ không thể thay thế khu vực đó. Nếu bạn đang viết bản tóm tắt bằng tiếng Việt, tiếng Hindi hay tiếng Ả Rập, hãy viết sáu thuật ngữ tiếng Anh trong câu lệnh và viết các câu thực tế của phòng khám ở bên dưới. Khung xương cơ bản mang tính toàn cầu, còn câu chữ sẽ ở lại nơi người dùng sinh sống.
Những thay đổi đối với bản tóm tắt đầu tiên
Bản tóm tắt đầu tiên của bạn chỉ cần gói gọn trong một đoạn văn:
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
Bên dưới câu đó, bằng ngôn ngữ của bạn, hãy viết rõ nội dung của ba section là gì. Mô hình AI không cần ngôn ngữ của bạn để đặt một header. Bạn cần ngôn ngữ của chính mình để quyết định rằng ba section đó là giờ làm việc, giá cả, và đường đi — chứ không phải một khẩu hiệu được lặp lại ba lần.
Đây là trang web mà hầu như mọi tổ chức nhỏ thực sự cần. Đây cũng là trang web mà mô hình AI sẽ trang trí quá đà nếu bạn chỉ nói “hiện đại và sạch sẽ”. Hiện đại không phải là một khu vực của trang. Header, hero, section, footer, navigation, và card mới là các khu vực thực sự. Hãy học các thuật ngữ này, dán chúng bằng tiếng Anh, và giữ nguyên các thông tin thực tế bằng ngôn ngữ của người sẽ đọc chúng.
Quyết định tiếp theo không phải là chọn thêm một khu vực khác, mà là xác định điều gì xảy ra khi trang web cần hỏi thông tin người dùng hoặc hiển thị một tập hợp dữ liệu khác mà không đẩy họ sang trang mới. Đó là một dạng thức khác với section, và là nội dung của bài viết tiếp theo.