요소의 rel 속성은 현재 문서와 링크된 문서 간의 관계를 설정하는 데 사용됩니다. 이 속성은 요소에 대해 HTML5에 도입되었습니다.
다음은 구문입니다 -
<area rel="value">
위의 값은 −
에 연결되는 다음 옵션 중 하나일 수 있습니다.- 대체 :예를 들어 인쇄할 문서의 대체 버전입니다.
- 저자 :문서 작성자
- 북마크 :북마크에 사용되는 영구 URL
- 도움 :도움말 문서
- 라이센스 :저작권 정보
- 다음 :선택 항목의 다음 문서
- 팔로우하지 않음: Google 색인 생성이 해당 링크를 따라가지 않도록 하려는 링크에 대한 링크입니다.
- 추천인 :사용자가 하이퍼링크를 따라갈 경우 브라우저가 HTTP 참조 헤더를 보내지 않도록 지정합니다.
- 프리페치 :대상 문서가 캐시되어야 함을 지정합니다.
- 이전 :선택 항목의 이전 문서
- 검색 :문서 검색 도구에 대한 링크
- 태그: 현재 문서에 대한 태그
이제 요소 −
의 rel 속성을 구현하는 예를 살펴보겠습니다.예시
<!DOCTYPE html> <html> <body> <h2>Learning</h2> <p>Learn these technologies with ease....</p> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
출력
위의 예에서 우리는 다음 이미지에 지도를 설정했습니다 -
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
이제 모양에 대한 지도와 영역을 설정했습니다.
<map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map>
위에서 우리는 대체 버전에 대한 관계를 설정했습니다 -
rel="alternate"