[HTML] 시멘틱 요소

웹 UI 개발 코칭스터디 1기/미니 프로젝트

개념강의 |  3. 콘텐츠모델, 시멘틱마크업, 블록&인라인 - 3) HTML5 시멘틱 요소

 

<div>태그는 블록레벨 태그이며 <span>태그는 인라인레벨 태그라는 차이점이 존재합니다.

의미론적인 웹(Semantic Web)을 개발하기 위해서는 <div>혹은 <span>태그들로만 레이아웃을 구성하는 것이 아니라

다양한 시멘틱 태그들을 사용해야 합니다.

 

아래의 코드는 '홈페이지 하단'에 존재하는 '주소와 같은 연락 정보'를 나타내고 있습니다.

반복적으로 <div>태그가 쓰였다는 점을 문제점으로 볼 수 있죠.

(1)과 (2)번에 쓰인 <div> 태그들을 적절한 시멘틱 태그들로 바꿔보세요.

<div>                                                   ----> (1)
    <div>                                               ----> (2)
       회사 정보<br>
       서울시 강남구 역삼동<br>
       Tel : (02)123-4567  | Fax : (02)123-4567
    </div>                                               ----> (2)

 

1. <footer>

2. <address>

---

4번) 정답

두 문항 모두 <div>태그와 대응되어야 하기 때문에 '블록 레벨 태그'임을 유추할 수 있습니다.

또한 문제에서 제시된 '홈페이지 하단'이라는 키워드를 통해 <footer>태그가 적절한 태그임을 알 수 있습니다.

그리고 '주소와 같은 연락 정보'라는 키워드를 통해 <address> 태그가 적절한 태그임을 알 수 있습니다.

 

의미론적인 웹(Sematic Web)엔 여러가지 시멘틱한 구획화 태그가 존재합니다.

아래의 URL을 참고해, 어떤 시멘틱한 구획화 태그들이 있는지 살펴보시면 도움 되실 것같습니다.

 

[참고 url: https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning]