Text-level Semantics

<br>, <wbr>

• <br> 태그는 줄바꿈을 위한 태그입니다. <wbr> 태그도 간혹 사용하는데요. <wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것입니다.

<a href="경로">

- <a> 요소는 HTML의 핵심적인 요소로써 하이퍼 텍스트 즉, 링크를 만들 때 사용합니다.

• href 속성을 통해 경로를 지정할 수 있습니다. href 속성을 사용하지 않고 자바스크립트로 경로를 지정할 수도 있지만 이는 웹 접근성에 위배됨으로 href 속성을 사용해주는게 좋습니다.
• html 문법상 sections, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 하는것이 허용됩니다.
• <a> 요소안의 자식으로는 <a> 요소나 <button> 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요합니다.

<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>  // 새로운 창
<a href="./index.html">click</a>  
<a href="#three">click</a> <!-- 해쉬 링크 --> 
<a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<a href="./hello.pdf">pdf click</a>
<a href="./hello.pdf" download="a.pdf">pdf download click</a>

<b>, <strong>

• <b> 태그는 굵은 글꼴을 표현하고 싶을 때 사용합니다. 별 다른 의미는 없으며 오직 텍스트를 굵은 글씨로 표현하기 위한 용도이기 때문에 더 이상 사용하지 않는 요소입니다.
• <strong> 태그는 굵은 글꼴에 중요도를 더해 강조할 때 사용합니다. 중요도를 더 강조하고 싶을 때에는 strong을 중첩하기도 합니다.

<i>, <em>

• <i> 태그는 기울임 글꼴을 나타냅니다. HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주 언어가 한글이지만 영어로 표기되었을 경우), 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용합니다.
• <em> 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있습니다.

<dfn>

• 현재 문맥에서 정의하고 있는 용어를 나타냅니다. dfn의 가장 가까운 부모가 <p> 혹은 <dt><dd> 쌍, <section> 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주합니다. 문서에서 최초로 나타났을 때 사용합니다.

<abbr>

• <abbr> 태그는 준말, 약자를 나타내고 싶을 때 사용합니다. 보통은 홀로 쓰이고 dfn 태그로 으로 감싸주기도 합니다.

<sup>, <sub>

• <sup> 태그는 윗첨자, <sub> 태그는 아랫첨자를 나타냅니다. 작은 글자를 표현하는 용도로는 사용하지 않으며 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용합니다.

<span>

• 별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용합니다.
• 여러 요소를 묶어 컨트롤하기 위한 영역으로 id를 주거나 클래스를 사용하기도 합니다.
• div와 마찬가지로 최후 수단으로 사용하세요.