피해야 할 5가지 일반적인 HTML 실수

1. 시맨틱 머리글과 바닥글
div에는 의미 체계가 없습니다. div를 사용하여 머리글이나 바닥글 구조를 만드는 대신 “머리글” 및 “바닥글” 요소를 사용하세요.

이러지 마

<div id="header">
...
</div>
<div id="footer">
...
</div>

이 작업을 수행

<header>
...
</header>
<footer>
...
</footer>

2. 그림 요소 사용
이미지에 캡션을 추가해야 하는 경우 “figcaption” 요소와 결합된 “Figure” 요소를 사용합니다.

이러지 마

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

이 작업을 수행

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. 굵게 또는 기울임꼴 태그를 사용하지 마십시오.
“b” 및 “i” 태그는 프리젠테이션 태그이며 의미론적 의미가 없습니다. 대신 CSS에서 font-weight/font-style을 변경하거나 “strong” 또는 “em” 요소를 사용합니다.

이러지 마

<b>Bold</b>
<i>Italics</i>

이 작업을 수행

<strong>Bold</strong>
<em>Italics</em>

4. 설명 링크 사용
링크의 텍스트는 명시적이어야 하며 사용자를 리디렉션하는 위치를 전달해야 합니다. 사용자와 검색 엔진 모두 귀하의 콘텐츠와 다른 페이지와의 관계를 더 쉽게 이해할 수 있습니다.

이러지 마

<a href="url">
Check our pricing...
</a>

이 작업을 수행

Check our <a href="url"> pricing </a>

5. 인라인 스타일 사용하기
인라인 스타일을 작성하는 것은 프레젠테이션(CSS)과 구조(HTML)를 분리하는 원칙을 위반합니다. 대신 스타일시트에 스타일을 작성하십시오.

이러지 마

<h1 style="font-size: 24">
 Header
</h1>

이 작업을 수행

h1 {
font-size: 24
}