Cách tạo liên kết nội trong html

Bạn đã tìm hiểu về web chắc hẳn bạn cũng đã biết, 1 website luôn tồn tại các liên kết qua lại giữacác trang khác nhau và những liên kết này được gọi làHyperlinks (siêu liên kết). Bạn có thể thấy ngay trong đoạn này mình có chèn liên kết về chuyên mục học HTML bằng cách dùng thẻ a trong HTML để tạo link liên kết đến 1 trang khác.

Bạn đang xem: Cách tạo liên kết nội trong html

Trong HTML để tạo ra các link liên kết thì chúng ta sử dụng thẻ a – thẻ tạo link liên kết. Về cách dùng thẻ a trong HTML thì bài viết này mình sẽ hướng dẫn cho bạn chi tiết nhất về thẻ a trong HTML để bạn hiểu và dùng được nó.

Nội dung bài viết

Hướng dẫn dùng thẻ a trong HTML để tạo link liên kết

Hướng dẫn dùng thẻ a trong HTML để tạo link liên kết

Thẻ a trong HTML được dùng rất nhiều nó giúp bạn tạo 1 đường dẫn trỏ đến 1 trang nào đó ngay trong web của bạn hoặc sang 1 web khác. Nếu bạn đã tìm hiểu về SEO thì bạn cũng biết thẻ a được dùng trong SEO cực kỳ nhiều khi bạn chèn backlink. Nó sẽ có 2 dạng đó là internal linkhay còn gọi là liên kết bên trong (link trỏđến trang cùng domain) và external linkcòn gọi là liên kếtbên ngoài(link trỏ đến trang không cùng domain).

Tham khảo thêm

Cấu trúccủa thẻ a trong HTML

trangnhacaiuytin.comTrong cấu trúc trên có các thuộc tính sau:

hreflà thuộc tính khai báo đường dẫn tới trang đíchtitlelà thuộc tính khai báo tiêu đề cho liên kếttargetlà thuộc tính với các tùy chọn đích đến ở dưới (nếu không khai báo thuộc tính target thì giá trị mặc định là _self)_selftùy chọn này sẽ mở link trên tab hiện tại_blanktùy chọn này sẽ mở link trên tab mới_parenttùy chọn này sẽ mở link trong tab cha của tab hiện tại_toptùy chọn này sẽ mở link trong cửa sổ toàn màn hìnhtrangnhacaiuytin.comlàthành phần hiển thị cho người dùng nhìn thấy. Nó có thể là text link hoặc image link.Cấu trúc thẻ a nhảy tới vị trí nào đó trên trang

Ngoài việc đặt link dẫn đến 1 trang khác trong web hoặc dẫn đến 1 trang web khác thì bạn còn có thể đặt link nhảy đến 1 vị trí nào đó ngay trong trang mà không bị load lại trang.

Để làm việc này bạn hãy thêm vào thẻ HTML ở vị trí cần nhảy tới id=”ten_id”sau đó trong thuộc tính hrefcủa thẻ a bạn để link ở dạng href=”#ten_id”. Nói vậy có vẻ bạn sẽ thấy mở hồ, bạn hãy xem ví dụ dưới đây để hiểu nhé.

Xem thêm: Cách Chỉnh Camera Khi Gọi Video Zalo, Nguyên Nhân, Cách Khắc Phục

Ví dụ

Đầu tiên là thêm id cho đoạn cần nhảy tới. Ở đây mình sẽ thêm id cho thẻ h1 như sau:

Học HTML OnlineBây giờ chúng ta viết thẻ a với cấu trúc như sau:

trangnhacaiuytin.comBậy giờ khi click vào thẻ a nó sẽ nhảy tới thẻ h1 có id=”den_day” ngay trong trang hiện tại mà không cần load lại trang.

Demo rõ nhất là bạn có thể xem mục lục của bài viết này ở bên tay phải màn hình, sau đó bạn click vào các link nó sẽ nhảy đến vị trí bạn cần tới.

Ngoài ra, với hình thức tạo link như này nó còn hiển thị trực tiếp trên kết quả tìm kiếm Google khá là hay, bạn có thể tìm hiểu thêm trong lĩnh vực SEO nhé.

Cấu trúc thẻ a tạo liên kết mail

Bạn có thể dùng thẻ a để tạo liên kết giúp người dùng click vào liên kết đó sẽ mở ứng dụng gửi mail và tự điền email mà bạn đã nhập sẵn ở đó. Cấu trúc thẻ a như sau:

admin
trangnhacaiuytin.comVà nó sẽ hiển thị trên trình duyệt như sau:admin
trangnhacaiuytin.com

Cấu trúc thẻ a tạo liên kết tới số điện thoại

Việc tạo link tới số điện thoại hiện nay rất hữu dụng, nhất là với các website bán hàng nếu muốn người dùng truy cập bằng điện thoại ấn vào liên kết số điện thoại là tự động nhập số điện thoại để gọi ngay rất là hay. Cách làm đơn giản với thẻ a như sau:

19001009Nó sẽ hiển thị trên trình duyệt như sau, bạn hãy truy cập trang này bằng điện thoại và click vào thử nhé:19001009

4 trạng thái của thẻ a

Thẻ a đặc biệt hơn các thẻ khác là nó sẽ có 4 trạng thái cho người dùng thấy như sau:

link: là trạng thái thẻ a khi bạn chưa click lần nàohover: là trạng thái khi bạn trỏchuột qua nhưng không click vàovisited:là trạng thái khi bạn đã click vào linkactive:là trạng thái khi bạn click vào link nhưngvẫn đang giữ chuột

Về các trạng thái này thì chúng ta phải kết hợp cùng CSS mới thấy rõ được. Nên mình sẽ nói tới trong bài viết về CSS cho thẻ a sau.

Xem thêm: Buông Tay Anh Là Cách Em Đã Chọn Lựa Chọn, Buông Tay Anh Là Cách Em Đã Chọn Lựa

Lời kết

Như vậy trong bài viết này mình đã cùng bạn đi tìm hiểu về thẻ a trong HTML và cách dùng thẻ a trong các trường hợp thường xuyêngặp nhất. Hi vọng với từng đó kiến thức sẽ giúp bạn sử dụng thẻ a trong HTML tốt hơn.

Nếu thấy bài viết hay hãy chia sẻ ngay nhé, còn nếu có thắc mắc gì hãy để lại còm men ở khung bình luận bên dưới nhá. Và nhớ theo dõi trangnhacaiuytin.com để học thêm nhiều kiến thức về web hơn nhé. Chúc bạn thành công!

potster

anh ơi liên kết # làm cái gì anh?Ý em là nó được dùng để làm gi a?Nó dạng như này: