[HƯỚNG DẪN] Viết HTML tốt cho người mới bắt đầu

Khi Tim Berners-Lee phát minh ra World Wide Web vào năm 1989, không có JavaScript, không có CSS, chỉ có HTML.

Mặc dù HTML đã thay đổi rất nhiều trong hơn 30 năm, mở rộng từ 18 thẻ ban đầu lên hơn 120, nhưng nó vẫn giữ được tầm quan trọng trung tâm: đó là công nghệ nền tảng cho web.

Nếu trang web của bạn dựa trên HTML tốt, nó sẽ tải nhanh. Các trình duyệt dần dần hiển thị HTML — nghĩa là, chúng sẽ hiển thị một trang web được tải xuống một phần cho người dùng trong khi trình duyệt chờ các tệp còn lại từ máy chủ.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Các kỹ thuật phát triển thời thượng hiện đại, chẳng hạn như React, yêu cầu rất nhiều JavaScript được gửi đến người dùng. Khi tất cả được tải xuống, thiết bị của người dùng phải phân tích cú pháp và thực thi JavaScript trước khi nó có thể bắt đầu xây dựng trang. Trên một mạng có kết nối chậm hoặc trên một thiết bị với cấu hình yếu, điều này có thể dẫn đến tốc độ tải cực kỳ chậm và gây hao pin nhiều.

Các trang web dựa trên HTML tốt cũng sẽ mạnh mẽ - ngay cả khi các kiểu và tập lệnh không tải được, nội dung vẫn có sẵn. HTML có thể được xem là một ngôn ngữ không bao giờ lỗi thời.

HTML chống lại tương lai

Để chứng minh bản chất chắc chắn trong tương lai của HTML, bạn có thể mở trình duyệt web đầu tiên do chính Ngài Timbo viết vào năm 1991. Mở một trang web bằng cách chọn Document > Open from Full Document Reference và nhập URL vào cái hộp.

Một tài liệu HTML có cấu trúc tốt vẫn sẽ hiển thị. Nó sẽ không có bất kỳ kiểu định dạng nào (CSS 1 không được chỉ định cho đến năm 1996 và mãi cho đến năm 2000 khi IE5 dành cho Mac được xuất xưởng với bản triển khai gần như đầy đủ). Khi đó, một số dấu câu hoặc ký tự kỳ lạ hơn có thể được thay thế bằng mã ký tự của chúng, nhưng bạn vẫn có thể đọc nội dung. Rõ ràng, đối với đại đa số các trang web, nội dung là thứ mà người dùng tìm đến.

Không còn nhiều người viết HTML bằng tay?

Tôi thỉnh thoảng được nói rằng không ai thực sự cần học HTML nữa, bởi vì ngày nay không ai viết HTML bằng tay. Và điều này phần lớn đúng - 35,8% web được cung cấp bởi WordPress, nền tảng cung cấp các mẫu website được thiết kế sẵn và tương thích với nhiều chủ đề khác nhau. Joomla và Drupal hoạt động tương tự. Các nhà phát triển khác sử dụng các framework như React để gắn kết các thành phần (Component) được viết sẵn với nhau.

Tuy nhiên, mọi người thường quên mất rằng, để tạo ra và phát triển các mẫu giao diện website cũng cần phải có người thực hiện. Và những người thực hiện đó chính là các nhà phát triển. Dù là WordPress hay React thì đều cần có kiến thức về HTML để đánh giá chất lượng của các mẫu hoặc component mà họ định sử dụng. Vậy HTML là gì? Chúng ta nên hiểu HTML như thế nào cho đúng.

HTML là gì? Khái niệm cơ bản về HTML

HTML (HyperText Markup Language - ngôn ngữ đánh dấu siêu văn bản) là mã được sử dụng để tạo ra giao diện tổng quát cho trang web. Nó cho trình duyệt web biết cách hiển thị văn bản và hình ảnh một website như thế nào.

HTML không được xem là ngôn ngữ lập trình. Tuy nhiên, nó là ngôn ngữ tiêu chuẩn cho các tệp đã được thiết kế để hiển thị trong trình duyệt web. Bạn chắc chắn đã gặp HTML theo cách này hay cách khác, vì tất cả các website trên Internet hiện nay đều được viết bằng một phiên bản HTML.

Cấu trúc của một phần tử HTML

Trước khi bắt đầu xem những gì tạo nên HTML tốt, chúng ta hãy xem cấu trúc của một phần tử HTML. (Nếu bạn đã biết điều này, vui lòng bỏ qua phần này.)

Đây là một thẻ HTML cho trình duyệt biết "đây là một đoạn văn bản":

<p>

Các trình duyệt không quan tâm nhiều đến chữ hoa hay chữ thường trong HTML: <video>, <VIDEO>, <Video> và thậm chí <vIdEo> đều giống nhau. Nhưng thông thường, tất cả mọi người đều sử dụng các chữ thường. Vì chữ hoa trông rất rối mắt và khó chịu, nhất là khi các lập trình viên phải liên tục nhìn chúng. Đây là một thẻ mở. Hầu hết các thẻ — nhưng không phải tất cả — đều có thẻ đóng tương ứng.

Như với thẻ mở, thẻ đóng được đặt trong dấu ngoặc nhọn, nhưng ở đây tên thẻ được đặt trước dấu gạch chéo ngược, điều này cho trình duyệt biết rằng đây là thẻ đóng:

</p>

Như bạn có thể thấy, tên thẻ được bao quanh bởi dấu ngoặc nhọn. Thẻ mở, nội dung giữa thẻ mở và thẻ đóng và thẻ đóng là một phần tử HTML. Ở đây, chúng ta có hai phần tử đoạn văn:

<p> Tôi là một đoạn văn!</p>
<p> Và tôi cũng vậy! </p>

Theo mặc định, trình duyệt web sẽ hiển thị những điều này với một dòng trống giữa các đoạn văn. Nhưng đây chỉ là mặc định, hiển thị có thể được thay đổi bằng cách sử dụng một ngôn ngữ riêng có tên là Cascading Style Sheets (CSS) mà không cần thay đổi HTML theo bất kỳ cách nào.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Thẻ cũng có thể có các thuộc tính cung cấp cho trình duyệt thêm thông tin về thẻ. Một số thuộc tính được cho phép trên tất cả các thẻ, và một số thì chỉ được cho phép trên một tập hợp con. Các thuộc tính có tên và giá trị được gán trong thẻ mở.

Điều này cho trình duyệt biết rằng đoạn văn cụ thể này bằng ngôn ngữ tiếng Việt:

<p lang = "vi">

Một số thuộc tính dường như không nhận một giá trị nào. Ví dụ <audio loop> là cách viết tắt của <audio loop=”loop”>, cả hai định dạng đều hợp lệ. Tuy nhiên, hãy cẩn thận với các thuộc tính Boolean. Cụ thể:

Một số thuộc tính là thuộc tính boolean. Sự hiện diện của thuộc tính boolean trên một phần tử đại diện cho giá trị đúng và sự vắng mặt của thuộc tính đại diện cho giá trị sai ... Để biểu thị một giá trị sai, thuộc tính phải được bỏ qua hoàn toàn.

Thẻ có thể có nhiều thuộc tính:

<p lang = "vi" class = "canhbao">

Điều này cho trình duyệt biết rằng đoạn văn bản cụ thể này được viết bằng ngôn ngữ tiếng Việt và nó thuộc về lớp được gọi là “canhbao” (lớp này sẽ được triển khai trong css).

Một số thuộc tính có thể nhận nhiều giá trị, được phân tách bằng dấu cách:

<p class="canhbao khungvien">

Đoạn văn bản này là một phần của lớp “canhbao” ( tôi sẽ tạo lớp này trong css, để màu chữ là đỏ) và cũng là một phần của lớp “khungvien” (tôi sẽ tạo lớp này trong css để hiển thị một khung bao quanh đoạn văn bản đó).

Và đó là tất cả những gì bạn cần biết về cấu trúc của thẻ HTML.

Sử dụng các cặp thẻ HTML phù hợp

Để hiển thị danh sách các bài hát theo thứ tự xuất hiện của Sơn Tùng MTP, ta có thể viết:

1. Em của ngày hôm qua

2. Lạc Trôi

3. Hãy trao cho anh

Dễ dàng nhận thấy rằng đây là một danh sách và thứ tự của các mục nhập rất quan trọng. Về mặt khách quan, bài hát “Em của ngày hôm qua” xuất hiện trước bài “Lạc Trôi” và bài “Lạc Trôi” xuất hiện trước bài  “Hãy trao cho anh”.

Như vậy, bạn sẽ sử dụng thẻ HTML <ol> (danh sách có thứ tự) để bao quanh toàn bộ nội dung trên và mỗi mục nhập sẽ được đặt trong một <li> (mục danh sách):

<ol>
	<li> Em của ngày hôm qua</li>
	<li> Lạc trôi</li>
	<li> Hãy trao cho anh</li>
</ol>

Nhưng nếu bạn muốn tạo một danh sách không đánh số thứ tự, thì bạn có thể sử dụng <ul>, với mỗi mục nhập là <li>, như sau:

<ul>
	<li>Em của ngày hôm qua</li>
	<li>Lạc trôi</li>
	… 
</ul>

Lợi ích của việc sử dụng danh sách ở đây là công nghệ hỗ trợ mà một số người khuyết tật cần sử dụng, web biết phải làm gì với họ. Ví dụ, một trình đọc màn hình sẽ nói điều gì đó như "Danh sách năm mục" và thường cho người dùng cơ hội để bỏ qua danh sách hoặc chuyển sang danh sách tiếp theo.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Cặp thẻ liên kết <a></a> hay còn hiểu đơn giản là thẻ chứa đường dẫn (url) đến một trang web khác hoặc chứa “id” hoặc đường dẫn nội bộ trong chính trang web đó. Một ví dụ về đường dẫn như sau:

<a href=”https://meovlog.blogspot.com/2021/11/cach-tao-bong-do-bang-css.html” rel=”dofollow”  target="_blank" >
	Cách tạo bóng đổ bằng CSS
</a>

Trong đó,

✧ href: thuộc tính chứa liên kết

✧ rel: 

→ Với “nofollow”: cho công cụ tìm kiếm Google biết rằng đây là liên kết không liên quan đến nội dung trang web, và Google bot có thể bỏ qua liên kết này.

→ Với “dofollow”: ngược lại với nofollow, dofollow cho công cụ tìm kiếm Google biết rằng đây là một liên kết đáng tin cậy, có thể dẫn robot Google đến các trang uy tín và an toàn.

✧ target="_blank": mở liên kết trong cửa sổ mới (tức là mở liên kết trên một tab mới trên trình duyệt, ko chuyển hướng trang web, làm mất cửa sổ hiện tại).

Đây là các cặp thẻ cơ bản mà bạn sẽ thường xuyên sử dụng hoặc bắt gặp chúng khi viết code bằng HTML.

<b></b> hoặc <strong></strong>: dùng để in đậm văn bản. Trong đó, <b> được hiểu theo nghĩa thông thường là in đậm, còn <strong> được hiểu là nhấn mạnh từ khóa (phù hợp với mấy bạn làm SEO).

<i></i> hoặc <em></em>: dùng để in nghiêng. Trong đó, <em> thường được dùng trong SEO.

Phân biệt HTML4 và HTML5

Đôi khi tôi thích nghĩ HTML giống như ngôn ngữ tiếng Anh. Nó khá dễ đọc, nhưng khó viết hơn nhiều — có rất nhiều điều kỳ quặc và bất thường.

Mặc dù HTML có vốn từ vựng nhỏ (chỉ cần khả năng tiếng anh ở mức cơ bản là được). Tuy nhiên, với HTML4 trở về trước, nhiều người đặt tên class để phân chia bố cục trang web bằng tiếng anh không chính xác. HTML mơ hồ có thể làm cho nội dung khó phân tích cú pháp hơn cho các công cụ tìm kiếm, các công nghệ hỗ trợ như trình đọc màn hình cho người khiếm thị và các thiết bị phi truyền thống như Apple Watch và trợ lý ảo.

Do đó, HTML5 ra đời với các cặp thẻ “ngữ nghĩa”: các thẻ mô tả nội dung bố cục trang web chính xác nhất có thể. Ví dụ như:

Để hiển thị nội dung cho phần đầu của trang web - nơi chứa logo, menu điều hướng thì với HTML4, mọi người thường sẽ viết với nhiều dạng khác nhau như: 

<div class=”header”>nội dung</div>
// hoặc
<div class=”head”>nội dung</div>
// hoặc
<div class=”phandau”>nội dung</div>
….

Như bạn thấy đó, không có bất kỳ một sự thống nhất nào để biểu thị cho đoạn code bao toàn bộ phần code khác ở đầu trang web.

Và khi HTML5 ra đời, người ta chỉ cần viết:

<header>nội dung</header>

Một cách viết thống nhất cho mọi người trên thế giới, thuận tiện trong việc phát triển web và seo.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Tương tự như trên, một số cặp thẻ ngữ nghĩa được sử dụng phổ biến như sau:

<nav></nav>: khai báo phần code cho mục menu

<section></section>: phân chia các phần tử trong trang web, gần giống như thẻ <div>

<article></article>: cho biết một phần cụ thể về nội dung như: một bài viết, một bình luận, … .

<footer></footer>: cho biết phần cuối cùng của trang web (chân trang) - nơi chứa các đường liên kết như: chính sách quyền riêng tư, điều khoản dịch vụ, … và quyền sở hữu: Được thiết kế bởi “ai đó”.

.....

Nguồn tham khảo cú pháp HTML

Mặc dù bài viết này dài nhưng chúng ta không có đủ không gian để xem qua tất cả các phần tử của HTML. Vì thế, mình sẽ đề xuất cho mọi người một vài trang web tham khảo tốt như:

★https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

★https://developer.mozilla.org/en-US/docs/Web/HTML/Element

★https://www.w3schools.com/html/default.asp

Hướng dẫn thiết kế một trang web với HTML

Ngày nay, có rất nhiều công cụ hỗ trợ việc viết mã. Tuy nhiên, mình đề xuất các bạn sử dụng Visual Studio Code cho việc code web. Lý do mình đề xuất phần mềm này vì nó là bản miễn phí, dễ cài đặt và mọi người có thể tìm đến nguồn chính thống là Microsoft để tải.

Cách cài đặt thì trên internet có rất nhiều bài viết, vậy nên mình sẽ bỏ qua phần này nhé!

1. Tạo thư mục chứa code

Tại ổ đĩa bất kỳ trên máy tính, bạn có thể tạo mới một Folder có tên là Demo HTML.

2. Mở phần mềm Visual Studio Code lên

5. Khởi tạo “khung sườn” cơ bản cho trang web

Tại file index.html, bạn gõ dấu ! và nhấn Enter để tự hệ thống tự tạo khung sườn mẫu như hình bên dưới:

Và đây là đoạn code trong hình

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
	</body>
</html>

Dòng 1. tương đương với một câu thần chú kỳ diệu để nói với trình duyệt rằng đoạn mã sắp tới là phiên bản mới nhất, tuyệt vời nhất của HTML.

Dòng 2. cho trình duyệt biết rằng nội dung chính của trang web bằng tiếng Anh. Điều này rất quan trọng đối với phần mềm dịch thuật và cả những người sử dụng trình đọc màn hình: từ “six” được phát âm rất khác nhau trong tiếng Anh và tiếng Pháp, chẳng hạn. Đối với hầu hết các ngôn ngữ, thẻ ngôn ngữ khá dễ xác định. Tổ chức, W3C, tạo ra các tiêu chuẩn mà Web dựa vào, có hướng dẫn chọn thẻ ngôn ngữ .

Dòng 3. mở ra “phần đầu” của trang web — đây là một khối thông tin về trang giúp trình duyệt xử lý đúng cách.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Dòng 4. cho trình duyệt biết rằng trang web đang sử dụng mã hóa ký tự có thể xử lý tất cả các ngôn ngữ và biểu tượng cảm xúc của con người mà bạn có thể muốn. Nếu bạn làm web tiếng Việt thì chắc chắn không thể thiếu dòng này.

Dòng 5. cho phép các tác giả web chọn phiên bản hiển thị của trình duyệt Internet Explorer. 

Dòng 6. là một câu thần chú kỳ diệu khác. Nó yêu cầu trình duyệt hiển thị trang web theo chiều rộng của thiết bị mà nó đang được hiển thị và giúp các trang web định dạng lại trên màn hình máy tính để bàn rộng và màn hình di động khi thu hẹp.

Dòng 7. là dòng duy nhất bạn nên thay đổi. <title> của trang là văn bản lần đầu tiên được đọc cho người dùng trình đọc màn hình, để đảm bảo rằng họ đang ở đúng trang.

6. Khởi chạy file index.html

Cách 2. Cũng tại giao diện Extensions, bạn gõ “Live server”, nhấn chọn đề cử liên quan nhất, và tiến hành “install”.

Sau khi cài đặt xong, trở lại giao diện file index.html, click chuột phải tại vị trí bất kỳ (xem hình), chọn 1 trong 3 cách sau:

✧ Open in default browser: mở theo trình duyệt mặc định của máy.

✧ Open in other browsers: mở trình duyệt khác (tùy chọn). Nếu trình duyệt mặc định của máy bạn là Cốc Cốc hoặc IE thì nên chọn mục này để chọn lại trình duyệt Chrome hoặc FireFox.

✧ Open with Live server: mở theo trình duyệt mặc định của máy. Tuy nhiên, mình thích cách mở này hơn. Vì mỗi khi bạn chỉnh sửa file index.html và nhấn Ctrl+S thì trình duyệt được mở bằng Live server cũng sẽ tự động thay đổi theo.

Trong khi đó, với 2 cách ở trên thì bạn phải reload (tải lại trang) để xem thay đổi mới nhất.

Trước khi thêm nội dung cho phần body, mình muốn mọi người hãy xem bố cục trang web giống như một bài văn nghị luận (cho đơn giản). Trong đó, có phần mở bài, phần thân bài và phần kết bài.

Như vậy, nếu ta có một bố cục một trang web trông như hình bên dưới. Thì phần biểu thị cho “Logo” và “Slogan” sẽ là phần mở bài. Phần menu cho đến phần hết phần “Item 8” sẽ là phần thân bài và phần cuối cùng sẽ là phần kết bài.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Tạo một lớp bao xung quanh toàn bộ trang web

Tại phần <body> mình sẽ tạo một <div> với class là “wrapper” có nhiệm vụ bao toàn bộ cả 3 phần đầu, thân và chân của trang web.

Tạo phần mở bài - phần đầu trang web

Phần nội dung đầu tiên trên trang web mẫu là Logo và đoạn biểu ngữ ở trên cùng. Điều này sẽ ở đầu mỗi trang trên trang web. Chúng ta sẽ dùng cặp thẻ <header></header> để tạo phần đầu trang. Cụ thể:

<body>
	<div class="wrapper">
		<header>
          	<div class="logo">Logo</div>
          	<div class="slogan">Slogan</div>
      	</header>
	</div>
</body>

Tạo phần thân bài

Ở phần thứ 2, chúng ta các mục riêng lẻ như menu, slider, item. Với mỗi mục sẽ được xem như là 1 khối riêng biệt. Vậy để bao toàn bộ các khối này lại với nhau hợp thành phần thân bài, ta dùng cặp thẻ <season></season> để đánh dấu.

Kế đó, chúng ta sẽ tạo menu bằng cách dùng thẻ <nav> như đã giới thiệu ở phần “phân biệt HTML4 & HTML5”, và sử dụng cặp thẻ danh sách <ul>, <li> để liệt kê các phần tử. Và dùng thẻ <a> để tạo đường dẫn cho các phần tử đó. Cụ thể:

<body>
	<div class="wrapper">
		<header>
			<div class="logo">Logo</div>
			<div class="slogan">Slogan</div>
		</header>
		<season>
			<nav>
				<ul>
					<li><a href="#">Trang chủ</a></li>
					<li><a href="#">Giới thiệu</a></li>
					<li><a href="#">Sản phẩm</a></li>
					<li><a href="#">Liên hệ</a></li>
				</ul>
			</nav>
		</season>
	</div>
</body>

Tại vị trí dấu # sẽ là nơi chúng ta điền link vào khi có.  Lúc này, khi bạn khởi chạy chương trình bạn sẽ thấy các dòng menu đều cùng nằm trên 1 hàng dọc. Nếu bạn muốn chỉnh thành hàng ngang thì phải dùng CSS. Nhưng đây là phần hướng dẫn viết HTML tốt cho người mới bắt đầu nên mình sẽ bỏ qua phần hướng dẫn viết CSS.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)

Kế tiếp, tạo một thẻ <div> thuộc một class tên là “slider” để đánh dấu vị trí cho phần slider. Và một <div> thuộc class  “item” cho phần item.

<div class="wrapper">
		// [...rút gọn phần code phía trên...]
		</nav>
    	<div class="slider">Slider</div>
    	<div class="item"></div>
    </season>
</div>

Tại phần item, ta thấy có 2 phần: phần trên từ item 1 đến 4 và phần dưới từ item 5 đến 8. Như vậy, ta tiếp tục phần chia làm 2 phần , như sau:

<div class="wrapper">
		// [...rút gọn phần code phía trên...]
    	<div class="slider">Slider</div>
    	<div class="item">
    		<div class="item1">Item 1</div>
    		<div class="item1">Item 2</div>
       		<div class="item1">Item 3</div>
        	<div class="item1">Item 4</div>
        
        	<div class="item2">Item 5</div>
        	<div class="item2">Item 6</div>
        	<div class="item2">Item 7</div>
        	<div class="item2">Item 8</div>
		</div>
	</season>
</div>

Tạo phần kết bài

Chúng ta sẽ sử dụng cặp thẻ <footer> để đánh dấu phần chân trang cho web.

<div class="wrapper">
		// [...rút gọn phần code phía trên...]
	</season>
	<footer>Footer</footer>
</div>

Kết luận

Như vậy, mình đã hướng dẫn các bạn cách tạo bố cục cơ bản cho một trang web. Việc để bố cục này trông “sinh động” như hình mẫu của mình thì chúng ta cần can thiệp CSS. Và để có thể dùng CSS dựng thành một trang web hoàn thiện chưa bao giờ là chuyện dễ dàng và có thể học một cách nhanh chóng được.

Tuy nhiên, nếu bạn đã hiểu cách dựng một layout với HTML rồi, thì bạn có thể dành toàn bộ thời gian của mình cho CSS.

(Mèo Vlog: Hướng dẫn viết HTML tốt cho người mới bắt đầu)