HTML/CSS 베이스캠프

Contents 태그

Contents 태그는 웹 페이지의 콘텐츠를 나타내는 태그입니다. 이 태그는 웹 페이지의 주요 콘텐츠를 나타내는 태그로, 웹 페이지의 구조를 나타냅니다.

1. heading 태그

제목 태그는 웹 페이지의 제목을 나타내는 태그입니다. 웹 페이지가 하나의 책이라고 생각한다면 제목 태그는 목차와 같습니다.

HTML의 헤딩 태그는 문서 구조를 논리적으로 구성하는 데 중요한 역할을 합니다. 헤딩 태그는 <h1>부터 <h6>까지 있으며, 순서대로 작성해야 하고, 각각의 숫자가 작을수록 더 높은 중요도를 의미합니다. 문서 구조를 계층적으로 잘 구성하면 검색 엔진 최적화(SEO)에 유리하고, 접근성 측면에서도 유익합니다.

아래 예제에서 간단하게 위니브 캐릭터 소개 페이지를 만든다고 생각하고 heading의 숫자와 위치를 바꿔보세요.

HTML의 해딩은 문서가 아래와 같이 목차처럼 정렬되어 있다고 생각해주시고 작성해야 합니다. 다음 예시에서는 HTML 문서를 목차처럼 논리적으로 정렬한 경우를 보여줍니다. HTML에서 띄어쓰기는 하나의 공백으로 병합하기 때문에 중요하진 않습니다. 단지 여러분이 보기 쉽게 표현한 것 뿐입니다.

<h1>위니브</h1>
  <h2>위니브 캐릭터</h2>
    <h3>라이캣</h3>
    <h3>로지</h3>
    <h3>지지</h3>
  <h2>위니브 소개</h2>
    <h3>위니브는...</h3>
    <h3>위니브 커리큘럼</h3>

<h1>위니브</h1>
  <h2>위니브 캐릭터</h2>
    <h3>라이캣</h3>
    <h3>로지</h3>
    <h3>지지</h3>
  <h2>위니브 소개</h2>
    <h3>위니브는...</h3>
    <h3>위니브 커리큘럼</h3>

아래 구조에서는 <h1> 다음에 바로 <h3>가 오고, <h3>와 <h4>의 계층이 어긋나 있습니다. 이렇게 작성하면 목차가 논리적으로 정렬되지 않아 문서의 구조가 혼란스럽게 보일 수 있습니다. 브라우저는 이러한 구조를 무시하고 문서를 사용자에게 보여주지만(렌더링하지만), 검색 엔진과 접근성 도구는 이를 혼란스러워할 수 있습니다.

<h1>위니브</h1>
<!-- X, h2 없음 -->
<h3>라이캣</h3>
<h2>위니브 캐릭터</h2>
<h3>칠리</h3>
<h3>개리</h3>
<h2>위니브 소개</h2>
<!-- X, h3 없음 -->
<h4>위니브는...</h4>
<h3>위니브 커리큘럼</h3>

<h1>위니브</h1>
<!-- X, h2 없음 -->
<h3>라이캣</h3>
<h2>위니브 캐릭터</h2>
<h3>칠리</h3>
<h3>개리</h3>
<h2>위니브 소개</h2>
<!-- X, h3 없음 -->
<h4>위니브는...</h4>
<h3>위니브 커리큘럼</h3>

이런 식으로 HTML 태그의 계층이 무너지면 아래와 같은 문제가 발생할 수 있습니다.

SEO(검색 엔진 최적화)에 불리: 검색 엔진은 헤딩 태그를 통해 문서의 구조와 중요도를 파악합니다. 잘못된 구조는 검색 엔진이 문서를 이해하는 데 어려움을 겪게 만듭니다.
접근성 저하: 스크린 리더와 같은 보조 기술은 헤딩 구조를 이용해 문서를 탐색합니다. 잘못된 구조는 사용자가 문서를 탐색하는 데 불편을 초래할 수 있습니다. 위니북스에서도 Heading 태그가 잘못 들어가 있다면 왼쪽 목차의 모습이 어떻게 들어갈지 상상해보세요.
유지보수 어려움: 논리적이지 않은 구조는 코드의 가독성을 떨어뜨리고, 이후에 수정하거나 확장하기 어렵게 만듭니다.

2. anchor 태그

앵커 태그(anchor 태그)는 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소 등 다양한 URL로 연결할 수 있는 하이퍼링크를 만듭니다.

이와 같이, 앵커 태그는 href 속성을 사용하여 하이퍼링크를 생성합니다. href는 hypertext reference(하이퍼텍스트 참조)의 약자로, 링크가 가리키는 대상의 주소를 지정합니다. 예를 들어, tel: 스키마는 전화번호를, mailto: 스키마는 이메일 주소를 나타냅니다.

또한, 앵커 태그에는 다양한 속성을 사용할 수 있습니다. target 속성은 링크를 클릭했을 때의 동작을 지정하며, 주요 값으로는 다음이 있습니다:

_self: 현재 페이지에서 링크를 엽니다(기본값).
_blank: 새 탭에서 링크를 엽니다.

download 속성은 링크를 클릭했을 때 URL을 다운로드하도록 요청합니다.

<a href="b.html">b.html으로 이동</a>
<a href="b.html" target="_blank">b.html 새탭으로 이동</a>
<a href="b.html" download>b.html 파일 다운로드</a>
<a href="mailto:google@gmail.com">google@gmail.com</a>
<a href="tel:010-0000-0000">010-1234-1234</a>

<a href="b.html">b.html으로 이동</a>
<a href="b.html" target="_blank">b.html 새탭으로 이동</a>
<a href="b.html" download>b.html 파일 다운로드</a>
<a href="mailto:google@gmail.com">google@gmail.com</a>
<a href="tel:010-0000-0000">010-1234-1234</a>

또한, href 속성과 id 속성을 사용하여 페이지 내에서 특정 위치로 이동하는 해시 링크를 만들 수 있습니다. 이를 통해 사용자는 긴 페이지 내에서 특정 섹션으로 쉽게 이동할 수 있습니다.

특히 한 페이지에 많은 콘텐츠가 있는 공식문서의 경우, 해시 링크를 사용하여 사용자가 원하는 정보로 쉽게 이동할 수 있도록 도와줍니다. 아래 링크를 클릭하면 페이지의 특정 위치로 이동하는 것을 확인할 수 있습니다.

링크: https://docs.python.org/3/reference/lexical_analysis.html#integer-literals

3. paragraph 태그

<p> 태그는 HTML 문서에서 문단(paragraph)을 정의할 때 사용됩니다. 각 문단은 기본적으로 블록 요소로 처리되어, 각 문단의 시작과 끝에는 자동으로 줄 바꿈이 추가됩니다. 이를 통해 텍스트를 논리적 단위로 구분할 수 있으며, 가독성을 높이는 데 도움을 줍니다.

HTML에서 문단은 꼭 문장만이 아니라 문단 안에는 다양한 콘텐츠가 들어갈 수 있습니다. 이미지나 입력 폼 등 서로 관련 있는 인라인 콘텐츠(쉽게 얘기하여 개행이 되지 않는 콘텐츠)는 구성 요소가 될 수 있습니다. 다만 p태그 안에 다른 p태그 등의 블록 요소를 넣는 것은 허용되지 않습니다. 애러가 나지 않는다고 해서 올바른 방법은 아닙니다.

4. strong 태그

<strong> 태그는 HTML에서 텍스트의 중요성을 강조할 때 사용됩니다. 꼭 단어만이 아니라 문장, 단락 등 다양한 범위에 사용할 수 있습니다.

이 태그는 시각적으로는 보통 굵은 글씨(bold)로 표시되지만, 단순히 스타일을 위한 것이 아니라 의미론적인 중요성을 나타내는 것이 목적입니다. 이를 통해 검색 엔진과 보조 기술이 해당 텍스트의 중요성을 이해할 수 있습니다.

비슷한 태그로는 <b> 태그가 있습니다. <b> 태그는 텍스트를 굵게(bold) 표시할 때 사용되며, 시각적인 효과를 위한 용도로만 사용됩니다. 따라서 의미론적인 중요성을 나타내기 위해서는 <strong> 태그를 사용하는 것이 좋습니다.

스크린 리더를 사용하여 컴퓨터 화면을 낭독할 때 strong 사이에 있는 문자는 거센 억양으로 소리를 내어 발음합니다.

위의 예시처럼 글의 주요 주제를 강조하여, 독자가 쉽게 중요한 내용을 파악할 수 있게 합니다. 이는 단지 사람에게만 강조하는 것이 아니라 검색엔진이나 스크린리더 등에게도 중요한 내용임을 알려주는 것입니다.

5. br & hr 태그

HTML에서 <br> 태그와 <hr> 태그는 각각 줄 바꿈과 수평선을 나타내는 데 사용됩니다. 이 태그들은 문서의 구조를 더 명확하게 하고, 시각적으로 내용을 구분하는 데 유용합니다.

이 예시에서는 여러 곳에서 줄 바꿈을 사용하여 텍스트를 여러 줄에 걸쳐 표시합니다. <br> 태그는 블록 요소가 아니므로, 문단을 나누지 않고 같은 문단 내에서 줄 바꿈을 생성합니다. br은 break(line break)의 약어로 줄을 나눈다는 뜻입니다.

HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한 줄로 보입니다. 위 예제이서 <br>태그를 모두 지워보세요. 그래서 개행이 필요할 때에는 <br> 태그를 사용합니다.

<br> 또는 <br/>, <br />처럼 사용해도 동작에는 문제가 없습니다. 호완성(XHTML, JSX), 가독성, 안정성을 위해 <br />을 사용하길 권합니다.

<br>는 스타일을 꾸미기 위해 사용하지 않습니다. 또한 줄바꿈이 필요한 경우에만 사용하고, 문단을 나누는 데는 <p> 태그를 사용하는 것이 좋습니다.

<hr> 태그는 수평선을 그리는 태그입니다. hr은 horizontal rule의 약어로 수평선을 그린다는 뜻입니다. 수평선은 문단을 구분하거나 콘텐츠를 구분하는 데 사용됩니다. 수평선은 블록 요소로 처리되어, 수평선 위 아래로 줄 바꿈이 추가됩니다. <hr> 태그가 구획을 나누는 중요한 역할을 한다면 스크린 리더가 이를 인식할 수 있도록 하는 것이 좋습니다.

6. pre 태그

<pre> 태그는 HTML에서 사전 서식 텍스트(preformatted text)를 정의할 때 사용됩니다. 이 태그는 HTML 문서에 작성된 내용을 그대로 표현하며, 공백과 줄 바꿈을 유지합니다. 텍스트는 고정 폭 글꼴(fixed-width font)로 표시됩니다.

아래와 같이 공백이 필요한 코드, 혹은 텍스트를 사용해 그림을 그릴 때 사용합니다.

<pre> 태그는 주로 텍스트의 공백과 서식을 유지해야 할 때 사용됩니다. 만약 <code>를 표현하기 위해 <pre>를 사용했다면 <code> 태그와 함께 사용하여 코드 블록이라는 것을 더 명확하게 표시하는 것이 좋습니다.