HTML태그의 관하여

HTML태그의 대해서 알아보자 ❗️

문서 구조 태그

<header> 헤더 영역
<main> 메인 영역
<section> 콘텐츠 영역
<aside> 사이드 바 영역
<footer> 푸터 영역

<nav> 네비게이션 영역 / 문서 내 다른 위치, 다른 문서로 연결할 때 사용
<article> 독립적인 콘텐츠를 사용할 때

❗️ <article>과 <section>의 차이

• HTML5에서는<header>요소를 <article>안에 포함하면 읽기 모드에서 함께 표시됩니다.
• HTML의 이 목차 인식 기능을 구현해놓은 웹 브라우저는 전혀 없기때문에 굳이 <section>태그를 쓸 이유가 없는 것입니다. 그리고 <section>태그가 <h1>태그를 둘러싸고 있는 것에 따라서 글자크기가 달라집니다. (섹션안에 섹션을 만들어서 넣으면 더 작아지고 이 것을 4번 반복하면 h1의 크기가 h1~h4의 크기와 같아지는 것을 알 수 있습니다.)

이 방식은 <h1>의 겉모습만 바꿀 뿐이다. <section>에 한 번 포함된 <h1>의 헤딩 ‘level 2’가 겉보기엔 <h2>와 똑같아 보일 수 있다. 하지만 파이어폭스 개발자 도구에 있는 접근성 검사 기능을 열어보면, 접근성 트리에는 여전히 헤딩의 깊이가 ‘1’로 등록되어 있음을 알 수 있다.

• <h1>을 여기저기 잔뜩 쓰지 말 것. 페이지의 주 제목으로 <h1>을 쓰고, 다음으로는 <h2>, <h3>, <h4>… 이런 식으로 순차적으로 제목의 깊이를 정한다.
• 글의 특정 영역이 시작하고 끝나는 지점을 스크린리더 사용자가 알아챌 수 있게 하려면 <section>과 aria-label을 사용하라. 그런 목적이 아니라면 그냥 다른 태그를 쓰도록 하자. 이를테면 <aside aria-label=“간단 요약”>이라고 한다거나, 굳이 <div> 태그를 써야 할 이유가 있다면 <div role=“region” aria-label=“간단 요약”>이라고 쓸 수도 있겠다.
• <main>, <header>, <footer>, <nav> 등은 스크린리더 사용자에게 매우 유용한 태그이며, 보조 기술을 사용하지 않는 사람들에게는 아무 영향을 주지 않는다. 적극적으로 활용하자.
• <article>은 블로그 글만을 위해서 만들어지지 않았으며, 독자적으로 완성된 콘텐츠는 무엇이든 담을 수 있다. 특히 watchOS에 콘텐츠가 제대로 표시될 수 있게 하는 데 큰 도움이 된다.

내용 입력

텍스트 입력
<h1>,<h2>,...	제목
<p>	단락
<br>	줄 바꿈, 닫기 태그 없음
<blockquote>	인용문, 들여쓰기 적용됨
<strong>	텍스트 굵게, 주로 중요한 내용일 때
<b>	텍스트 굵게, 단순히 굵게 표시할 때
<em>	텍스트 기울임, 강조할 때
<i>	텍스트 기울임, 단순히 기울여 표시할 때
<u>	텍스트 밑줄
<s>	텍스트 취소선
<abbr>	줄임말
<cite>	참고 내용
<code>	소스 코드
<small>	작은 텍스트
<sub>	아래 첨자
<sup>	위 첨자
<ins>	공동작업문서에 새로운 내용 삽입
<del>	공동작업문서에 기존 내용 삭제

목록 입력

기본형 (ol)

기본형(ul)

표 입력

<td>,<th>
rowspan="2"	2개의 행 합치기
colspan="2"	2개의 열 합치기

열의 스타일 속성 지정

열 1개만 지정할 땐, <col>
여러 열을 지정할 땐, <colgroup>