Tên liên kết HTML so với id
Phần tử A xác định một neo Show
Bạn có thể tạo liên kết đến một neo được đặt tên bằng cách sử dụng thuộc tính name (hoặc thuộc tính id). Khi liên kết trong cùng một tài liệu, phần tử A được đặt như sau AttributeValueExplanation href=" "# tên neo ký hiệu số (#) và tên neo< name=" "anchor namearbitrary name Tạo một neo được đặt tên
Ví dụVí dụ về việc sử dụng thuộc tính tên 
Trong bài viết này, chúng tôi cung cấp cách xử lý cơ bản về các neo hoặc phần tử HTML, thường được gọi là các liên kết HTML Giới thiệuTrong bài viết này, bạn sẽ tìm hiểu về một trong những phát minh mang tính đột phá nhất trong lịch sử của Web - liên kết. Liên kết cho phép người đọc tài liệu chuyển ngay từ tài liệu này sang tài liệu khác và từ máy chủ này sang máy chủ khác. Rất nhiều điều đã xảy ra kể từ khi các liên kết được giới thiệu lần đầu tiên, nhưng có một điều không thay đổi. liên kết là một phần vô cùng quan trọng của trải nghiệm web và chúng có thể giúp khách truy cập trang web của bạn truy cập nội dung của bạn dễ dàng hoặc khó khăn, tùy thuộc vào cách bạn sử dụng chúng Bài viết này khám phá cách tạo liên kết dễ hiểu và hoạt động trong mọi môi trường. Hơn nữa, chúng ta sẽ xem xét cách liên kết ảnh hưởng đến mức độ phổ biến của công cụ tìm kiếm của bạn và bạn sẽ nhận được một số mẹo về cách diễn đạt văn bản liên kết Liên kết là gì?Liên kết là một phần của tài liệu HTML trỏ đến các tài nguyên khác — tài liệu HTML khác, tệp văn bản, tệp PDF, v.v. Một số liên kết được trình duyệt tự động theo dõi, được tạo bằng các phần tử 7 (bạn đã gặp một số liên kết này trong các bài viết trước, như khi chúng được sử dụng để nhập tệp CSS vào tài liệu HTML). Nhưng nói chung, khi chúng ta nói về các liên kết, chúng ta muốn nói đến những liên kết được tạo bởi tác giả trang và là tùy chọn để người dùng kích hoạt. Chúng được gọi là các ký tự neo và bạn thêm chúng vào tài liệu HTML bằng cách sử dụng phần tử 7 Giải phẫu của một mỏ neoBạn có thể biến bất kỳ phần tử hoặc văn bản nội tuyến nào thành liên kết HTML bằng cách thêm phần tử 7 xung quanh phần tử đó. Ví dụ: trong tài liệu HTML sau, văn bản “Phần mềm Opera” là một liên kết
Khách truy cập kích hoạt liên kết này (bằng cách nhấp chuột, kích hoạt bằng bàn phím hoặc thậm chí bằng giọng nói trong một số trường hợp) sẽ rời khỏi trang hiện tại và chuyển đến trang chủ Opera. Có nhiều thay đổi hơn xảy ra với chính liên kết và chúng ta sẽ xem xét những thay đổi đó sau khi nói về kiểu dáng liên kết Thẻ neo có một số thuộc tính bạn có thể thêm
Trước tiên, hãy đi qua các thuộc tính quan trọng nhất và sau đó nói về những gì bạn có thể làm với các liên kết để giúp khách truy cập của bạn dễ dàng hơn Thuộc tính hrefMột phần tử 7 có thể đóng một số vai trò, tùy thuộc vào thuộc tính nào được đặt. Thuộc tính phổ biến nhất mà bạn sẽ sử dụng là thuộc tính
Tạo điều hướng trong trang với thuộc tính idBạn cũng có thể đặt một thuộc tính 7 để biến nó thành một trang neo. Neo trang là mục tiêu trong trang cho các liên kết khác trên trang đó. Bạn liên kết với chúng bằng cách đặt ID vào thuộc tính Mục tiêu đó có thể được liên kết với liên kết này Thật tiện lợi, hầu hết các trình duyệt ngày nay đều cho phép bạn viết điều này dưới dạng “tốc ký” bằng cách đặt ID trực tiếp vào phần tử bạn muốn liên kết đến, như thế này Điều này đơn giản hơn nhiều và chúng tôi khuyên bạn nên làm theo cách này bất cứ khi nào có thể HTML sau chứa các ví dụ về các loại liên kết khác nhau Mở tệp này trong trình duyệt bạn chọn và thử nghiệm với nó. Bạn sẽ thấy rằng việc kích hoạt bất kỳ liên kết nào trong danh sách đầu tiên sẽ chuyển đến phần thích hợp của cùng một trang. Bạn cũng có thể nhận ra rằng URL trong thanh vị trí của trình duyệt của bạn đã thay đổi và hiện hiển thị mã định danh đoạn ở cuối URL, điều đó có nghĩa là khách truy cập có thể đánh dấu phần này hoặc gửi liên kết qua email cho người khác để gửi cho họ chính xác nơi họ nên đến. Tóm lại
Điều đó bao gồm menu và các phần khác nhau trong ví dụ, nhưng còn các liên kết khác thì sao? . Nếu tất cả những điều đó phù hợp với bạn thì thật tuyệt — nhưng nếu trình duyệt của bạn không thể hiểu một số tài nguyên thì sao? Đừng để lại bất kỳ sự mơ hồ nào về những gì bạn đang liên kết đếnMột điều quan trọng cần nhớ về các liên kết là chúng là một phần quan trọng trong mối quan hệ của bạn với khách truy cập. Người đọc tin tưởng rằng khi bạn cung cấp cho họ một liên kết, họ có thể theo dõi liên kết đó và nhận được thông tin tốt, có liên quan. Nếu liên kết của bạn không hoạt động vì tài nguyên được liên kết không có sẵn hoặc ở định dạng mà trình duyệt của khách truy cập không thể sử dụng, bạn sẽ phản bội lòng tin đó và mất uy tín. Đừng để điều đó xảy ra Cung cấp thêm thông tin với thuộc tính tiêu đềNhư với hầu hết các phần tử HTML khác, bạn có thể thêm thuộc tính 7 để bao gồm một số thông tin bổ sung. Trình duyệt sẽ hiển thị chú giải công cụ khi khách truy cập di con trỏ chuột qua liên kết. Chú giải công cụ thường cho họ biết nội dung của liên kết. Ví dụ: bạn có thể giới thiệu nhỏ về nội dung và vị trí của tài liệu được liên kết Tuy nhiên, bạn không thể mong đợi khách truy cập có đủ kiên nhẫn và phối hợp tay mắt để dựa vào thông tin quan trọng này. Người dùng khiếm thị, những người không thể nhìn rõ trang (hoặc có thể không nhìn thấy gì), rất có thể không tiếp cận được thông tin này. Mặc dù trình đọc màn hình có tùy chọn đọc thuộc tính Thông tin quan trọng có thể là
Liên kết đến các tài nguyên không phải HTML — đừng bắt mọi người phải đoánCó thể rất khó chịu khi bạn nhấp vào một liên kết và trình duyệt của bạn không biết phải làm gì với nội dung mà liên kết trỏ đến. Thật không may, quá phổ biến khi thấy các trang web liên kết đến hình ảnh, tài liệu PDF và video mà không cho khách truy cập biết những gì sẽ xảy ra. Hơn nữa, tài nguyên có thể khá lớn, điều đó có nghĩa là khách truy cập có thể thích tải xuống hơn là mở nó bên trong trình duyệt hoặc họ có thể hoàn toàn không muốn truy cập vào tài nguyên đó Một trong những yếu tố thành công lớn nhất của một trang web là không khiến người dùng đoán điều gì sẽ xảy ra khi họ thực hiện một hành động. Thay vào đó, hãy nói trực tiếp với họ tác động của hành động đó. Trong trường hợp tài nguyên được liên kết, tất cả những gì bạn cần làm là cho khách truy cập biết tài nguyên được liên kết là gì. Dưới đây là một số ví dụ Bằng cách cung cấp thông tin về các tệp được liên kết và bản chất của chúng, bạn để khách truy cập của mình quyết định phải làm gì với chúng, thay vì mong đợi họ có một số cài đặt trình duyệt hoặc phần mềm được cài đặt sẵn. Ví dụ, nếu bạn kết hợp thông tin đó với kiểu dáng thông minh, bạn thậm chí có thể làm cho các liên kết đó trông hấp dẫn và trực quan hơn bằng cách đưa ra các loại liên kết khác nhau có biểu tượng dễ nhận biết (xem thêm về điều này trong hướng dẫn/Danh sách kiểu dáng và liên kết). Nếu muốn an toàn, bạn cũng có thể cung cấp phần trợ giúp giải thích các định dạng tệp khác nhau là gì và nơi bạn có thể lấy phần mềm cần thiết để hiển thị chúng Bên ngoài so với. liên kết nội bộMột trong những nỗi sợ hãi lớn nhất đối với các trang web kinh doanh là mọi người rời khỏi trang web sớm. Đây thường là lý do khiến các trang web không cung cấp liên kết của bên thứ ba (trừ khi bên thứ ba trả tiền để có đặc quyền có lưu lượng truy cập web hướng đến họ). Chúng ta sẽ quay lại đánh giá lỗi này sau; Khung và cửa sổ bật lên — chỉ cần nói khôngNỗi sợ mất khách truy cập vào các trang web khác trong khi vẫn muốn liên kết với chúng đã mang lại cho chúng tôi hai đổi mới (?) trong quá trình phát triển web vốn là một cái gai đối với khía cạnh khả năng sử dụng trong nhiều năm. khung và cửa sổ bật lên Sử dụng khung HTML có nghĩa là bạn tách trang được hiển thị trong trình duyệt thành nhiều tài liệu khác nhau. Lợi ích là tài liệu dường như vẫn giữ nguyên ngay cả khi bạn tải nội dung khác, từ máy chủ của riêng bạn hoặc từ máy chủ của bên thứ ba. Đây là nơi tính hữu dụng kết thúc, tuy nhiên. Nói một cách đơn giản, các khung hình mang lại trải nghiệm người dùng tồi tệ. Ví dụ: khi một trang web sử dụng khung
trang web có vẻ hợp pháp (“lừa đảo”) Các liên kết bên trong một bộ khung sử dụng thuộc tính Mở một phiên bản trình duyệt mới là một cách phổ biến khác để liên kết đến các trang web của bên thứ ba, bằng cửa sổ bật lên theo tập lệnh hoặc bằng thuộc tính Tóm lại, không sử dụng thuộc tính Lợi ích của outbound và inbound linkCó một số lý do chính đáng để liên kết đến các trang web của bên thứ ba ngay cả khi họ là đối thủ cạnh tranh
Tính hữu ích của các liên kết trong nước (liên kết trỏ từ trang web của bên thứ ba đến trang web của bạn) ít được tranh luận hơn. Các trang web chất lượng cao khác liên kết với trang web của bạn càng thường xuyên thì bạn càng có thứ hạng cao hơn trong các công cụ tìm kiếm. Tuy nhiên, trước khi điều đó xảy ra, bạn cần chứng minh rằng bạn không ngại liên kết với những người khác Điều này đưa chúng ta đến một phần rất quan trọng khác của việc tạo liên kết tốt. làm thế nào để từ chúng từ ngữ liên kếtChúng tôi đã đề cập ngắn gọn về điều này trong phần về liên kết đến các tài nguyên không phải HTML, nhưng thật tốt khi tự nhắc nhở bản thân rằng các liên kết không chỉ là các yếu tố tương tác mà còn là một phần không thể thiếu của bản sao trang. Một số công nghệ hỗ trợ sẽ cung cấp một danh sách các liên kết thay vì toàn bộ tài liệu để cho phép khách truy cập nhanh chóng điều hướng và tìm liên kết họ muốn. Điều này có nghĩa là văn bản liên kết của bạn cần phải có ý nghĩa ngoài ngữ cảnh cũng như trong ngữ cảnh. Bạn có thể dễ dàng kiểm tra điều này trong Opera bằng cách mở bất kỳ trang web nào và chọn Bạn cũng nên đảm bảo rằng trang của mình không chứa nhiều liên kết có cùng cách diễn đạt nhưng trỏ đến các tài nguyên khác nhau. Sai lầm kinh điển là các liên kết “bấm vào đây”, có nội dung như "Để tải xuống phiên bản mới nhất của công cụ của chúng tôi, hãy nhấp vào đây". Sẽ tốt hơn nhiều nếu sử dụng văn bản liên kết giải thích những gì liên kết trỏ đến. Ví dụ: chuyển câu đó thành “Bạn có thể tải xuống phiên bản mới nhất của công cụ của chúng tôi và tự mình dùng thử. ” Điều tương tự cũng áp dụng cho các liên kết “thêm”. Chúng thường được tìm thấy trong các trang web tin tức, nơi bạn thấy một tiêu đề và một số văn bản giới thiệu, theo sau là liên kết “thêm” hoặc “câu chuyện đầy đủ”. Giải pháp cho vấn đề này là sử dụng hình ảnh “thêm” được liên kết với một số văn bản thay thế duy nhất hoặc thêm phần tử 7 bên trong liên kết sau từ “thêm” và ẩn nó bằng CSS Kiểu dáng liên kếtViệc xử lý đầy đủ kiểu dáng liên kết nằm ngoài phạm vi của bài viết này (nhưng bạn có thể tìm thêm thông tin trong hướng dẫn/Danh sách kiểu dáng và liên kết). Tuy nhiên, điều quan trọng cần nhớ là hình thức của các liên kết là rất quan trọng và có một số trạng thái liên kết khác nhau cần xem xét. Các trạng thái liên kết (được gọi là bộ chọn lớp giả CSS) là
HTML5. liên kết cấp khốiTrong HTML4, phần tử 7 bị hạn chế chuyển các phần tử nội tuyến khác thành liên kết. Điều này tốt cho hầu hết các trường hợp, nhưng nó trở nên khó chịu, chẳng hạn như khi bạn muốn biến toàn bộ phần biểu ngữ quảng cáo chứa hình ảnh và đoạn văn thành một liên kết. Để mã vẫn hợp lệ, bạn sẽ phải bọc từng đoạn văn bản và từng hình ảnh trong liên kết riêng của nó — tất cả sẽ đến cùng một nơi — điều này không chỉ lặp đi lặp lại một cách khủng khiếp mà còn gây nhầm lẫn cho công nghệ hỗ trợ và người dùng của nó. Đặt một phần tử nội tuyến xung quanh một phần của nội dung cấp khối cũng làm cho kiểu dáng hoạt động kỳ lạ, trừ khi bạn nhớ đặt nó hiển thị giống như một phần tử cấp khối bằng CSS May mắn thay, HTML5 loại bỏ hạn chế này, cho phép bạn đặt một liên kết duy nhất xung quanh bất kỳ lượng nội dung nào bạn muốn. Để nó hoạt động bình thường, bạn vẫn phải đặt liên kết hoạt động giống như một thành phần cấp khối, nhưng điều này dễ dàng và linh hoạt hơn nhiều so với trước đây. Hãy xem một ví dụ 5 Ở đây bạn có thể thấy rằng chúng ta có phần tử 7 bao bọc cả tiêu đề và đoạn văn. Để làm cho điều này hoạt động chính xác, chúng tôi đã đặt nó thành Phần kết luậnChúng tôi đã đề cập rất nhiều trong bài viết này, nhưng có lẽ điều quan trọng nhất là nhớ không chỉ liên kết làm gì mà còn nhớ chúng nên làm gì Sự khác biệt giữa ID và tên trong HTML là gì?id được sử dụng để xác định phần tử HTML thông qua Mô hình đối tượng tài liệu (thông qua JavaScript hoặc được tạo kiểu bằng CSS). id dự kiến là duy nhất trong trang. tên tương ứng với thành phần biểu mẫu và xác định nội dung được đăng lại máy chủ
Tôi có thể sử dụng ID trong thẻ neo trong HTML không?Thuộc tính id có thể được sử dụng để tạo một ký tự neo ở thẻ bắt đầu của bất kỳ phần tử nào (bao gồm cả phần tử A) . Ví dụ này minh họa việc sử dụng thuộc tính id để định vị một neo trong phần tử H2. Neo được liên kết thông qua phần tử A.
Chúng tôi có thể đặt tên cho thẻ neo không?Thuộc tính tên liên kết HTML được sử dụng để chỉ định tên cho phần tử . Nó được sử dụng để tham chiếu dữ liệu biểu mẫu sau khi gửi biểu mẫu hoặc để tham chiếu phần tử trong JavaScript. Ghi chú. Thuộc tính tên không được HTML5 hỗ trợ. . It is used to reference the form-data after submitting the form or to reference the element in a JavaScript. Note: The name attribute is not supported by HTML5.
ID neo là gì?ID neo cho phép bạn tạo liên kết đã sửa đổi có thể hướng khách truy cập trang web đến một phần cụ thể của trang web , cho phép họ chuyển đến . ID neo có thể hữu ích trong cùng một trang hoặc giữa hai trang riêng biệt. |
