br, wbr
br 태그는 줄바꿈을 위한 태그. wbr 태그도 간혹 사용하는데 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 함
a href="경로"
a 요소는 HTML의 핵심적인 요소로써 하이퍼 텍스트, 즉 링크를 만들때 사용
href(Hypertext Reference) 속성을 통해 경로를 지정하게됨. href 속성을 사용하지 않고 JS로 경로를 지정할 수도 있지만, 이는 웹 접근성에 위배됨으로 href 속성을 사용해 주는게 좋다.
html 문법상 section, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 section, 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>
구글 또한 이 a 테그에서 시작했음을 인지하고 논문을 읽어보는것도 좋다.
‘쉽게 설명한’ 구글의 페이지 랭크 알고리즘
b, strong
b태그는 굵은 글꼴을 표현하고 싶을 때 사용.
별 다른 의미는 없음. css로 컨트롤 가능하기 때문에 사용하지 x
strong 태그는 굵은 글꼴에 중요도를 더해 강조할 때 사용
i, em
i태그는 기울임 글꼴을 나타냄. HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분, 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용.
em태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있음.
<p>시장안은 사람들의 활기로 가득차 있었다.</p>
<p>
상인 : 이 상품은 현재 <em>30%</em> 할인중입니다!
나 : 아하 그렇군요! <i> '흠.. 왜 하필 지금 할인하는걸까?!' </i> 좀 더 구경하고 올게요!
</p>
<p>나는 상인의 의도를 의심할 수 밖에 없었다.</p>dfn
현재 문맥에서 정의하고 있는 용어를 나타냄. dfn의 가장 가까운 부모가 p 혹은 dt, dd, section 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주합니다.
문서에서 최초로 나타났을 때 사용
<dl>
<dt>WWW</dt>
<dd>
<dfn>WWW</dfn>는
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
- 위키백과
</dd>
</dl>abbr
abbr 태그는 준말, 약자를 나타내고 싶을 때 사용함.
보통은 홀로 쓰이고 dfn 태그로 감싸주기도 함.
<dl>
<dt>WWW</dt>
<dd>
<dfn><abbr title="World Wide Web">WWW</abbr></dfn>는
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
- 위키백과
</dd>
</dl>sup, sub
sup 태그는 윗첨자, sub 태그는 아랫첨자를 나타냄.
작은 글자를 표현하는 용도로는 사용하지 않으며 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용함
span
별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용.
여러 요소를 묶어 컨트롤하기 위한 영역으로 id를 주거나 클래스를 사용하기도 함.
div와 마찬가지로 최후의 수단으로 사용
