📌 웹 표준
웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙이며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.
✔️ 웹 표준의 장점
- 수정 및 유지보수의 용이성
- 접근성 향상
- 검색 엔진 최적화 (SEO)
- 호완성 확보
📌 Semantic HTML
HTML을 시멘틱(semantic)하게 작성한다는 것은 HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만들겠다는 의도가 담겨있다.
✔️ 시멘틱 요소
<header>: 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소입니다.<nav>: 메뉴, 목차 등에 사용되는 요소입니다.<aside>: 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.<main>: 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.<article>: 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의<article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.<section>: 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.<hgroup>: 제목을 표시할 때 사용하는 요소로,<h1>~<h6>요소가<hgroup>입니다.<footer>: 페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소입니다.
✔️ 시멘틱하게 HTML 태그 작성하기
- 블록 요소 안에 인라인 요소 넣기
<h1>
<span>인라인은 꼭 블록 안에 넣어주세요.</span>
</h1><b>,<i>가 아닌<strong>과<em>사용하기
<!-- 나쁜 예시 -->
<b>글씨를 두껍게</b>
<i>글씨 기울이기</i>
<!-- 좋은 예시 -->
<strong>콘텐츠 매우 강조하기</strong>
<em>콘텐츠 강조하기</em><hgroup>적절하게 사용하기
<!-- 나쁜 예시 -->
<h1>엄청 큰 글씨</h1>
<h3>적당히 큰 글씨</h3>
<h2>큰 글씨</h2>
<h6>엄청 작은 글씨</h6>
<h4>그냥 글씨</h4>
<!-- 좋은 예시 -->
<h1>제목</h1>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h3>작은 목차</h3>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h4>더 작은 목차</h4>
<h4>더 작은 목차</h4><br />은 줄바꿈을 사용할 때에만 사용하기
<!-- 나쁜 예시 -->
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
<!-- 좋은 예시 -->
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>- 인라인 스타일링 지양하기
<!-- 나쁜 예시 -->
<h3 style="color: blue">인라인 스타일링은 되도록 사용하지 마세요.</h3>
hello world!