Sự khác nhau giữa phần tử (element) và thẻ (tag) là gì? Khi nào thi tôi nên sử dụng thẻ strong và lúc nào nên dùng thẻ bold? DOM là gì? Nếu bạn mới bước chân vào lĩnh vực thiết kế website, rào cản đầu tên bạn phải vượt qua luôn là các thuật ngữ. Vì vậy có rất nhiều thuật ngữ bạn thường gặp, nhưng ít khi được giải thích rõ ràng nên chúng thường bị bỏ qua.
Đây là loạt bài viết giới thiệu cơ bản những thuật ngữ mà bất cứ nhà thiết kế website mới vào nghề nào cũng nên đưa vào cẩm nang của mình. Đây không phải là danh sách đầy đủ các thuật ngữ nhưng sẽ là những thứ bạn sẽ thường hay gặp vướng mắc khi bắt đầu công việc thiết kế website. Khởi đầu sẽ là các thuật ngữ thuộc HTML và sau đó là CSS.
HTML & HTML5
HTML
HTML là chữ viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Để hiểu rõ hơn về thuật ngữ này chúng ta hãy cắt nó thành từng mảnh.
Hypertext (siêu văn bản)
Hypertext chỉ đơn giản là văn bản được hiển thị trên một thiết bị kỹ thuật số và sử dụng các liên kết năn động để thực hiện việc chuyển hướng dễ dàng hơn. Ví dụ, để xem được trang web này, bạn có thể nhấp vào một đoạn chữ có liên kết để chuyển hướng đến trình duyệt của bạn đế vị trí chính xác.
Markup Language (Ngôn ngữ đánh dấu)
Ngôn ngữ đánh dấu là một cách để chú thích tài liệu. Với ngôn ngữ đánh dấu chúng ta có thể biến một đoạn chữ thông thường thành một đoạn chữ được định dạng phong phú, đó là nhờ vào các cú pháp đặc biệt khai báo với trình duyệt để hiển thị thông tin và các phần tử đã được gán vào như thế nào.
Tóm lượt
Bạn hãy ghi nhớ, HTML là một cách để chú thích và sau đó định dạng tài liệu để hiển thị dựa vào phần lớn hệ thống có các liên kết trên chữ. Đây là nền tảng các hoạt động của web.
HTML5
HTML5 đúng như tên gọi của nó, đó là phiên bản kế thừa của HTML lần thứ 5. HTML5 được xem như là sự thay thế của HTML 4.01 và XHTML 1.1, vì vậy khi tham chiếu ngôn ngữ HTML5 thì bạn nên hiểu đó chính là các cú pháp HTML mới.
HTML5 mang đến hàng loạt tính năng mới, sự thay đổi các phần tử (element) và cú pháp (syntax) cho HTML, có rất nhiều khó mà liệt kê đầy đủ ở đây. Một số thứ bạn có thể thường thấy như phần tử canvas dùng để dựng hình đồ họa, tài liệu đơn giản hóa mới, khả năng nhúng video mà không cần plugin như Flash và các API mới dành cho các nhà phát triển ứng dụng web.
Để tìm hiểu thấu đáo về HTML5, bạn có thể tham khảo các tài liệu sau:
Ngữ nghĩa học (Semantic)
Ngữ nghĩa học HTML
Khi bắt đầu vào nghề thiết kế web, bạn sẽ đối mặt với cụm từ này hàng ngày và nó sẽ khiến bạn rối trí. Ngữ nghĩa của web đơn giản là thứ giúp mọi việc tốt đẹp hơn.
Về cơ bản, khái niệm cốt lõi, các markup (đánh dấu) của bạn cần truyền đạt càng nhiều ý nghĩa càng tốt. Để thực hiện điều này, bạn nên sử dụng các phần tử (element) đúng vai trò của nó và theo cách giao tiếp rõ ràng với bất cứ ai, bất cứ thứ gì đang đọc dòng code của bạn viết.
Ví dụ, trước đây các nhà thiết kế web thường tạo cấu trúc các trang web bằng cách sử dụng table. Vấn đề nằm ở chổ, phần tử table có mục đích riêng của nó: dùng để trình bày các thông tin theo dạng bảng (thí dụ như bảng giá hay các bảng so sánh tính năng). Khi bạn thấy thẻ <table> được sử dụng, bạn sẽ ngay lập tức nghĩ đến dữ liệu bảng bên trong. Tuy nhiên, khi cả toàn bộ site được đặt trong một table, phần tử này không còn mang tính chất ngữ nghĩa của chính nó.
Một trong những điều tuyệt vời mà HTML5 mang lại cho chúng ta đó là các phần tử có ngữ nghĩa rất rõ ràng. Mô tả một trang web cơ bản theo trình tự. Thậm chí nếu bạn chưa quen thuộc với HTML, sẽ có rất nhiều thứ mà phần lớn bạn có thể hiểu theo trình tự của tài liệu.
;
div
Chúng ta đang nói về chủ đề ngữ nghĩa học trong thiết kế web, do vậy chúng ta sẽ thảo luận tiếp về một trong những phần tử gây tranh cãi nhiều nhất chỉ sau table, đó là div. Nếu bạn nhìn vào mã nguồn của một trang HTML, chắc chắn là bạn sẽ thấy div ở mọi nơi. Vậy div là cái thứ gì vậy nhỉ?
Thuật ngữ “div” là chữ viết tắt của “division” (phân chia). Nếu bạn cho rằng nó có một chút mơ hồ, bạn đã đúng. Trong thực tế, mục đích của phần tử div khá mơ hồ. Div cơ bản là một vật chứa (container) thông thường cho các khối nội dung mà nói về mặt nào đó, không thể mô tả được theo cấp ngữ nghĩa.
Điều này sẽ dẫn đến ý nghĩ cho rằng div là thứ phi ngữ nghĩa, có nghĩa rằng bản thân div không hề truyền đạt một ý nghĩa nào. Do đó, nếu xét theo các nguyên tắc được nêu trong các định nghĩa trước đó, div nên được sử dụng càng ít càng tốt, ít nhất về lý thuyết là vậy. Trên thực tế, các nhà phát triển web thường sử dụng nó một cách hào phóng.
Chúng rất linh hoạt và hữu dụng để tạo ra cấu trúc dễ dàng khi kết hợp với CSS, nên div được sử dụng rất phổ biến. Tuy nhiên, nếu có thể, bạn nên luôn đặt mục tiêu đến một thứ gì đó mang nhiều ngữ nghĩa. Ví dụ hãy xem xét các khối mã sau, nó khá phổ biến trước khi HTML5 ra đời.
some content
Đối với ID, chúng ta đã diễn giải một số nghĩa nào đó nhưng bản thân div vẫn là một thứ chung chung, một thứ gì đó khó hình dung được. Với HTML5, chúng ta có thể loại bỏ div ở đoạn code trên để sử dụng phần tử header mang nhiều ngữ nghĩa hơn
some content
em vs. italic and strong vs. bold
Điều này thật sự khó, đặc biệt là bởi vì HTML5 đã thay đổi một chút nội dung ngữ nghĩa đối với những phần tử này. Bắt đầu từ em vs italic
Chú thích kỹ thuật của phần tử italic viết rằng nó được áp dụng lên chữ nhằm “tách biệt nó ra khỏi nội dung xung quanh mà không mang ý nghĩa nhấn mạnh hoặc quan trọng và áp dụng theo cách trình bày typography thông thường là chữ nghiêng”
Điều mấu chốt là phần tử italic không mang ý nghĩa phụ là nhấn mạnh, trong khi đó thẻ em rõ ràng là có. Nói một cách đơn giản, nó giống như sự khác nhau khi ta lên hay xuống giọng khi nói một từ nào đó.
Ví dụ nó được sử dụng trong các trường hợp bao gồm sự xác định phân loại. một thuật ngữ kỹ thuật, một cụm từ thành ngữ ở ngôn ngữ khác, một suy nghĩ hoặc tên riêng …
I bade them all adieu and left as quickly as possible.
Ngược lại, phần tử em được được sử dụng có kèm theo sự nhấn mạnh. Ở đây chúng ta thật sự đang cố gắng giải thích về nội dung của phần tử này khác biệt với phần còn lại trong một câu.
I already told you that didn't I?
Tiếp đến, phần tử bold cũng có một sự thay đổi về ý nghĩa để có sự xác định tương tự phần tử italic ” tách biệt nó với nội dung xung quanh nhưng không mang ý nghĩa nhấn mạnh hay quan trọng, và áp dụng cho sự trình bày typography thông thường đó là các chữ in đậm”
Một lần nữa, chúng ta thấy mấu chốt là chúng ta không thêm vào sự nhấn mạnh, chỉ là theo cách typography thông thường, ví dụ như một kịch bản có thể in đậm tên các nhân vật.
John: "Come on, Yoko isn't that bad."
Nói một cách khác, bạn nên dùng strong khi cần truyền đạt ý nghĩa thật sự quan trọng. Ví dụ, các thông điệp cảnh báo thường sử dụng quy tắc này
Danger: If there are rocks ahead, we'll all be dead!
Với strong thậm chí bạn có thể áp dụng các phần tử lồng vào nhau để nâng tầm quan trọng
Danger: If there are rocks ahead, we'll all be dead!
Để tìm hiểu thêm 4 phần tử này, bạn nên tìm hiểu thêm ở website HTML5 Doctor, nơi có phần giải thích mở rộng về các thay đổi được thực hiện trong HTML5 và làm thế nào để sử dụng nó.
Thuộc tính (Attributes)
Class vs. ID
Một trong những sự khác biệt quan trọng nhất mà bạn cần nắm bắt rõ nếu bạn là nhà thiết kế web front end đó là class và ID. Hãy xem xét hai đoạn code bên dưới, bạn có hiểu chúng khác nhau như thế nào không?
Thật may mắn, sự khác biệt thật sự dễ hiểu: ID là độc nhất và class có thể tái sử dụng. Ví dụ sau đây không hợp lệ vì có cùng một ID trên 2 phần tử khác nhau trên cùng một trang.
Lorem ipsum…
Lorem ipsum…
Để sửa chữa, chỉ cần đổi ID thành class. Một class có thể áp dụng lên nhiều phần tử khác nhau như bạn muốn. Áp dụng class đó trong CSS sẽ giúp bạn có thể định dạng hàng loạt các phần tử cùng lúc.
Lorem ipsum…
Lorem ipsum…
Như những gì đã nói ở trên, có vẻ chúng ta sẽ không bao giờ cần đến ID, thay vì đó luôn sử dụng class bởi vì nó linh động hơn. Lý lẽ khá rõ ràng, nhưng thật sự bạn vẫn cần đến ID ở một số trường hợp.
Những thuật ngữ khác
Phần tử (Elements) vs. Thẻ (Tags)
Sự khác biệt này dường như không phải thứ quan trọng trong thế giới web. Hơn nữa , rất nhiều người trong số các lập trình viên sử dụng các thuật ngữ này lẫn lộn với nhau. Tuy nhiên, có một sự hiểu biết đúng đắn về cấu trúc cơ bản HTML là nền tảng của học thuật web vững chắc. Có thể như chúng ta hơi nghiêm trọng vấn đề này, nhưng thật sự hai thuật ngữ này là những thứ khác biệt.
Để minh họa, hãy bắt đầu từ cấp thấp nhất. Ví dụ dưới là thẻ mở của một list item (một mục trong danh sách liệt kê)
Bạn thân chúng, mỗi thứ là một thẻ. Tuy nhiên, chúng không phải là phần tử (element). Đây mới là phần tử của một list item đúng nghĩa.
Chính xác HTML bao gồm các phần tử và phần tử gồm có thẻ và nội dung. Nói chung, một phần tử bao gồm một thẻ mở, nội dung và một thẻ đóng, một số thẻ vừa mở và tự đóng ( thí dụ <br />, <hr />) nên chúng sẽ một chút khác biệt.
DOM
Đây là thứ nhiều bạn hay nhầm lẫn khi bắt đầu tập viết code HTML. Bạn thường xuyên nghe đến “DOM” và nghĩ rằng đó là một thuật ngữ gì đó liên quan đến kỹ thuật khiến bạn khó nuốt trôi. điều hiển nhiên là bạn phải hiểu về DOM, nhưng nó thật sự là thứ gì ? DOM là chữ viết tắt của Document Object Model (Mô hình Đối tượng Tài liệu).
Thật ra, DOM cũn không phải quá kho hiểu. Ở cấp độ cơ bản nhất, nó đơn giản tham chiếu đến cấu trúc của một trang web và cung cấp các phương thức rõ ràng cho nhận biết và tham chiếu từng thành phần.
Mặt khác DOM là một cây phân cấp của một trang web. Tại đỉnh bạn có một tài liệu, từ đó mở rộng xuống phần tử gốc (root) HTML và sau đó đến các phần tử head và body. Nếu bạn xem xét phần tử body trong hình minh họa dưới đây, chúng có thể nhận thấy các nhánh vươn đến các phần tử khác ở cấp thấp hơn, mỗi phần tử có nội dung là chính nó và các phần tử con.
Chúng ta tạm xem các mối quan hệ trong sơ đồ DOM giống như cây phả hệ (family tree). Nếu một phần tử ở dưới cấp một phần tử khác, thì nó được xem như là con (child), trên nó là cha mẹ (parent). Nếu cả hai phần tử trực tiếp được chia ra từ nhánh cha mẹ, chúng sẽ có mối quan hệ anh em (siblings).
Cấu trúc này cho ta một giao diện để tương tác với các phần tử xác định thông qua trang web. Ví dụ, trong JavaScript hay ngay cả HTML, bạn có thể vận dụng kiến thức về DOM để nhắm đến phần tử con đầu tiên (first-child) của một bản danh sách không thứ tự unordered list, đó cũng chính là phần tử li đầu tiên thuộc phần tử ul
Định nghĩa trên thật sự là phiên bản đơn giản nhất để hiểu về DOM. Khi bạn đã có những hiểu biết sâu rộng để hiểu làm thế nào DOM xác định cấu trúc những tài liệu HTML, bạn có thể đi sâu với những định nghĩa phức tạp hơn. Bạn có thể tham khảo thêm định nghĩa về DOM của W3C để có những thảo luận chuyên sâu hơn nữa.
Ở đây bạn sẽ thấy DOM được tham chiếu như là một chương trình API cho các tài liệu để định nghĩa một cấu trúc đối tượng. Bạn cũng sẽ thấy rằng API này chứa vô số các modules, như CSS và các MouseEvents (các sự kiện dựa trên tháo tác của chuột), có thể thực thi theo vô số cách.
Khối và phần tử nội tuyến (Block vs. Inline Elements)
Khi bạn tạo ra các phần tử trong HTML và xác định style (kiểu, định dạng) trong CSS, bạn sẽ thấy rằng trình duyệt biên dịch các phần tử khác nhau theo nhiều cách khác nhau trên cùng một layout.
Khi bạn tạo một phần tử cấp độ khối (block-level), như một đoạn văn bản (paragraph) hay một div, nó sẽ xuất hiện thêm một dòng trên trang tài liệu. Vì vậy nếu bạn tạo ra ba khối văn bản, nó sẽ xuất hiện xếp chồng lên nhau theo hàng ngang chứ không phải thành từng cột. Sự khác biệt ở đây, các phần tử cấp độ khối (block-level) có thể được xác định chiều ngang và chiều cao.
Một phần tử nội tuyến (inline element), nói một cách khác được đặt trên cùng một dòng nội dung ở vị trí trước hoặc sau. Ví dụ, nếu bạn thêm một phần tử strong vào trong một đoạn văn bản (paragraph), nó sẽ không tạo thêm một dòng mới mà sẽ nằm trên cùng một dòng đoạn văn bản, các phần tử nội tuyến có chiều ngang và chiều cao tùy thuộc vào nội dung bên trong nó, không xác định được các giá trị cụ thể.
Bạn có thể tham khảo thêm bài viết về block, inline và float để tìm hiểu thêm
Thay đổi tính chất
Bằng cách sử dụng thuộc tính display trong CSS bạn có thể thay đổi tính chất của những phần tử nhất định. Ví dụ, ta có một phần tử a (anchor), mặc định đây là phần tử nội tuyến, nhưng ta có thể khai báo với trình duyệt để nó trở thành phần tử cấp độ khối. Sau đó ta có thể gán cho nó chiều cao và chiều rộng mà đáng một phần tử nội tuyến không thể có được.
a {
display: block;
background: #eee;
height: 50px;
width: 200px;
}
Tóm lược
Đây chỉ là những ghi chú sơ lược về các phần tử thường làm bạn nhầm lẫn trong quá trình bắt đầu học về HTML. Hy vọng những kiến thức cơ bản này sẽ giúp bạn có những hiểu biết vững chắc về cấu trúc HTML và các phần tử của nó, chắc chắn điều đó sẽ giúp ích cho bạn ở giai đoạn chuyên sâu sau này.
Biên dịch theo Web Design Vocabulary Refresh | designshack.net
