Giới Thiệu Về Thuộc tính và Thẻ a HTML
Thẻ <a> HTML (Anchor Element) là gì?
Thẻ <a> là một phần tử HTML cho phép bạn tạo liên kết đến các trang web khác, các vị trí khác nhau trong cùng một trang, tệp tin, địa chỉ email, hoặc bất kỳ URL nào khác. Nó là một trong những yếu tố cơ bản nhất của web, cho phép người dùng đi đến và khám phá các nội dung trên internet một cách dễ dàng.
Cấu trúc cơ bản của thẻ <a>:
<a href="URL">Văn bản hiển thị</a>Trong đó:
<a>: Thẻ mở của phần tử anchor.href: Thuộc tính quan trọng nhất của thẻ<a>, chỉ định địa chỉ URL mà liên kết sẽ trỏ đến.URL: Địa chỉ trang web, tệp tin, hoặc vị trí mà bạn muốn liên kết đến.Văn bản hiển thị: Đoạn văn bản mà người dùng sẽ thấy và nhấp vào để truy cập liên kết.</a>: Thẻ đóng của phần tử anchor.
Ví dụ:
See the Pen
Thẻ a HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.
<a href="https://niemvuilaptrinh.com">Truy cập trang Niềm Vui Lập Trình</a>Trong ví dụ này, người dùng sẽ thấy dòng chữ “Truy cập trang Niềm Vui Lập Trình”. Khi họ nhấp vào dòng chữ này, trình duyệt sẽ chuyển hướng họ đến trang chủ của mình nhé.
Các loại địa chỉ liên kết (URL)
Có hai loại địa chỉ liên kết chính mà bạn có thể sử dụng trong thuộc tính href:
Địa chỉ tuyệt đối (Absolute URL):
Là địa chỉ đầy đủ của một trang web, bao gồm cả giao thức (ví dụ: http:// hoặc https://) và tên miền.
- Ví dụ: https://www.facebook.com, https://vnexpress.net/thoi-su
- Sử dụng khi bạn muốn liên kết đến một trang web nằm trên một tên miền khác.
Địa chỉ tương đối (Relative URL):
Là địa chỉ được chỉ định dựa trên vị trí hiện tại của trang web đang chứa liên kết.
- Ví dụ: about.html, images/logo.png, ../contact.html
- Sử dụng khi bạn muốn liên kết đến một trang web hoặc một tập tin nằm trên cùng một tên miền với trang web hiện tại.
Ví dụ về địa chỉ tương đối
Giả sử bạn có cấu trúc thư mục như sau:
mywebsite/
├── index.html
├── about.html
└── images/
└── logo.png
Trong trang index.html, để liên kết đến trang about.html, bạn sẽ sử dụng địa chỉ tương đối:
<a href="about.html">Giới thiệu</a>
Trong trang index.html, để liên kết đến hình ảnh logo.png, bạn sẽ sử dụng địa chỉ tương đối:
<a href="images/logo.png"> <img src="images/logo.png" alt="Logo"> </a>
Liên kết đến một vị trí cụ thể trên trang
Đôi khi, bạn muốn tạo một liên kết để đưa người dùng đến một phần cụ thể của trang web, thay vì chỉ đơn thuần là tải lại trang. Để làm điều này, bạn cần sử dụng một kỹ thuật gọi là “anchor links” (liên kết neo).
Cách thực hiện:
- Xác định vị trí đích: Gán một ID duy nhất cho phần tử HTML mà bạn muốn liên kết đến.
<h2 id="section2">Phần 2: Nội dung quan trọng</h2> - Tạo liên kết: Sử dụng thẻ
<a>với thuộc tínhhreftrỏ đến ID đã gán, kèm theo dấu#ở phía trước.<a href="#section2">Đi đến Phần 2</a>
See the Pen
Tạo liên kết các nội dung HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Khi người dùng nhấp vào “Đi đến Phần 2”, trình duyệt sẽ tự động cuộn xuống phần tử có ID là section2.
Liên kết đến địa chỉ email
Bạn cũng có thể sử dụng thẻ <a> để tạo liên kết mở trình soạn thảo email của người dùng và tự động điền địa chỉ người nhận.
Cú pháp:
<a href="mailto:dia_chi_email">Gửi email cho tôi</a>Ví dụ:
<a href="mailto:niemvuilaptrinh@example.com">Liên hệ hỗ trợ</a>Khi người dùng nhấp vào “Liên hệ hỗ trợ”, trình duyệt sẽ mở trình soạn thảo email mặc định của họ và tự động điền địa chỉ support@example.com vào trường “To”.
Bạn cũng có thể thêm các tham số khác vào liên kết mailto, chẳng hạn như chủ đề (subject) và nội dung (body) của email:
<a href="mailto:niemvuilaptrinh@example.com?subject=Yêu cầu hỗ trợ&body=Tôi có một vấn đề...">Liên hệ hỗ trợ</a>Mở liên kết trong tab mới
Đôi khi, bạn muốn liên kết mở ra trong một tab hoặc cửa sổ mới, thay vì thay thế trang hiện tại. Để làm điều này, bạn có thể sử dụng thuộc tính target với giá trị _blank.
See the Pen
Mở liên kết trong tab mới by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Khi người dùng nhấp vào liên kết này, trang niemvuilaptrinh sẽ mở ra trong một tab mới, trong khi trang web hiện tại vẫn được giữ nguyên.
Một số lưu ý khác về thẻ <a>
- Văn bản liên kết (link text): Sử dụng văn bản liên kết mô tả rõ ràng nội dung của trang đích. Tránh sử dụng các cụm từ chung chung như “nhấp vào đây”.
- Inline element: Thẻ
<a>là một inline element, có nghĩa là nó không tự động tạo ra một dòng mới trước hoặc sau nó. Nếu bạn muốn một liên kết hiển thị trên một dòng riêng, bạn có thể sử dụng CSS để thay đổi thuộc tínhdisplaycủa nó thànhblockhoặcinline-block. - Luôn cung cấp thuộc tính
href: Nếu không có thuộc tínhhref, thẻ<a>sẽ không hoạt động như một liên kết.
Các thuộc tính quan trọng khác của thẻ <a>
rel: Chỉ định mối quan hệ giữa trang hiện tại và trang được liên kết đến. Một số giá trị phổ biến của rel bao gồm:
nofollow: Thường được sử dụng cho các liên kết đến các trang web mà bạn không tin tưởng hoàn toàn.noopener: Ngăn trang được liên kết đến truy cập vào đối tượngwindow.openercủa trang hiện tại. Giúp cải thiện bảo mật.noreferrer: Ngăn trình duyệt gửi thông tin về trang hiện tại (ví dụ: URL) đến trang được liên kết đến.
download: Chỉ định rằng trình duyệt nên tải xuống tệp tin được liên kết đến thay vì mở nó. Bạn có thể chỉ định tên tệp tin bằng cách sử dụng giá trị của thuộc tính download.<a href="resume.pdf" download="my_resume.pdf">Tải xuống sơ yếu lý lịch của tôi</a>
Thuộc tính (Attributes) trong HTML
Như bạn đã thấy trong ví dụ trên, href là một thuộc tính của thẻ <a>. Vậy thuộc tính là gì nhỉ? Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé.
Định nghĩa:
Thuộc tính HTML là các giá trị bổ sung được thêm vào thẻ mở của một phần tử HTML để cung cấp thêm thông tin hoặc điều chỉnh hành vi của phần tử đó. Nghe hơi khó hiểu nhỉ. Bây giờ bạn hãy xem cấu trúc của nó rồi mình sẽ giải thích chi tiết trong phần ví dụ nhé!
Cấu trúc của một thuộc tính:
<tên_thẻ tên_thuộc_tính="giá_trị_thuộc_tính">Trong đó:
tên_thẻ: Tên của phần tử HTML (ví dụ:a,img,div,p,…).tên_thuộc_tính: Tên của thuộc tính mà bạn muốn thêm (ví dụ:href,src,class,id,…).giá_trị_thuộc_tính: Giá trị mà bạn gán cho thuộc tính (ví dụ:"https://niemvuilaptrinh.com","hình_ảnh.jpg","tên-class","tên-id",…).
Ví dụ:
<img src="anh-dep.jpg" alt="Ảnh phong cảnh" width="500">Bạn có thể thấy ở đây chúng ta có 3 thuộc tính trong thẻ hình ảnh:
src: Chỉ định đường dẫn đến tệp hình ảnh (anh-dep.jpg).alt: Cung cấp văn bản thay thế cho hình ảnh nếu hình ảnh không hiển thị được (Ảnh phong cảnh).width: Chỉ định chiều rộng của hình ảnh là 500 pixel.
Tại sao chúng ta cần sử dụng thuộc tính HTML?
Thuộc tính cho phép bạn:
- Điều chỉnh hành vi của phần tử: Ví dụ, thuộc tính href của thẻ <a> quyết định nơi đến của liên kết.
- Cung cấp thông tin bổ sung: Ví dụ, thuộc tính alt của thẻ <img> cung cấp thêm mô tả cho hình ảnh.
- Áp dụng kiểu dáng và định dạng: Ví dụ, thuộc tính class và id cho phép bạn gắn các lớp CSS hoặc ID vào phần tử để áp dụng CSS.
- Tương tác với JavaScript: Thuộc tính có thể được sử dụng để tương tác với các đoạn mã JavaScript, cho phép bạn tạo ra các trang web động và hiệu ứng.
Các loại thuộc tính trong HTML
Trong HTML, có hai loại thuộc tính chính:
Thuộc tính đặc trưng (Specific Attributes):
Là các thuộc tính chỉ áp dụng cho một số phần tử HTML nhất định và không thể dùng cho các phần tử khác. Ví dụ:
href: Chỉ dùng cho thẻ <a>.src: Dùng cho thẻ <img>, <script>, <iframe>,…alt: Dùng cho thẻ <img>.width,height: Dùng cho thẻ <img>, <video>,…
Thuộc tính toàn cục (Global Attributes):
Là các thuộc tính có thể được sử dụng trên bất kỳ phần tử HTML nào. Ví dụ:
class: Dùng để gán một hoặc nhiều lớp CSS cho phần tử.id: Dùng để gán một ID duy nhất cho phần tử.style: Dùng để thêm các kiểu dáng CSS trực tiếp vào phần tử.title: Dùng để cung cấp một đoạn văn bản hiển thị khi người dùng di chuột qua phần tử.draggable: Xác định xem phần tử có thể kéo được hay không.hidden: Ẩn phần tử khỏi hiển thị.lang: Chỉ định ngôn ngữ của nội dung phần tử.
Ví dụ:
See the Pen
Thuộc tính trong HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Tổng kết
Trong bài học này, chúng ta đã tìm hiểu về thẻ <a> (anchor element) và thuộc tính (attributes) trong HTML. Bạn hãy cố gắng thực hành thật nhiều để nắm vững các thẻ HTML nhé. Chúc bạn thành công trên con đường trở thành lập trình web.
