html 태그에는 BOX Tag와 ITEM Tag가 있다.
BOX Tag
: header, footer, nav, aside, main, section, article, div, span, form 등...
ITEM Tag
a, button, input, lable, img, video, audio, map, canvas, table 등...
box 태그는 써도 유저에게 바로 보이지 않지만, item 태그의 경우 일단 입력하면 바로 사용자에게 보여진다.
BLOCK / INLINE
블락은 말 그대로 블락 단위로 입력, 인라인은 라인 단위로 입력되는 것.
블락이면 자동으로 다음 줄로 넘어가고, 인라인이면 다음 칸 (같은 줄 내)에 입력된다.
Semantic Tags (Semantic Markup) 시멘틱 태그
: 의미있는 태그
- div 태그로도 웹 페이지 구현이 가능하긴 하지만, 의미를 딱히 담을 수는 없음.
가령 header 영역에 header 태그를 써서 표현할 수 있는 걸 div 태그로 표현한다면 header 영역의 의미를 가질 수는 없음.
헷갈리기 쉬운 태그들의 차이
<i>: 시각적으로만 이탤릭체
<em>: 강조하는 이탤릭체
<b>: 시각적으로만 볼드체
<strong>: 정말 중요한 볼드체
목록을 나타내는 태그들
<ol>: (ordered list) 순서가 정말 중요할 때 사용
<ul>: (unordered list) 순서가 없는 목록을 사용할 때, 단순히 목록화할 때 사용
<li>: (list item) 순서가 있는 목록. <ol> <ul> 태그 내부에서 사용, <li>가 실질적 목록 내용 역할
<dl>: (definition/description list) 정의나 설명을 할 때 사용. 목록을 생성하고 감싸는 역할
<dt>: (definition/description term) 정의나 설명 리스트에서 용어를 나타냄. <dl> 요소 안에 있어야 함.
<dd>: (description description) <dl> 안의 <dt>에 대한 정의, 설명, 값을 나타냄.
*<dd>, <dt>는 <dl> 밖에서 쓸 수 없다.
<img> vs css background-image
이미지를 직접 삽입할 때는 html에서 <img>를, 이미지가 문서의 배경전체에 삽입될 때는 css로 활용.
<button> vs <a>
<button>을 쓸 때: review/ login/ take quiz/ vote/ sign up now 등 사용자의 특정한 액션을 위해서, 특정한 행동이 발생할 때.
<a>를 쓸 때: 사용자가 클릭했을 때 어디론가 이동해야 할 경우
<table> vs css grid, flex
<table>: 행+열 데이터가 진짜 필요할 경우
css grid, flex: 테이블/ 그리드 형식으로 스타일링할 경우
*HTML 태그 참고