[HTML] html 태그 사용시 주의사항

<img> 태그 vs  background-image 속성

- 정보를 가지고 있는 경우 <img> 사용 (이미지 변경이 있을 수 있는 내용.) 

- 고정 이미지의 경우 background-image 처리 (ex. UI 컴포넌트)

(회사 Convention이나 개발자 스타일에 따라 기준이 다를 수 있음)

 

문단을 나누기 위해서 <br>을 사용하지 마라.

줄넘김을 위해 <br>을 사용할 수도 있지만,

문단 구분은 <p> 태그를 사용하는 것이 적절하다.

(줄 간격은 css margin을 이용해서도 가능.)

 

<img> 태그 안에 alt 속성을 채워넣자. 

이미지 로딩이 실패한 경우를 대비하여 대체 텍스트 표시.

 

Inline 요소 태그 안에 Block 요소 태그를 사용하지 말자.

[잘못된 예]

<span><p></p></span>

Block 요소: 줄 바꿈 속성을 가지고 있으며 기본 너비 속성이 100%입니다.

                   ex) <h1>~<h6>, <p>, <ul>, <li>, <ol>, <div> 등

Inline 요소: 줄 바꿈 속성이 없으며, 내용만큼 너비가 유지됩니다.

                   너비와 높이의 속성을 사용할 수 없습니다.

                   ex) <img>, <span>, <a> 등

                    * <a> 태그의 경우에는 Inline 요소이지만 내부에 Block 요소가 와도 무방.

범용 요소: Block 요소임에도 모든  요소를 포함할 수 있다.

                 ex) <div>, <li>, <dd> <address> <p>만 가능

 

[잘못된 예]

<ul>
    <div>
        <li><div></div></li>
    </div>
</ul>

구분된 요소와는 달리 <ul> 직계자식으로 <li>가 와야지 <div>가 와서는 안된다.

(<li> 태그 안에 <div>가 오는 것은 상관 없다.)