HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu siêu văn bản được sử dụng để tổ chức cấu trúc và nội dung của một web page. Những nội dung đó sẽ được thể hiện dưới dạng các đoạn văn, một danh sách hoặc những bức ảnh và bảng dữ liệu,…
Cấu trúc cơ bản của một file HTML
Để rõ ràng hơn trước khi bắt đầu việc học và code HTML bạn cần nắm được cấu trúc cơ bản của nó. Đầu tiên, hãy tham khảo hình ảnh dưới đây.
Bạn có thể thấy các thành phần (element) thường được sử dụng nhất khi viết HTML bên trong hình ảnh vừa xem và bây giờ chúng ta sẽ cùng tìm hiểu tóm tắt về từng thành phần đó nhé!
HTML
Bên trong một file HTML đây được xem là thành phần “root” bởi nó bao hàm tất cả các thành phần còn lại. Để biết được bắt đầu hoặc kết thúc của một HTML document chúng ta cần dựa vào thẻ tag này. Tóm lại, đây là thành phần cực kỳ quan trọng vì chúng ta cần nó để có thể chứa tất cả các thành phần, tags và attributes khác.
Head
Bên trong Head element chứa các thông tin và các siêu dữ liệu (metadata) không được hiển thị.
Title
Bên trong tag Title là chủ đề của toàn bộ nội dung text mà các tài liệu HTML và XHTML phải có. Nó rất hữu ích trong nhiều trường hợp với mục đích thể hiện nội dung bạn muốn được biết đến, ví dụ như: Title sẽ luôn xuất hiện trên thanh Title, khi bạn thu nhỏ cửa sổ làm việc nó có thể hiện trên taskbar và khi bạn lưu một tab, nó cũng sẽ lưu mặc định bằng Title.
Lưu ý: Chúng ta chỉ sử dụng thẻ <title> một lần trong một trang web và sau đó sử dụng phần tử <title> với một tiêu đề mới khi tạo một trang khác (không nên sử dụng cùng một tên với tất cả các thẻ tiêu đề bên trong trang web của bạn).
Body
Bên trong thẻ body chứa những phần tài liệu, nội dung được hiển thị trên website.
Sau rất nhiều phiên bản được ra mắt của HTML thì HTML5 đang là phiên bản phổ biến và được sử dụng nhiều nhất.
HTML5
Ra mắt công chúng vào 22 tháng 1 năm 2008, sau đó tiếp tục là bản nâng cấp cùng các đề xuất từ W3C vào tháng 10 năm 2014, HTML5 đang là phiên bản mới nhất của HTML.
HTML5 là một phiên bản HTML hiện đại với nhiều các tính năng mới, nhiều các thuộc tính và hành động có thể thực hiện cùng với một loạt các công nghệ giúp bạn xây dựng một website hoặc ứng dụng một cách đa dạng hơn, hiệu quả hơn.
Có rất nhiều tính năng với những cú pháp mới trong phiên bản HTML5, có thể kể đến các thành phần giúp quản lý các tài nguyên đồ họa như <video>, <audio> và <canvas> cùng với sự hỗ trợ cho định dạng đồ họa vector có thể “scale” được (SVG) và cả MathML. Bên cạnh đó là các cấu trúc mới dành cho web page như <main>, <section>, <article>, <header>, <footer>, <aside>,<nav> và <figure> đã được thêm vào cùng với nhiều thuộc tính mới.
Các thành phần trong HTML (Element)
Element trong HTML là các từ có thẻ bắt đầu và thẻ kết thúc và nội dung giữa các thẻ cũng có thể gọi là element, các phần tử HTML được phân thành 2 loại:
Ví dụ:
<! DOCTYPE html>
<body>
<h1> Hello World </h1>
<p> I love my self. </p>
</body>
</html>
Ví dụ <br>, <hr>
</html>
<! DOCTYPE html>
<body>
<h1> Hello World </h1>
<p> I love <br> my self. </p>
</body>
Thuộc tính trong HTML (HTML Attributes)
Thuộc tính trong HTML là một cách để bạn tinh chỉnh các thành phần của HTML từ các chức năng mặc định cho đến các chức có thể thêm vào. Có 4 loại HTML Attributes:
Required attributes
Optional attributes
Standard attributes
Event attributes
Trong đó 2 loại thuộc tính đầu tiên thường được dùng cho một vài thành phần HTML cụ thể. Dưới đây là các thuộc tính thường được dùng nhất trong HTML:
Thuộc tính href
Thẻ <a> định nghĩa một siêu liên kết (hyperlink) và thuộc tính href để chỉ ra URL của trang được điều hướng đến:
{ <a href=”link.in”>Link Name</a> }
Thuộc tính src
Thẻ <img> được dùng để nhúng hình ảnh vào trang HTML và thuộc tính src dùng để chỉ ra đường dẫn đến hình ảnh được hiển thị:
{ <img src=”image name.image type”> }
Thuộc tính width và height
Thẻ <img> cũng chưa các thuộc tính width và height dùng để chỉ chiều rộng và chiều dài của hình ảnh (đơn vị pixels).
HTML Headings
HTML Headings là tiêu đề hoặc tiêu đề phụ được hiển thị trên webpage, được định nghĩa với các thẻ từ <h1> đến <h6>. <h1> dành cho tiêu đề có mức độ quan trọng nhất và giảm dần từ <h2>, <h3>, <h4>, <h5> cho tới <h6> cho tiêu đề ít quan trọng nhất.
HTML Styles
Thuộc tính Styles dùng để áp dụng những định dạng khác nhau cho thành phần của HTML về màu sắc, font hay là kích thước. HTML cũng có thể định dạng cả webpage thông qua việc thay đổi font, màu nền hoặc sử dụng các phương thức căn lề. Đây chính là cách để chúng ta thay đổi diện mạo và cách hiển thị cho website.
