[attribute] HTML - rel 속성 ★ - 링크문서가 현재문서와 어떤 관계인지 지정 (= rel속성 = 릴속성/렐속성)

1. rel 예제 - <a> 경우
2. rel 정의
3. rel 구문
4. rel 예제 - <area> 경우
5. rel 예제 - <form> 경우
6. rel 예제 - <link> 경우

rel 예제 - <a> 경우

 

<a rel="nofollow" href="https://homzzang.com/">홈짱닷컴</a>

 

rel 정의

 

링크된 문서가 현재 문서와 어떤 관계인지 지정.

 

---

 

1. rel 속성 사용 가능 태그 종류

<a>, <area>, <form>, <link>

 

2.

• <a>,<area>,<link> 경우, href 속성 존재 시만 사용 가능.
• <form> 경우, action 속성 존재 시만 사용 가능.
• 검색엔진은 rel 속성의 값 사용해 링크문서에 대한 정보 획득.

 

3.

모든 브라우저 지원.

 

rel 구문

 

• <a rel="value">...</a>
• <area rel="value">
• <form rel="value">...</form>
• <link rel="value">

 

---

[속성값]

 

<a> 태그 rel 속성의 value 종류

• alternate - 문서의 대체 표현 링크.( 예: 인쇄 페이지, '번역/미러'문서)
• author - 문서 작성자에 대한 링크.
• bookmark - 북마크에 사용되는 영구 URL 링크.
• external - 링크문서가 동일 사이트의 일부가 아님 표시.
• help - 도움말 링크.
• license - 문서에 대한 라이센스 정보에 대한 링크.
• next - 시리즈 문서의 다음 문서 링크.
• nofollow ★ - 유료 링크와 같이 승인되지 않은 문서에 대한 링크.("nofollow"는 Google 검색 스파이더가 해당 링크를 따라가지 않도록 지정하기 위해 Google에서 사용)
• noopener ★ - 오프너 표시 X (즉, 하이퍼링크를 따라 생성된 브라우징 컨텍스트에 오프너 브라우징 컨텍스트가 없어야 함 표시.)
• noreferrer ★ - 리퍼러 표시 X (즉, 리퍼러를 알 수 없게 만듦. 사용자가 하이퍼링크를 클릭하면 참조 헤더가 포함되지 않음.)
• prev - 시리즈 문서 섹션의 '이전' 문서 링크.
• search - 문서의 검색 도구에 대한 링크
• tag - 현재 문서의 태그(키워드)

 

<area> 태그 rel 속성의 value 종류

• alternate - 문서의 대체 표현 링크.( 예: 인쇄 페이지, '번역/미러'문서)
• author - 문서 작성자에 대한 링크.
• bookmark - 북마크에 사용되는 영구 URL 링크.
• help - 도움말 링크.
• license - 문서에 대한 라이센스 정보에 대한 링크.
• next - 시리즈 문서의 다음 문서 링크.
• nofollow ★ - 유료 링크와 같이 승인되지 않은 문서에 대한 링크.("nofollow"는 Google 검색 스파이더가 해당 링크를 따라가지 않도록 지정하기 위해 Google에서 사용)
• noreferrer ★ - 리퍼러 표시 X (즉, 리퍼러를 알 수 없게 만듦. 사용자가 하이퍼링크를 클릭하면 참조 헤더가 포함되지 않음.)
• prefetch - 타겟 문서를 캐시해야 하는지 지정.
• prev - 시리즈 문서 섹션의 '이전' 문서 링크.
• search - 문서의 검색 도구에 대한 링크
• tag - 현재 문서의 태그(키워드)

 

<form> 태그 rel 속성의 value 종류

• alternate - 문서의 대체 표현 링크.( 예: 인쇄 페이지, '번역/미러'문서)
• help - 도움말 링크.
• license - 문서에 대한 라이센스 정보에 대한 링크.
• next - 시리즈 문서의 다음 문서 링크.
• nofollow ★ - 유료 링크와 같이 승인되지 않은 문서에 대한 링크.("nofollow"는 Google 검색 스파이더가 해당 링크를 따라가지 않도록 지정하기 위해 Google에서 사용)
• noopener ★ - 오프너 표시 X (즉, 하이퍼링크를 따라 생성된 브라우징 컨텍스트에 오프너 브라우징 컨텍스트가 없어야 함 표시. 해킹방지에 유용.)
• noreferrer ★ - 리퍼러 표시 X (즉, 리퍼러를 알 수 없게 만듦. 사용자가 하이퍼링크를 클릭하면 참조 헤더가 포함되지 않음.)
• opener - 오프너 표시 O (즉, 하이퍼링크를 따라 생성된 브라우징 컨텍스트에 오프너 브라우징 컨텍스트가 있어야 함 표시.)
• prev - 시리즈 문서 섹션의 '이전' 문서 링크.
• search - 문서의 검색 도구에 대한 링크

<link> 태그 rel 속성의 value 종류

• alternate - 문서의 대체 버전에 대한 링크. (예: 인쇄 페이지, 번역/미러 문서). (예) <link rel="alternate" type="application/atom+xml" title="Homzzang News" href="/page/news/atom">
• autor - 문서 작성자에 대한 링크.
• dns-prefetch - 브라우저가 대상 리소스의 원본에 대해 DNS 확인을 선제적으로 수행하도록 지정.
• help - 도움말 문서에 대한 링크. (예) <link rel="help" href="/help/">
• icon ★ - 문서를 나타내는 아이콘 가져오기. (예) 파비콘: <link rel="icon" href="favicon.ico" type="image/x-icon">
• license - 문서의 저작권 정보에 대한 링크.
• next - 시리즈의 다음 문서에 대한 링크.
• pingback - 현재 문서에 대한 핑백(= 블로그나 웹사이트에서 다른 사이트의 글에 대한 알림 메시지)을 처리하는 핑백 서버의 주소 제공.
• preconnect - 브라우저가 대상 자원의 원천(origin)에 선제적으로 연결하도록 지정.
• prefetch - 후속 탐색에 필요할 가능성이 있으므로 브라우저가 대상 리소스를 선제적으로 가져와 캐시하도록 지정.
• preload - 브라우저 에이전트가 "as" 속성으로 지정된 대상(및 해당 대상과 연관된 우선 순위)에 따라 현재 탐색을 위해 대상 리소스를 선제적으로 가져와 캐시해야 함을 지정.
• prerender - 브라우저가 백그라운드에서 지정된 웹 페이지를 사전 렌더링(로드)하도록 지정. 따라서 사용자가 이 페이지로 이동하면 페이지 로드 속도가 빨라짐 (∵ 페이지가 이미 로드되었기 때문). 경고! 이것은 사용자의 대역폭을 낭비함! 사용자 여정의 특정 시점에서 웹페이지가 필요하다고 절대적으로 확신하는 경우에만 사전 렌더링 사용 권장.
• prev - 시리즈 문서의 이전 문서 링크.
• search - 현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크.
• stylesheet ★ - CSS 외부스타일시트.

  

rel 예제 - <area> 경우

 

<p>HTML 언어 자세히 보려면 링크 클릭:</p>

 

<img src="langs.gif" width="200" height="100" alt="홈짱" usemap="#langmap">

 

<map name="langmap">

  <area shape="rect" coords="0,0,100,50" alt="HTML" href="https://homzzang.com/b/html" rel="alternate">

</map> 

 

rel 예제 - <form> 경우

 

<form action="action_page.php" method="post" rel="noopener">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br>

  <label for="email">이메일:</label>

  <input type="email" id="email" name="email"><br>

  <input type="submit" value="Submit">

</form>

 

rel 예제 - <link> 경우

 

스타일시트:

<link rel="stylesheet" href="style.css">

 

파비콘:

<link rel="shortcut icon" href="favicon.ico">