Tò mò về “Làm Wedsite” mà chưa biết HTML là gì? Đọc ngay!
Bạn có bao giờ tự hỏi mấy cái trang web mà mình lướt hàng ngày – từ Facebook, Zalo cho đến mấy trang báo mạng – được tạo ra từ cái gì chưa? Bí mật bật mí nè: chính là HTML đó!
Nghe “lập trình” có vẻ ghê gớm, nhưng HTML “dễ ẹt” à nha! Nó còn “thân thiện” hơn cả crush của bạn nữa đó! Bài viết này sẽ giúp bạn hiểu rõ HTML là gì, hoạt động ra sao, học có “mệt” không, và quan trọng nhất: HTML giúp “wedsite” của bạn “leo top” Google kiểu gì.
HTML là gì? Giải thích kiểu “dân thường”
HTML là viết tắt của HyperText Markup Language – dịch nôm na là “ngôn ngữ đánh dấu siêu văn bản”. Nghe tên thấy “hack não” vậy thôi, chứ đây là ngôn ngữ “căn bản nhất quả đất” để tạo nên một trang web đó nha!
Bạn cứ tưởng tượng HTML như cái khung xương của một ngôi nhà vậy đó. Cột, kèo, mái, tường… HTML định hình vị trí các phần trên web. Còn nội thất (hình ảnh, chữ viết, video…) là những thứ bạn muốn “khoe” cho người ta xem. Trình duyệt (Chrome, Cốc Cốc, Safari) chính là anh thợ xây đọc bản vẽ HTML và “biến hóa” thành trang web hoàn chỉnh.
Giống như xây nhà, HTML không có nhiệm vụ làm cho nhà đẹp lung linh (việc đó để CSS lo), cũng không lo chuyện cửa tự đóng mở hay đèn tự sáng (JavaScript cân tất). HTML chỉ cần dựng cái khung cho nó “ra ngô ra khoai” trước đã.
HTML hoạt động “kỳ diệu” như thế nào?
HTML dùng các thẻ (tags) để “nói chuyện” với trình duyệt. Ví dụ:
- “Ê, đây là tiêu đề nha!”
- “Cái này là hình ảnh đó!”
- “Đây là đoạn văn mà người ta sẽ đọc nè!”
Mỗi thẻ giống như một cái nhãn dán, giúp trình duyệt biết cách hiển thị nội dung cho đúng ý bạn.
Một vài thẻ “quen mặt” nè:
<h1>: Tiêu đề chính của trang (chỉ nên dùng 1 lần thôi nha!).<h2>,<h3>: Tiêu đề phụ (dùng thoải mái để chia nhỏ nội dung).<p>: Đoạn văn (nơi bạn “tâm sự” với độc giả).<img>: Hình ảnh (để trang web thêm sinh động).<a>: Đường dẫn (link tới các trang web khác).<div>: Một cái hộp để “gom” các nội dung lại với nhau (giúp trang web gọn gàng hơn).
Thẻ HTML thường đi theo cặp: <p>Đây là một đoạn văn bản.</p>
- Thẻ mở:
<p> - Thẻ đóng:
</p> - Nội dung nằm ở giữa.
Code HTML cơ bản nhìn “ngồ ngộ” ra sao?
<html>
<head>
<title>Trang đầu tiên của tui</title>
<meta name="description" content="Trang web đầu tay - chia sẻ đam mê HTML">
</head>
<body>
<h1>Chào mừng bạn đến với HTML!</h1>
<p>Mình đang học HTML và thấy thú vị quá trời!</p>
<img src="meo-cute.jpg" alt="Hình ảnh mèo dễ thương">
<a href="https://google.com">Bấm vào đây để đi đến Google</a>
</body>
</html>Giải thích nhanh:
<html>: Bao bọc toàn bộ trang web.<head>: Phần hậu trường, không hiển thị ra ngoài nhưng cực kỳ quan trọng với SEO.<body>: Nội dung chính – thứ bạn nhìn thấy trên màn hình.<title>&<meta>: Thẻ dùng để tối ưu SEO.<h1>,<p>,<img>,<a>: Các thành phần quen thuộc như tiêu đề, văn bản, hình ảnh và đường link.
Học HTML có “khoai” không?
Thật ra là KHÔNG HỀ! Trong các ngôn ngữ làm web, HTML thuộc hàng “dễ xơi” nhất đó nha. Bạn không cần phải là dân lập trình siêu đẳng, chỉ cần “nắm vững” vài thẻ cơ bản là có thể bắt đầu “xây” trang web của riêng mình rồi.
Chỉ cần vài tiếng đồng hồ là bạn đã có thể “làm” được một trang giới thiệu bản thân, một blog đơn giản hoặc một trang giới thiệu sản phẩm. Và tin mình đi, bạn sẽ cảm thấy “phê” lắm khi nhìn thấy thành quả của mình “hiện nguyên hình” trên trình duyệt đó!
HTML và SEO: “Cặp đôi hoàn hảo”
SEO (Search Engine Optimization) là “chiêu” để trang web của bạn “lên hương” trên Google khi ai đó tìm kiếm từ khóa liên quan. Và bạn biết không? HTML chính là “nền tảng” giúp SEO hoạt động hiệu quả đó!
Dưới đây là 7 cách HTML ảnh hưởng trực tiếp đến SEO:
Thẻ Tiêu Đề: “Bản đồ” cho Google
Dùng các thẻ như
<h1>,<h2>,<h3>giúp Google hiểu nội dung của bạn.<h1>là tiêu đề chính – chỉ nên có một trên mỗi trang thôi nha.Ví dụ:
<h1>Cách chăm sóc mèo con</h1>sẽ “thì thầm” với Google: “Trang này nói về việc nuôi mèo con đó nha!”Thẻ alt trong hình ảnh: Cho Google “ngắm” hình
Google đâu có “mắt” mà thấy được hình ảnh, nó chỉ “đọc” được chữ thôi. Nên bạn cần “dùng” thuộc tính
alttrong thẻ<img>để mô tả nội dung bức ảnh.Ví dụ:
<img src="meo.jpg" alt="Mèo tam thể đáng yêu đang ngủ">. Nếu ai đó tìm “mèo tam thể đáng yêu” thì hình của bạn có cơ hội “chiếm sóng” trên Google Hình Ảnh đó!Thẻ meta: Giúp web bạn “tỏa sáng” khi tìm kiếm
<title>: Hiển thị trên tab trình duyệt và trên Google.<meta name="description">: Là dòng mô tả ngắn bên dưới link trong kết quả tìm kiếm. Viết cho hay vào thì người ta mới “click” nhiều hơn – tăng lượt truy cập đó nha!
Dùng HTML “ngữ nghĩa” (Semantic HTML)
Các thẻ như
<header>,<nav>,<section>,<article>,<footer>giúp bạn sắp xếp nội dung rõ ràng hơn cho Google. Giống như việc dán nhãn: “Đây là phần menu”, “Đây là bài viết”, “Đây là chân trang”,…HTML gọn gàng = Trang web tải nhanh
Viết HTML sạch sẽ, không thừa thãi sẽ giúp trang web tải nhanh hơn. Mà Google thì “mê tít” mấy trang web nhanh nhẹn lắm đó! Trang web nhanh = Điểm cộng SEO + Giữ chân người dùng lâu hơn.
Thẻ liên kết
<a>: Điều hướng thông minhDùng link nội bộ để dẫn người đọc sang các bài khác trong web của bạn. Dùng link ngoài để dẫn đến các nguồn uy tín. Thêm
rel="nofollow"khi không muốn Google “theo” link (ví dụ như link quảng cáo).Khai báo ngôn ngữ rõ ràng
Thêm thuộc tính
lang="vi"vào thẻ<html>để “báo cáo” với Google rằng trang này viết bằng tiếng Việt. Điều này giúp Google hiểu ngôn ngữ của bạn và hiển thị đúng với người dùng phù hợp.
Mẹo “nhỏ mà có võ” để HTML của bạn chuẩn SEO
- Dùng 1 thẻ
<h1>duy nhất, và nên có từ khóa chính trong đó. - Viết
altmô tả hình ảnh rõ ràng, chứa từ khóa nếu hợp lý. - Tối ưu
meta titlevàmeta description– đừng quá dài, đừng nhồi nhét từ khóa. - Sử dụng thẻ semantic đúng cách.
- Đảm bảo HTML không bị lỗi, có thể dùng công cụ W3C Validator để kiểm tra.
- Dẫn link nội bộ tới những bài viết liên quan để giữ chân người đọc lâu hơn.
- Đừng “tham lam” nhồi nhét thẻ, hãy giữ mọi thứ gọn gàng và hợp lý.
Kết luận: HTML – Càng “bình dân”, càng “xịn”
HTML là “bước khởi đầu” bạn cần biết nếu muốn “lấn sân” sang lĩnh vực làm web. Nó không hề “khó nhằn”, thậm chí còn rất thú vị và dễ làm quen. Chỉ cần một trình soạn thảo văn bản (như Notepad hoặc VS Code), bạn đã có thể tạo ra một trang web “tự chế” và dần dần nâng cao tay nghề.
Và nếu bạn đang “để ý” đến SEO – thì HTML là “trợ thủ đắc lực” không thể thiếu. Từ tiêu đề, mô tả, hình ảnh cho đến cấu trúc trang, tất cả đều được “gửi gắm” qua HTML để Google đọc và hiểu.
Vậy thì còn chần chờ gì nữa? Hãy mở trình soạn thảo, gõ vài dòng HTML đầu tiên, lưu lại thành .html, mở bằng trình duyệt và “tận hưởng” niềm vui khi thấy đứa con tinh thần đầu tiên của mình “lên sàn” thôi nào!
Cần hỗ trợ gì thêm? Nhắn mình liền nha!
