Bắt đầu với HTML

Bắt đầu với ngôn ngữ HTML
Bắt đầu với ngôn ngữ HTML

Hôm nay, chúng ta sẽ bắt đầu tìm hiểu những khái niệm cơ bản của ngôn ngữ HTML. Cấu trúc một tài liệu HTML cũng như cấu trúc một phần tử trong tài liệu.

HTML là gì?

HTML (Hypertext Markup Language) không phải là một ngôn ngữ lập trình. Nó là một ngôn ngữ đánh dấu được sử dụng để trình duyệt có thể hiểu được cấu trúc của trang web mà chúng ta truy cập. Một tài liệu HTML bao gồm các phần tử (element). Các phần tử này sẽ được quy định cách hiển thị khác nhau (đoạn văn bản, danh sách, in nghiêng, in đậm …vv).

Cùng với CSS và JavaScript, HTML là một trong ba thành phần quan trọng cấu tạo nên một trang web.

Ví dụ chúng ta có 1 đoạn nội dung: “Bài học đầu tiên về HTML”. Và chúng ta muốn đoạn nội dung này hiển thị một cách tách biệt, như là 1 đoạn văn ngắn. Chúng ta sẽ sử dụng tag p để bao phần nội dung này lại.

Chúng ta sẽ nhận được kết quả:

Bài học đầu tiên về HTML

Các bạn có thể dễ dàng nhận thấy, phần nội dung của chúng ta được hiển thị thành 1 đoạn độc lập, cách biệt với đoạn phía trên và phía dưới của nó.

Chú ý: Các tags trong HTML không phân biệt chữ hoa và chữ thường (case-insensitive). Nghĩa là bạn có thể viết hoa, viết thường hoặc trộn giữa hoa và thường. Các trình duyệt vẫn có thể nhận biết chính xác về chúng. Ví dụ: tag <title> có thể viết thành <title>, <TITLE> hay <Title>. Tuy nhiên, để cho nhất quán, dễ đọc và nhiều lí do khác, chúng ta sẽ quy ước luôn viết các tag này bằng chữ thường.

Cấu tạo của một phần tử HTML

Chúng ta hãy xem ví dụ về một phần tử bên dưới.

Cấu tạo của một phần tử HTML
Cấu tạo của một phần tử HTML

Một phần tử (element) gồm 4 phần chính:

  • Tag mở (opening tag): bao gồm tên của phần tử (trong trường hợp là là p – viết tắt của paragraph nghĩa là đoạn văn). Tên phần tử sẽ được bao lại bằng một cặp dấu ngoặc nhọn (angle brackets).
  • Tag đóng (closing tag): tương tự như tag mở, nhưng tag đóng có thêm một dấu gạch chéo (forward slash) phía trước tên của phần tử.
  • Nội dung: Có thể chỉ bao gồm văn bản hoặc các elements khác (trong trường hợp này chỉ gồm văn bản). Phần nội dung nằm giữa tag mở và tag đóng.
  • Phần tử: bao gồm tag mở, tag đóng và nội dung.

Các phần tử lồng nhau

Các phần tử cũng có thể nằm trong phần nội dung của một phần tử khác. Chúng ta gọi nó là các phần tử lồng nhau (nesting). Trong ví dụ trên mình muốn nhấn mạnh chữ “con Bò”. Để làm được việc đó, mình sẽ sử dụng tag strong bao phần nội dung “con Bò lại”. Lúc này ta sẽ có

Như vậy, chúng ta có phần tử “<strong>con Bò</strong>” nằm phía trong phần tử “<p>Ngày xưa có một <strong>con Bò</strong></p>”. Chuyện này hết sức bình thường và nó xuất hiện ngay từ khi HTML ra đời. Khi thao tác nhiều hơn với ngôn ngữ HTML, các bạn sẽ cảm thấy chúng rất đơn giản.

Chú ý: Thứ tự đóng mở các tag rất quan trọng. Trong ví dụ của mình, tag p mở trước tag strong. Do đó, tag strong sẽ phải đóng trước tag p. Các bạn cần chú ý thứ tự này để đảm bảo tài liệu HTML của chúng ta hiển thị đúng với ý đồ lập trình.

Block và inline

Đây là 2 danh mục quan trọng, nhằm phân loại các phần tử HTML.

Block-level: các phần tử thuộc danh mục này sẽ luôn nằm ở 1 dòng mới. Dù phía trước nó là gì và phía sau nó là gì hay cách chúng ta viết mã HTML như thế nào. Chúng ta có các tag thường gặp thuộc danh mục này như: address, article, div, footer, form, h1, h2, h3, h4, h5, h6, header, hr, li, nav, ol, ul, p, pre, table… Ví dụ chúng ta có 1 đoạn code HTML sau:

Mặc dù các phần tử được viết liền với nhau, đặt trên cùng một hàng, tuy nhiên các bạn có thể xem cách chúng hiển thị tại đây.

Inline: các phần tử này sẽ được chứa trong các phần tử block-level. Nó chỉ bao một phần nhỏ của nội dung. Các phần tử thuộc danh mục này không tạo mới các dòng. Chúng ta có các tags thường gặp thuộc danh mục này như: a, b, button, canvas, em, i, img, input, label, span, strong, sub, sup, u, video ….  Ví dụ chúng ta có 1 đoạn code HTML sau:

Các bạn có thể xem kết quả trình duyệt hiển thị tại đây.

Chú ý:

  • HTML5 tái định nghĩa lại danh mục các phần tử, bạn có thể xem chi tiết tại đây.
  • Trong CSS cũng có khái niệm về “block” và “inline”. Mặc dù đều giống nhau về mục đích, nhưng bạn cũng cần phân biệt chúng giữa HTML và CSS. HTML5 muốn bỏ đi sự lập lờ không rõ ràng này, nên đã tại định nghĩa lại các danh mục, bạn có thể xem ở phần trên.

Phần tử rỗng

Không phải tất cả các phần tử của HTML đều tuân theo cấu trúc cơ bản gồm 3 phần (tag mở, tag đóng, nội dung). Có những phần tử khá đặc biệt, chúng chỉ gồm duy nhất 1 tag. Các phần tử như vậy được gọi là phần tử rỗng (empty element). Các phần tử rỗng thường được dùng để nhúng các tài liệu tĩnh vào trang web của chúng ta. Ví dụ tag img. Để nhúng một file ảnh vào trang web của chúng ta, đoạn code HTML sau được sử dụng:

Các bạn có thể thấy, phần tử của chúng ta lúc này không có thẻ đóng và cũng không có nội dung. Nhưng nó hoàn toàn hợp lệ. Các bạn có thể xem kết quả tại đây.

Thuộc tính

Các phần tử HTML thường đi kèm với các thuộc tính, chúng sẽ trông như thế này:

Thuộc tính của một phần tử HTML
Thuộc tính của một phần tử HTML

Có thể hiểu đơn giản, thuộc tính chứa các thông tin mở rộng về phần tử. Các thông tin này không hiển thị ra bên ngoài nội dung cho người dùng. Trong trường hợp này, thuộc tính class dùng để định danh cho phần tử. Sau này các bạn có thể sử dụng các thuộc tính này cho việc thay đổi style hay một số mục đích khác.

Các thuộc tính thường có:

  • Khoảng trắng giữa các thuộc tính và giữa thuộc tính và tên phần tử.
  • Tên thuộc tính và giá trị thuộc tính. Với giá trị thuộc tính được đặt trong dấu nháy kép. Giá trị thuộc tính được gán cho tên thuộc tính bởi một đấu bằng (=).

Xét một ví dụ:

Với phần tử a, chúng ta có 3 thuộc tính

  • href: thuộc tính này đặc tả đường dẫn trang web mà chúng ta muốn trỏ đến
  • target: thuộc tính này đặc tả cách mà trình duyệt sẽ mở trang web mới. Trong trường hợp này, chúng ta gán giá trị “_blank” với mục đích định hướng trình duyệt mở trang web mới này trong một tab mới.
  • title: thuộc tính này cung cấp thêm thông tin chi tiết cho đường dẫn này. Thông tin này sẽ xuất hiện dưới dạng 1 tooltip (phần gợi ý, xuất hiện khi bạn hover chuột vào đối tượng). Ngoài ra các thông tin mở rộng này còn giúp cho các search engine hiểu rõ hơn thông tin về trang web của bạn.

Bạn có thể xem cách trình duyệt thể hiện đoạn code trên tại đây.

Thuộc tính boolean

Đôi lúc, bạn sẽ thấy những thuộc tính không có giá trị như đoạn code bên dưới.

Các thuộc tính như vầy hoàn toàn hợp lệ, các thuộc tính này được gọi là thuộc tính boolean (boolean attributes). Các thuộc tính này có giá trị trùng với tên thuộc tính. Nên chúng ta có thể viết một cách ngắn gọn như trên. Hoặc nếu muốn bạn vẫn có thể viết một cách đầy đủ.

Các vấn đề thường gặp với thuộc tính của phần tử

Khi bắt đầu làm việc với các thuộc tính, các bạn nên chú ý với các lỗi sau:

  • Chú ý về khoảng trắng giữa các thuộc tính với nhau, giữa thuộc tính và tên phần tử.
  • Các giá trị của thuộc tính cần được bao lại bằng đấu nháy đơn hoặc nháy kép (Có thể linh hoạt thay đổi khi nội dung của phần tử có chứ các ký tự đặc biệt)