목차
하이퍼 링크 장점
하이퍼 링크 종류 및 HTML code
글 본문 내에서 이동하는 하이퍼 링크거는 방법
하이퍼 링크 장점
하이퍼링크는 웹 페이지에서 링크를 클릭하면 해당 페이지나 다른 웹 페이지로 이동할 수 있는 링크입니다. 하이퍼링크를 추가하는 것은 블로그 글에서 읽는 독자들이 다른 페이지나 위치로 쉽게 이동할 수 있도록 도와주는데 많은 장점이 있습니다.
1.콘텐츠 접근성 향상
하이퍼링크를 추가하면 긴 글에서 독자들이 필요한 정보를 빠르게 찾을 수 있도록 도와주므로, 콘텐츠 접근성을 향상시킵니다. 예를 들어, 긴 블로그 글에서 특정 부분으로 바로 이동할 수 있는 링크를 추가하면, 독자들은 불필요한 스크롤 작업 없이 바로 필요한 내용을 찾을 수 있습니다.
2.사용자 경험 개선
하이퍼링크를 추가하면, 독자들이 다른 페이지로 이동하거나 특정 위치로 이동하는 것이 쉬워집니다. 이는 사용자 경험을 개선하는 데 매우 중요합니다. 또한, 링크를 통해 다른 페이지로 이동하면 해당 페이지에서 제공하는 정보를 추가로 얻을 수 있으므로, 독자들은 더욱 유용한 정보를 찾을 수 있습니다.
3.검색 엔진 최적화(SEO)
하이퍼링크를 추가하면, 검색 엔진에서 인덱싱하는 데 도움이 됩니다. 링크를 포함하는 페이지에서 다른 페이지로의 링크를 추가하면, 해당 페이지가 검색 엔진에서 더 잘 나타날 가능성이 높아집니다. 이는 검색 엔진 최적화(SEO)를 위해 매우 중요한 요소 중 하나입니다.따라서, 하이퍼링크를 추가하면 콘텐츠 접근성을 향상시키고 사용자 경험을 개선하며 검색 엔진 최적화에 도움이 되므로, 블로그나 웹 페이지에서 하이퍼링크를 적극 활용하는 것이 좋습니다.
하이퍼 링크 종류 및 HTML code
하이퍼링크를 사용하는 방법은 매우 다양합니다. 여기에는 몇 가지 예시를 들어보겠습니다.
1.다른 웹 사이트로의 링크
다른 웹 사이트로의 링크를 추가하는 것은 매우 일반적입니다. 이를 통해 독자들은 다른 웹 사이트에서 제공하는 정보를 추가로 확인할 수 있습니다. 아래는 구글 홈페이지로 이동할 수 있는 링크의 예시입니다.
2.같은 웹 페이지에서의 링크
하이퍼링크를 사용하여 같은 웹 페이지에서 다른 위치로 이동할 수도 있습니다. 이를 통해 독자들은 긴 글에서 필요한 정보를 더 쉽게 찾을 수 있습니다. 아래는 같은 웹 페이지에서 특정 위치로 이동할 수 있는 링크의 예시입니다.
<a href="#section2">Section 2로 이동</a> <h2 id="section2">Section 2</h2>
3.이메일 주소로의 링크
이메일 주소로의 링크를 추가하는 것은 매우 일반적인 방법입니다. 이를 통해 독자들은 클릭하면 즉시 이메일을 보낼 수 있습니다. 아래는 이메일 주소로의 링크의 예시입니다.
<a href="mailto:example@example.com">example@example.com로 이메일 보내기</a>
4.파일로의 링크
파일로의 링크를 추가하는 것은 매우 유용합니다. 이를 통해 독자들은 클릭하면 파일을 다운로드하거나 열 수 있습니다. 아래는 PDF 파일로의 링크의 예시입니다.
<a href="example.pdf">PDF 파일 다운로드하기</a>
이러한 예시들처럼 하이퍼링크는 매우 다양한 방식으로 활용될 수 있습니다.
글 본문 내에서 이동하는 하이퍼 링크거는 방법
블로그 글에서 특정 위치로 연결되는 하이퍼링크를 추가하는 방법은 예를 들어 설명하겠습니다.
아래는 예시를 위한 하이퍼 링크가 걸리지 않은 html 코드입니다. "하이퍼 링크 장점"을 클릭하면 "하이퍼 링크 여기"로 이동하는
하이퍼 링크를 만들 예정입니다.
| <h2 data-ke-size="size26"><u><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';">하이퍼 링크 장점</span></u></h2> <h3 data-ke-size="size23"><u><span style="color: #ee2323;"><b>하이퍼 링크 여기</b></span></u></h3> |
1. 기본모드의 "HTML"을 선택하여 HTML code를 오픈합니다.
2. 위 예시 코드에서 < a href="#">태그를 사용하여 "하이퍼 링크 장점" 텍스트에 대한 하이퍼 링크를 생성합니다. 이 때 href 속성에는 id 속성값으로 지정한 "hyperlink-benefits" 값을 지정하였는데, 이는 원하는 값을 임의로 지정 가능합니다.
</a>로 반드시 closing하는 것 잊지마세요
<a href="#hyperlink-benefits"> <h2 data-ke-size="size26"><u><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';">하이퍼 링크 장점</span></u></h2></a>
3.하이퍼 링크의 타겟인 h3 태그에서는 id="hyperlink-benefits" 을 입력하여, a 태그에서 생성한 하이퍼 링크가 해당 위치로 이동할 수 있도록 합니다.
<h3 id="hyperlink-benefits" data-ke-size="size23"><u><span style="color: #ee2323;"><b>하이퍼 링크 여기</b></span></u></h3>
위 코드를 사용하시면 "하이퍼 링크 장점"을 클릭하면 "하이퍼 링크 여기"로 이동하는 하이퍼 링크가 생성됩니다.
위와 같이 하이퍼링크를 추가하면, 긴 글을 작성할 때 특정 위치로 바로 이동할 수 있어서 독자들이 불편함 없이 글을 볼 수 있습니다. 이 방법은 블로그 글뿐만 아니라 웹사이트에서도 많이 사용되는 기능이므로, 웹 개발을 하시는 분들도 참고하시면 좋을 것입니다.
'블로그' 카테고리의 다른 글
| 티스토리 블로그 저품질 판단 기준과 해결 방법 (0) | 2023.02.22 |
|---|---|
| 파워포인트로 쉽게 썸네일 만드는 팁 (0) | 2023.02.22 |
| 구글에서 내 글이 검색이 안될 때 조치 방법(구글 서치 콘솔 색인 생성) (0) | 2023.02.22 |
| 블로그 주제 별 글쓰기 팁 (0) | 2023.02.22 |
| 구글에서 내 블로그 글이 검색 안되는 이유, 조치 방법 (0) | 2023.02.21 |