[HTML] 실무자가 자주 사용하는 HTML 태그 - 4탄

마지막! 4탄입니다.

정말 찐으로! 가~장 많이 사용하는 div, span 요소로 마무리해볼게요~!

 

7. 의미 없는 요소 <div>, <span>

의미를 따로 가지지 않아 언제든 사용할 수 있는 태그들입니다.

주로 요소들을 묶어 스타일을 주거나 텍스트에 스타일을 주기 위해 사용합니다.

 

그럼 문서 전체를 div, span 태그만으로 구성해도 될까요?

네! 가능합니다!

 

하지만 시맨틱 마크업에 어긋나기 때문에 W3C에서도 남발하는 것을 지양하라고 권고하고 있습니다.

W3C NOTE 발췌(https://www.w3.org/TR/2011/WD-html5-author-20110809/the-div-element.html)

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.

작성자는 적합한 다른 요소가 없는 경우 div 요소를 최후 수단의 요소로 볼 것을 강력히 권장한다. 더 적절한 요소 대신 div 요소를 사용하면 독자에게는 접근성이 떨어지고, 작성자에게는 유지보수가 어려워진다.

 

아래 동일한 내용을 (좌) div, span 요소로만 구성한 HTML 코드와 (우) 의미 있는 태그를 섞어 구성한 HTML 코드가 있습니다.

의미없는 요소로 마크업한 코드와 시멘틱 마크업 코드 비교

 

두 페이지를 렌더링시켜보면 따로 CSS 스타일을 적용하지 않더라도

브라우저에서 제공하는 스타일이 적용되어 아래와 같이 보기 좋게 구성됩니다.

 

크롬 브라우저 렌더링 결과

 

사실 이렇게 다른 스타일로 보여지는 것은 어느 브라우저에서 접속하느냐에 따라 달라지기 때문에 중요한 것은 아닙니다.

대신 각 태그마다 쓰임이 있고 이를 구분해서 사용하는 것이 잘 구조화된 웹페이지라는 점만 기억해주시면 좋을 것 같습니다 : )

 

따라서 여러 태그들을 한데 묶거나 큰 의미 없는 요소를 묶을 때 사용해주세요~!

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/span

<span> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/div

<div>: 콘텐츠 분할 요소 - HTML: Hypertext Markup Language | MDN

 

 

 

네 탄에 걸쳐 설명드린 태그들 외에 테이블 태그나 입력 폼 태그 등도 많이 사용되는 편이긴 합니다.

다만 연계하여 함께 알아야할 태그들이 많아 나머지 태그들은 하나씩 따로 설명드리도록 할게요!

 

---

 

각 요소를 최대한 디테일하게 잘 설명드리고 싶었는데,

그렇게 되면 글이 끝도 없이 길어질 것 같아서

실제로 제가 자주 사용하는 태그와 관련 속성들 위주로 설명드려봤습니다.

 

저는 실무에서 자주 사용하는 내용 위주로만 설명드렸으니

꼭 첨부해드린 MDN 링크에 접속해서 상세한 명세까지 살펴보시길 바라겠습니다!

그럼 화이팅입니다!

 

 

▼ 실무자가 자주 사용하는 HTML 태그 - 3탄 ▼

https://upzzang.tistory.com/9

[HTML] 실무자가 자주 사용하는 HTML 태그 - 3탄