HTML là một ngôn ngữ được sử dụng rất phổ biến nhất là trong linh vực lập trình Website, chắc hẳn bạn đã được tiếp xúc và làm quen với HTML ở đâu đó trong cuộc sống. Chính vì sự phổ biến và thông dụng của HTML lên nguồn tài liệu cung cấp kiến thức về HTML hiện nay rất phổ biến, bạn chỉ cần sợt Google thì có hàng ngàn đến hàng triệu kết quả, để phục vụ cho quá trình tìm hiểu thông tin của bạn. Trong bài viết này mình sẽ nói về một số khái niệm cơ bản mà mình nghĩ là quan trọng để bắt đầu tiếp cận tìm hiểu và sử HTML một cách chuyên nghiệp nhát.
Hãy cùng tìm hiểu HTML là gì?
HTML viết tắt của từ Huyper Text Markup Language được hiểu là ngôn ngữ đánh dấu siêu văn bản. HTML có thể nói là một ngôn ngôn ngữ được sử dụng phổ biến nhất trong lĩnh vực lập trình web.
HTML có công dụng định dạng bố cục, giúp nội dung được hiển thị trên trình duyệt thông qua các thẻ Tag. Thông thường trình duyệt sẽ không hiển thị các thẻ HTML, nhưng sẽ sử dụng chính để hiển thị nội dung ra giao diện người dùng khi truy cập vào web thông qua trình duyệt. HTML còn chứa các siêu liên kết giúp kết nối các trang web lại với nhau.
Cấu trúc 1 trang HTML gồm những gì?
Mặc định khi bắt đầu một trang Code HTML ta cần phải code phần cấu trúc cơ bản của một trang HTML gồm:
<! DOCTYPE html> Phần này có chức năng khai báo tài liệu HTML và phiên bản bạn đang sử dụng cho dự án của mình
<html></html> Định nghĩa phạm vi của trang HTML nằm bên trong Tag
<head></head> Định nghĩa những thông tin mô tả của trang Web, phần nội dung trong Tag này sẽ không hiển thị ra bên ngoài trình duyệt
<title></title> Nội dung trong Tag này sẽ là phần mô tả phần tiêu đề của trang Web
<body></body> Tag này giúp xác định phần thân của trang Web, phần nội dung trong Tag này sẽ được hiển thị ra ngoài giao diện trình duyệt
Cấu trúc Tag trong HTML (Tag HTML)
Tag (thẻ) trong HTML thường được ghi theo cấu trúc mở thẻ -> nội dung -> đóng thẻ (Ví dụ: <p> nội dung thẻ </p>) tên thẻ thường mang tính gợi nhớ và không phân biết chữ hoa với chữ thường. Nhưng để code của bạn chuyên nghiệp hơn đa số mọi người đều chọn cách viết thường, hầu như điều này đã trở thành một nguyên tắc được nhưng người lập trình đặt ra.
HTML cũng có một số Tag không có thẻ đóng, hay còn gọi lag Tag đơn, số lượng thẻ này có khá nhiều nhưng mình sẽ lấy hai ví dụ được sử dụng phổ biến nhất:
<br> hoặc </br> Tag này có chức năng ngắt dòng hiện tại và xuống dòng mới
<hr> hoặc </hr> Tag này có chức năng vẽ một đường kẻ ngang trong nội dung
Thêm tiêu đề cho nội dung HTML Heading
Tag Heading trong HTML có thể nói là một Tag rất phổ biến và quan trọng, Tag Heading sẽ giúp các bạn tạo bộ cục nội dung chuyên nghiệp hơn, ứng dụng để làm tiêu đề trang, tiêu dề bài viết hay các phân mục của một đoạn nội dung. Một trong số những công dụng rất đặc thù của Tag Heading đó là hỗ trợ SEO cho Web vì Heading chính là một trong những yếu tố ảnh hưởng lớn tới thang điểm xếp hạng của cộng cụ tìm kiếm đến một trang Web.
Tag Heading sử dụng từ <h1> đến <h6> để hiển thị phần nội dung tiêu đề của trang Web, các Tag này sẽ khác nhau về kích thước, kích thước sẽ giảm dần từ <h1> đến <h6>. Thẻ <h1> có thể nói là thẻ đặc biệt nhất theo tiêu chuẩn về SEO của Google thì 1 Page chỉ được phép có duy nhất 1 Tag <h1> và Tag này thường được dùng làm tiêu đề lớn nhất của Page hoặc bài viết.
Thuộc tính thẻ HTML
Mỗi Tag HTML đều có những thuộc tính đi kèm để hỗ trợ thiết lập thông số cho phần tử như: Màu sắc, kích thước, khoảng cách, giá trị mặc định,... Các thuộc tính được đặt trong thẻ mở dưới dạng sau: <tagname atttribut1 = "value" atttribut2 = "value"> nội dung tag </tagname>. Trong đó atttribut là tên thuộc tính, value là giá trị của thuộc tính.
Thuộc tính Style đây là một thuộc tính có chức năng rấ đặc biệt mà bạn cần phải học kỹ nếu muốn bắt đầu với HTML, giá trị của nó gồm một hoặc nhiều cặp propety.value, với property là tên thuộc tính và value là giá trị thuộc tính. Ví dụ: <tagname style="property:value; property:value"> nội dung tag </tagname>
Một số thuộc tính style quan trọng:
+ color: Xét màu cho văn bản nội dung của Tag
+ background-color: Xét màu nền cho đoạn văn bản
+ font-size: Xét kích thước cho chữ trong nội dung Tag
+ text-align: Căn lề cho phần nội dung trong Tag
Block và Inline Element
Các Tag của HTML chia làm hai loại: Tag Block và tag Inline
Tag Block: Là các Tag mà độ rộng (Width) bằng 100% so với các thành phần chứa nó, phía trước và sau Tag sẽ bị ngắt xuống dòng, có nghĩa là không có bất kỳ Tag Block hay bất cứ Tag nào nằm chúng 1 dòng. Một số tag Block như: <div>, <h1>, <p>, <li>, <hr>,...
Tag Inline: Là các Tag mà độ rộng của tag bằng phần nội dung mà thẻ đó chứa, các thẻ inline có thể nằm chung 1 dòng với nhau. Ví dụ: <a>, <span>, <img>, <i>, <b>,....
Tổng kết
Trên đây là một số kiến thức nền tảng mà mình đúc kết lại trong quá trình tìm hiểu về HTML thông qua việc học tập và tìm kiếm tài liệu trên Internet. Hãy cùng theo giõi Blog để cùng mình tìm hiểu những kiến thức ứng dụng về lập trình web hiệu quả, cảm ơn các bạn đã xem bài viết!