Thực đơn
trang chủMạng xã hội

Kiến thức cơ bản về lập trình html và css cho người mới bắt đầu. Khái niệm cơ bản về ngôn ngữ lập trình WEB HTML

Khái niệm cơ bản về HTML chứa các quy tắc cơ bản của ngôn ngữ HTML, mô tả cấu trúc của trang HTML và các mối quan hệ trong cấu trúc của tài liệu HTML giữa các thành phần HTML.

Tài liệu HTML là một tài liệu văn bản thông thường có thể được tạo bằng trình soạn thảo văn bản thông thường (Notepad) hoặc bằng một trình soạn thảo văn bản chuyên dụng có tính năng đánh dấu mã (Notepad++, Visual Studio Code, v.v.). Tài liệu HTML có phần mở rộng .html.

Một tài liệu HTML bao gồm một cây các phần tử HTML và văn bản. Mỗi phần tử được xác định trong tài liệu nguồn bằng thẻ bắt đầu (mở) và thẻ kết thúc (đóng) (hiếm khi có ngoại lệ).

Thẻ bắt đầu hiển thị nơi phần tử bắt đầu, thẻ kết thúc hiển thị nơi phần tử kết thúc. Thẻ đóng được hình thành bằng cách thêm dấu gạch chéo / trước tên thẻ: .... Giữa thẻ bắt đầu và thẻ đóng là nội dung của thẻ – nội dung.

Các thẻ đơn không thể lưu trữ nội dung trực tiếp, nó được viết dưới dạng một giá trị thuộc tính, ví dụ một thẻ sẽ tạo một nút có văn bản Nút bên trong.

Các thẻ có thể được lồng vào nhau, ví dụ:

Chữ

. Khi đầu tư, bạn nên tuân theo thứ tự đóng (nguyên tắc “matryoshka”), ví dụ: mục sau sẽ không chính xác:

Chữ

.

Các phần tử HTML có thể có các thuộc tính (toàn cầu, áp dụng cho tất cả các phần tử HTML và thuộc tính của chính chúng). Các thuộc tính được ghi trong thẻ mở của phần tử và chứa tên và giá trị, được chỉ định theo định dạng thuộc tính name="value" . Các thuộc tính cho phép bạn thay đổi các thuộc tính và hành vi của phần tử mà chúng được đặt.

Mỗi phần tử có thể được gán nhiều giá trị lớp và chỉ một giá trị id. Nhiều giá trị lớp được viết cách nhau bởi dấu cách, . Các giá trị lớp và id chỉ được bao gồm các chữ cái, số, dấu gạch ngang và dấu gạch dưới và chỉ được bắt đầu bằng các chữ cái hoặc số.

Trình duyệt xem (diễn giải) tài liệu HTML, xây dựng cấu trúc của nó (DOM) và hiển thị nó theo hướng dẫn có trong tệp này (biểu định kiểu, tập lệnh). Nếu đánh dấu chính xác, cửa sổ trình duyệt sẽ hiển thị một trang HTML chứa các phần tử HTML - tiêu đề, bảng, hình ảnh, v.v.

Quá trình giải thích (phân tích cú pháp) bắt đầu trước khi trang web được tải đầy đủ vào trình duyệt. Trình duyệt xử lý tài liệu HTML một cách tuần tự ngay từ đầu trong khi xử lý CSS và các biểu định kiểu liên quan đến các thành phần trang.

Một tài liệu HTML bao gồm hai phần - phần tiêu đề - giữa các thẻ ... và phần nội dung - giữa các thẻ ....

Cấu trúc trang web 1. Cấu trúc tài liệu HTML

HTML tuân theo các quy tắc có trong tệp khai báo loại tài liệu (Định nghĩa loại tài liệu hoặc DTD). DTD là một tài liệu XML xác định thẻ, thuộc tính và giá trị của chúng hợp lệ cho một loại HTML cụ thể. Mỗi phiên bản HTML đều có DTD riêng.

DOCTYPE chịu trách nhiệm về việc trình duyệt hiển thị chính xác trang web. DOCTYPE chỉ định không chỉ phiên bản HTML (ví dụ html) mà còn cả tệp DTD tương ứng trên Internet.

...

Các phần tử bên trong thẻ tạo thành một cây tài liệu, được gọi là mô hình đối tượng tài liệu, DOM (mô hình đối tượng tài liệu). Trong trường hợp này, phần tử là phần tử gốc.


Cơm. 1. Cấu trúc đơn giản nhất của một trang web

Để hiểu được sự tương tác của các thành phần trang web, cần xem xét cái gọi là “mối quan hệ họ hàng” giữa các thành phần. Mối quan hệ giữa nhiều phần tử lồng nhau được phân loại là cha, con và chị em.

Tổ tiên là một phần tử chứa các phần tử khác. Trong Hình 1, tổ tiên của tất cả các phần tử là . Đồng thời, phần tử này là tổ tiên của tất cả các thẻ mà nó chứa: ,

, , vân vân.

Hậu duệ là một phần tử nằm trong một hoặc nhiều loại phần tử. Ví dụ: là hậu duệ của , và phần tử

Là hậu duệ của cả hai và .

Phần tử cha là phần tử có liên quan đến các phần tử khác ở cấp độ thấp hơn và nằm phía trên chúng trong cây. Trong Hình 1 và . Nhãn

Là cha mẹ chỉ để .

Phần tử con là phần tử phụ thuộc trực tiếp vào phần tử khác ở cấp độ cao hơn. Trong Hình 1 chỉ có các phần tử , ,

Và là con của .

Phần tử chị em là phần tử có phần tử cha chung với phần tử được đề cập, được gọi là phần tử cùng cấp. Trong Hình 1 và là các phần tử có cùng cấp độ, cũng như các phần tử , và

Họ là chị em của nhau.

1.1. Yếu tố 1.2. Yếu tố

Phần ... chứa thông tin kỹ thuật về trang: tiêu đề, mô tả, từ khóa cho công cụ tìm kiếm, mã hóa, v.v. Thông tin bạn nhập vào đó không được hiển thị trong cửa sổ trình duyệt nhưng nó chứa thông tin cho trình duyệt biết cách xử lý trang.

1.2.1. Yếu tố

Thẻ phần được yêu cầu là . Văn bản được đặt bên trong thẻ này sẽ xuất hiện trên thanh tiêu đề của trình duyệt web. Tiêu đề không được dài quá 60 ký tự để phù hợp hoàn toàn với tiêu đề. Văn bản tiêu đề phải chứa mô tả đầy đủ nhất về nội dung của trang web.

1.2.2. Yếu tố

Thẻ phần tùy chọn là một thẻ duy nhất. Với sự trợ giúp của nó, bạn có thể đặt mô tả về nội dung trang và từ khóa cho các công cụ tìm kiếm, tác giả của tài liệu HTML và các thuộc tính siêu dữ liệu khác. Một phần tử có thể chứa nhiều phần tử vì chúng mang thông tin khác nhau tùy thuộc vào thuộc tính được sử dụng.

Mô tả nội dung trang và từ khóa có thể được chỉ định đồng thời bằng nhiều ngôn ngữ, ví dụ: bằng tiếng Nga và tiếng Anh:

Bằng cách sử dụng thẻ, bạn có thể chặn hoặc cho phép các công cụ tìm kiếm lập chỉ mục một trang web:

Để tự động tải lại trang sau một khoảng thời gian xác định, bạn cần sử dụng giá trị làm mới:

Trang sẽ được tải lại sau 30 giây. Để chuyển hướng khách truy cập đến một trang khác, bạn cần chỉ định URL trong tham số url:

Bảng 2. Thuộc tính thẻ Thuộc tính
bộ ký tự Chỉ định mã hóa ký tự cho tài liệu HTML hiện tại:
nội dung Chứa văn bản tùy ý chỉ định giá trị được liên kết với thuộc tính http-equiv hoặc name, tùy thuộc vào giá trị của chúng.
http-tương đương Kiểm soát các hành động của trình duyệt trên một trang web nhất định (tương đương với các tiêu đề HTTP). Khi hiển thị trang, trình duyệt sẽ làm theo hướng dẫn được chỉ định trong thuộc tính:
kiểu mặc định chỉ định kiểu ưa thích để sử dụng trên trang. Thuộc tính nội dung phải chứa ID của phần tử tham chiếu đến biểu định kiểu CSS hoặc ID của phần tử chứa biểu định kiểu.
làm mới cho biết thời gian tính bằng giây trước khi trang được tải lại hoặc thời gian trước khi chuyển hướng đến trang khác nếu thuộc tính nội dung chứa dòng "url=page_address" sau thời gian.
Tự động tải lại trang sau một khoảng thời gian nhất định, trong ví dụ này là sau 30 giây:

Nếu bạn cần chuyển ngay khách truy cập sang trang khác, bạn có thể chỉ định URL trong tham số url:
tên Liên kết với giá trị chứa trong thuộc tính nội dung. Không nên sử dụng nếu phần tử đã có bộ thuộc tính http-equiv , charset hoặc itemprop .
tên ứng dụng chỉ định tên của ứng dụng web được sử dụng trên trang.
tác giả chỉ định tên tác giả của tài liệu ở định dạng tự do.
description xác định một mô tả ngắn gọn về nội dung trang, ví dụ:

trình tạo chỉ định một trong các gói phần mềm được sử dụng để tạo tài liệu, ví dụ:
.
từ khóa chứa danh sách từ khóa được phân tách bằng dấu phẩy phù hợp với nội dung của trang, ví dụ:
.
Ngoài ra, thuộc tính tên có thể lấy các giá trị sau từ đặc tả mở rộng, chẳng hạn như người sáng tạo, googlebot, nhà xuất bản, robot, slurp, khung nhìn, mặc dù chưa có giá trị nào trong số này được áp dụng chính thức.
1.2.3. Yếu tố

Bên trong phần tử này, các kiểu được sử dụng trên trang sẽ được đặt. CSS được sử dụng để đặt kiểu trong tài liệu HTML. Có thể có một số phần tử như vậy trên một trang.

Bên trong phần tử này, bạn có thể viết mã định dạng cho cả các thành phần trang web và toàn bộ trang web.

.paper ( chiều rộng: 200px; chiều cao: 300px; màu nền: #ef4444; màu: #666666; )

Để kết nối một kiểu nhất định với một phần tử, bạn cần gán tên thích hợp cho phần tử đó bằng thuộc tính class (hoặc id):

...

Mã CSS có thể được nhúng trực tiếp vào phần tử đánh dấu dưới dạng giá trị của thuộc tính style, ví dụ:

1.2.4. Yếu tố

Bạn cũng có thể đặt kiểu cho tài liệu bằng phương pháp khác - viết chúng vào một tệp riêng có phần mở rộng .css, ví dụ: style.css.

Có hai cách để kết nối một tệp có kiểu với một trang web:
thông qua chỉ thị url @import

@import url(style.css);

sử dụng phần tử. Phần tử không yêu cầu thẻ đóng. Phần tử này xác định mối quan hệ giữa trang hiện tại và các tài liệu khác. Có thể có một số phần tử như vậy trên một trang. Mục nhập sẽ trông như thế này:

Bảng 4. Thuộc tính thẻ Mô tả thuộc tính, giá trị được chấp nhận
nguồn gốc chéo Cho biết liệu CORS (một công nghệ trình duyệt cho phép trang web truy cập tài nguyên từ một miền khác) có nên được sử dụng khi truy xuất hình ảnh từ một trang web hay không.
ẩn danh — trình duyệt tự động thêm tiêu đề Origin vào yêu cầu tên miền chéo, chứa tên miền mà yêu cầu được thực hiện. Nếu máy chủ không phản hồi với tiêu đề CORS Access-Control-Allow-Origin: * (hoặc tên miền thay vì dấu hoa thị), thì việc tải hình ảnh sẽ bị chặn.
use-credentials - Nếu máy chủ không cung cấp thông tin xác thực bằng Access-Control-Allow-Credentials: true thì việc tải hình ảnh sẽ bị chặn.
href Thuộc tính chính của thẻ, giá trị là đường dẫn đến tệp có kiểu.
hreflang Xác định ngôn ngữ của văn bản trong tài liệu được tham chiếu.
phương tiện truyền thông Chỉ định loại thiết bị mà tài nguyên liên kết sẽ được áp dụng.
nonce Biến chuỗi được tạo ngẫu nhiên trên máy chủ đặt quy tắc sử dụng kiểu nội tuyến để bảo vệ nội dung. Giá trị thuộc tính là một chuỗi văn bản.
liên quan Thuộc tính xác định mối quan hệ giữa tài liệu hiện tại và tài liệu được tham chiếu.
thay thế - một liên kết đến cùng một tài liệu, nhưng ở định dạng khác (ví dụ: các trang để in, dịch, nhân bản, nguồn cấp dữ liệu ở định dạng RSS hoặc Atom),
.


kho lưu trữ - chỉ ra rằng tài liệu được liên kết có giá trị lịch sử. Liên kết có thể trỏ đến một bộ sưu tập hồ sơ, tài liệu hoặc tài liệu khác.
tác giả liên kết đến một trang về tác giả của tài liệu hoặc đến một trang có thông tin liên hệ của tác giả.
đánh dấu một tham chiếu đến phần đầu tiên gần nhất của bài viết là liên kết hoặc đến phần của bài viết có liên quan chặt chẽ nhất đến phần tử nếu không có phần tử đầu tiên.
bên ngoài được sử dụng để chỉ ra rằng trang được liên kết đến không phải là một phần của trang này.
đầu tiên chỉ định một liên kết trỏ đến tài liệu đầu tiên trong chuỗi tài liệu.
liên kết trợ giúp tới một tài liệu trợ giúp.
biểu tượng chỉ định đường dẫn đến biểu tượng sẽ được sử dụng cho tài liệu hiện tại.
cuối cùng chỉ định một liên kết trỏ đến tài liệu cuối cùng trong một chuỗi tài liệu.
giấy phép Một liên kết đến thông tin bản quyền của một tài liệu.
tiếp theo chỉ ra rằng tài liệu này là một phần của một bộ và liên kết sẽ dẫn đến tài liệu tiếp theo trong bộ đó.

nofollow chỉ ra rằng liên kết không được tác giả của trang xác nhận hoặc liên kết đó có tính chất thương mại.
noreferrer chỉ ra rằng tiêu đề yêu cầu của khách hàng chứa url của nguồn yêu cầu sẽ không được chuyển khi theo liên kết.
pingback chỉ định địa chỉ của máy chủ pingback, cho phép blog tự động thông báo cho các trang web liên kết tới nó.
tìm nạp trước chỉ định rằng tệp được tham chiếu phải được lưu vào bộ đệm trước.
prev chỉ ra rằng tài liệu này là một phần của một bộ và liên kết đến tài liệu trước đó trong bộ đó.

tìm kiếm chỉ ra rằng tài liệu được tham chiếu chứa giao diện để tìm kiếm và các tài nguyên liên quan.
thanh bên cho biết rằng tài liệu được liên kết sẽ được hiển thị trong ngữ cảnh trình duyệt bổ sung, nếu có thể và một số trình duyệt, khi bạn nhấp vào siêu liên kết, sẽ mở một cửa sổ để thêm liên kết vào thanh dấu trang của bạn.
biểu định kiểu là một liên kết đến một tệp bên ngoài sẽ được sử dụng làm biểu định kiểu cho tài liệu này.
thẻ chỉ ra rằng thẻ siêu liên kết áp dụng cho tài liệu này.
up chỉ ra rằng trang này là một phần của cấu trúc phân cấp và siêu liên kết trỏ đến cấp độ tài nguyên cao hơn trong cấu trúc.
kích thước Chỉ định kích thước của các biểu tượng để hiển thị trực quan. Thuộc tính kích thước chỉ được sử dụng cùng với rel="icon" và có thể nhận các giá trị sau:
widths-height - xác định danh sách các kích thước được phân tách bằng dấu cách, mỗi kích thước phải ở định dạng - widths-height (kích thước biểu tượng được chỉ định bằng pixel), ví dụ:
;
bất kỳ - biểu tượng có thể được thu nhỏ theo bất kỳ kích thước nào.
tiêu đề Xác định tiêu đề của một liên kết hoặc tên của một tập hợp các biểu định kiểu thay thế. Giá trị thuộc tính là văn bản.
kiểu Chỉ định loại MIME của tài liệu đang được tham chiếu. Trong trường hợp này nó nhận giá trị "text/css".
1.2.5. Yếu tố Bảng 5. Thuộc tính thẻ Mô tả thuộc tính, giá trị được chấp nhận
không đồng bộ Thuộc tính chỉ ra rằng tập lệnh sẽ chạy không đồng bộ với phần còn lại của trang (tập lệnh sẽ bắt đầu thực thi cùng lúc tải trang).
bộ ký tự Xác định mã hóa ký tự
nguồn gốc chéo Xác định xem CORS có được sử dụng khi tải tập lệnh bên ngoài hay không (sử dụng thuộc tính src).
ẩn danh - trước khi tải tập lệnh vào yêu cầu tên miền chéo, trình duyệt sẽ tự động thêm tiêu đề Origin mà không chuyển tham số truy cập (cookie, chứng chỉ X.509, thông tin đăng nhập/mật khẩu để xác thực cơ bản qua HTTP). Nếu phản hồi của máy chủ không chứa tiêu đề Access-Control-Allow-Origin: tên miền thì tập lệnh sẽ không được tải.
thông tin xác thực sử dụng - trước khi tải tập lệnh vào yêu cầu tên miền chéo, trình duyệt sẽ tự động thêm tiêu đề Origin cho biết các tham số truy cập (cookie, chứng chỉ SSL hoặc cặp thông tin đăng nhập/mật khẩu). Nếu phản hồi của máy chủ không chứa tiêu đề Access-Control-Allow-Credentials: true thì tập lệnh sẽ không được tải.
hoãn lại Việc giải thích các tập lệnh bị trì hoãn cho đến khi tài liệu được hiển thị trên thiết bị của người dùng.
nonce Cung cấp bảo mật bằng cách bảo vệ chống lại các cuộc tấn công kịch bản chéo trang (XSS). Đặt quy tắc sử dụng tập lệnh tích hợp bằng cách sử dụng giá trị nonce và giá trị băm. Trong quá trình hiển thị trang, trình duyệt tính toán các giá trị băm cho từng tập lệnh nội tuyến và so sánh chúng với các giá trị được liệt kê trong CSP. Tải xuống từ các tài nguyên không có trong “danh sách trắng” sẽ bị chặn.
src Cho biết vị trí của tệp có tập lệnh; giá trị thuộc tính là url của tệp chứa chương trình JavaScript.
kiểu Dùng để khai báo ngôn ngữ script dùng để soạn thảo nội dung của thẻ.
1.3. Yếu tố

Phần này chứa tất cả nội dung của tài liệu. Có sẵn cho phần tử.

Bảng 5. Thuộc tính thẻ Mô tả thuộc tính, giá trị được chấp nhận
onafterprint Một sự kiện xảy ra sau khi một trang được gửi đi in hoặc sau khi cửa sổ in đóng lại.
trước khi in Một sự kiện xảy ra trước khi một trang được gửi đi in.
ontrước khi tải Sự kiện này được kích hoạt khi khách truy cập bắt đầu chuyển đổi sang trang khác hoặc nhấp vào “đóng cửa sổ”. Cho phép bạn hiển thị thông báo trong hộp thoại xác nhận để cho người dùng biết họ muốn ở lại hay rời khỏi trang hiện tại.
onhashchange Sự kiện này được kích hoạt khi phần băm của URL thay đổi, chẳng hạn như khi người dùng chuyển từ example.domain/test.aspx#page1 sang example.domain/test.aspx#page2 .
tin nhắn Một sự kiện xảy ra khi một tin nhắn được nhận thông qua một nguồn sự kiện.
trực tuyến Sự kiện được trình duyệt kích hoạt khi trình duyệt xác định rằng kết nối Internet đã bị mất.
trực tuyến Sự kiện được trình duyệt kích hoạt khi kết nối Internet được khôi phục.
ẩn trên trang Sự kiện xảy ra khi người dùng rời khỏi trang thông qua điều hướng, chẳng hạn như nhấp vào liên kết, làm mới trang, điền vào biểu mẫu, v.v.
onpageshow Sự kiện xảy ra khi người dùng điều hướng đến trang web, sau sự kiện onload.
đang tải xuống Sự kiện được kích hoạt nếu trang không tải vì lý do nào đó hoặc khi cửa sổ trình duyệt bị đóng.

Bài viết này không nhằm mục đích hướng dẫn toàn diện về ngôn ngữ đánh dấu tài liệu HTML. Nó mô tả những điều cơ bản về HTML - các nguyên tắc, khái niệm và định nghĩa cơ bản của công nghệ này, khi đã nắm vững được công nghệ này, bạn có thể dễ dàng chuyển sang nghiên cứu về mã hóa HTML.

Để nghiên cứu bài học, hãy tải xuống kho lưu trữ với các tập tin cần thiết.

HTML là một ngôn ngữ đánh dấu tài liệu. Cách phát âm đúng là HTT.

Bạn có thể đã từng làm việc trong trình soạn thảo tài liệu Word hoặc các ứng dụng văn phòng tương tự chưa? Bạn có thể biết rằng loại trình soạn thảo này có khả năng phong phú để chỉnh sửa văn bản, sắp xếp các thành phần, chèn ảnh, v.v.

Bạn có thể hỏi tại sao lại viết về trình xử lý văn bản trong một bài viết về HTML? Nhưng tại sao. Nếu bạn tìm ra, biên tập viên văn phòng là gì? Đây là một ứng dụng để chỉnh sửa và hiển thị tài liệu.

Từ khóa ở đây là tài liệu. Nghĩa là, chúng tôi tạo, chỉnh sửa và xem tài liệu trong một số chương trình, trong trường hợp này - trong trình soạn thảo văn phòng. Nếu chúng ta mở một tài liệu như vậy trong một trình soạn thảo văn bản đơn giản, chẳng hạn như Notepad, chúng ta sẽ thấy nhiều ký hiệu và dấu hiệu lạ. Sự lộn xộn của các ký hiệu này khiến con người không thể hiểu được nhưng lại có thể hiểu được đối với máy tính. Nhờ ngôn ngữ nội bộ này, tài liệu Word có một cấu trúc và diện mạo nhất định trong chính trình soạn thảo và tài liệu xuất hiện trước mắt chúng ta một cách vinh quang với văn bản và hình ảnh được định dạng ở vị trí của chúng.

HTML là ngôn ngữ đánh dấu tài liệu cho trình duyệt. Word ở đây là trình duyệt và tài liệu là trang HTML. Đây chính là nền tảng của công nghệ HTML, cần phải hiểu rõ công nghệ này để không nhầm lẫn ngôn ngữ đánh dấu của tài liệu web với ngôn ngữ lập trình. Cái tên đã nói lên điều đó - bằng cách sử dụng HTML chúng tôi đánh dấu, vị trí trên trang mà phần tử, hình ảnh hoặc văn bản sẽ được hiển thị và chúng sẽ xuất hiện cạnh nhau theo thứ tự nào.

Có, việc gõ và định dạng văn bản đơn giản trong ứng dụng văn phòng không liên quan gì đến lập trình. Nhưng người đọc tinh ý sẽ nhận thấy một chi tiết quan trọng - trong trình xử lý văn bản, chúng ta gõ, chỉnh sửa và định dạng văn bản và hình ảnh bằng các nút và menu trực quan, nhưng tại sao mã HTML lại được viết bằng tay? Tại sao phải tìm hiểu nhiều chi tiết kỹ thuật về viết đánh dấu cho một tài liệu?

Trên thực tế, có rất nhiều trình soạn thảo mà bạn có thể tạo và chỉnh sửa các trang HTML, tương tự như Word. Nghĩa là, mã HTML nguồn bị ẩn đối với chúng tôi và chúng tôi không truy cập được.

Một loại Word cho HTML. Những trình soạn thảo trực quan này được gọi là:

WYSIWYG biên tập viên - Bạn thấy bạn là gì Bạn thấy gì. Nghĩa là, nếu chúng ta dịch nó sang tiếng Nga: những gì chúng ta thấy là những gì chúng ta nhận được.

Tôi gọi chúng là "wuzivoogies". Mặc dù điều này không đúng về mặt ngữ âm nhưng nó thể hiện rõ ràng sự vô nghĩa của phát minh này. Những người mới bắt đầu thường sử dụng những trình soạn thảo như vậy để tạo trang web đầu tiên của họ. Tất nhiên, điều này rất tiện lợi - bạn không cần phải đi sâu vào nghiên cứu về thẻ, phong cách thiết kế và những thứ khác, thoạt nhìn, những thứ khó chịu và phức tạp. Bản thân trình chỉnh sửa sẽ tự động chuyển đổi hành động của chúng tôi thành mã HTML.

Nhưng, như họ nói, không có gì xảy ra cả. Cụ thể hơn, phương pháp này có những nhược điểm rất nghiêm trọng. Điều gì ngăn cản mọi người sử dụng trình soạn thảo trực quan để thiết kế trang HTML? Thực tế là các trang được hình thành theo cách này thường có nhiều mã không cần thiết và nhiều lỗi theo quan điểm ngữ nghĩa. Tất nhiên, hiện nay không có vấn đề gì với kết nối Internet tốc độ cao và sự khác biệt về kích thước trang 400 kb và 100 kb không đáng kể đối với tốc độ, tuy nhiên, mã HTML được viết chính xác và tối ưu hóa sẽ loại bỏ nhiều vấn đề và mang lại nhiều lợi thế, cụ thể là: