의미는 없지만 기능은 존재하는 태그들

div 태그

div 태그는 division(분할, 구분, 경계선) 이라는 단어에서 나왔다. 따라서 div 태그를 사용하면 기존 태그들의 구분이 가능해진다. 

 

<form>
	<label for="website1">website</label>
	<input id="website1" required placeholder="Name" type="url">

	<label for="website2">website</label>
	<input id="website2" required placeholder="Name" type="url">
    
    <input type="submit" value="Create Account">
</form>

위와 같이 작성된 코드는 아래와 같이 가로방향 한 줄로 표현이 된다. 

 

website website

 

여기서 div를 활용하면 해당 input 태그들을 위 아래로 줄바꿈 해줄 수 있다.

 

<form>
    <div>
        <label for="website1">website</label>
        <input id="website1" required placeholder="Name" type="url">
    </div>

    <div>
        <label for="website2">website</label>
        <input id="website2" required placeholder="Name" type="url">
    </div>

    <input type="submit" value="Create Account">
</form>

 

website

website

 

이렇듯 div 태그는 의미는 가지고 있지 않지만 기능은 가지고있는 태그이다. 이러한 태그를 non-semantic 태그라고 부른다. 

 

header, main, footer 태그

head라는 명칭이 들어가지만 head태그와는 다른 header 태그이다. 이 태그는 div태그를 대체하여 사용할 수 있는 태그로 div 태그와 기능은 같다. 하지만 div 태그와 달리 태그의 이름만으로 의미를 짐작할 수 있다. 아래와 같이 div 태그를 대체하여 header, main, footer 태그를 작성할 수 있다. 이는 모두 div 태그로 통일되어있을 경우 어디부터 어디까지가 header이고 main 이고 footer로 구분되는지 한번에 알아보기가 어려운 것을 해결하기 위해 만들어진 태그이다. 이런 태그를 semantic 태그라고 부른다. 

<header>
    <h1>제목</h1>
</header>
<main>
    <p>내용</p>
</main>
<footer>
    &copy; 2023 jessie
</footer>

 

제목

내용

© 2023 jessie

 

div 태그와 header, main, footer 태그와 같이 자신의 옆에 다른 요소가 오는 것을 허용하지 않는 태그들을 block 이라고 부른다. 해당 태그는 자신의 양쪽에 다른 요소가 오는 것을 허용하지 않아 여러 태그를 만들면 세로방향의 일자로 나란히 줄을 세우게 된다. 

span, p 태그

span 태그는 짧은 text를 입력하기 위해 만들어진 태그이다. p 태그는 문단을 작성하기에 적합한 태그이다. div 등의 위에서 살펴본 태그들과 달리 span 태그는 자신의 옆에 다른 요소가 올 수 있다. 때문에 가로뱡향의 일자로 줄이 세워진다. 이러한 태그를 inline이라고 부른다. inline이란 같은 줄에 위치할 수 있다(in the same line)는 뜻이다. p 태그는 문단 작성에 적합한 태그인 만큼 div 등의 태그와 같이 옆에 다른 요소가 오는 것을 허용하지 않는다.

 

address 태그

주소를 작성하기에 적합한 address 태그도 있다. 

<address>서울시 주소구 주소로</address>

 

서울시 주소구 주소로

 

결론적으로, 의미는 없지만 기능이 존재하는 div, span, p 와 같은 non-semantic 태그들을 사용해도 아무런 문제는 없다. 하지만 알아보기 쉬운 html 태그들인 semantic 태그를 활용하면 좀 더 한눈에 이해하기 쉬울 것이다. 

 

그 외의 태그들은 아래의 사이트에서 확인이 가능하다.

mdn - content sectioning 태그