[MDN] HTML 문서에서 뭐 봐?

🐾들어가며

HTML을 공부하기 시작하면서 시맨틱 태그를 사용하는 것에 욕심이 있습니다. 그래서 어떤 태그를 쓸 지 고민하면서 MDN을 보면서 확인하는데, 요즘 다른 내용들이 더 눈에 보이기 시작했습니다. 초반에 MDN을 보면서 이 부분을 봤으면 더 좋았을 텐데 하면서도 지금이니까 보이는 부분이라고 생각이 듭니다.

필수적으로 보는 MDN HTML 태그 정보들

• HTML 태그의 종류 // Content Categories
• Technical summary
• 브라우저 호환성 // Browser compatibility

✨본격적으로

✅HTML 태그의 종류

시맨틱하게 사용한다는 것은 해당 태그의 특성을 알고, 어떤 정보를 표현하는 지 알고 사용한다는 것입니다. 이를 좀 더 쉽게 알 수 있는 방법이 있습니다.

가장 먼저 태그를 사용하는 위치와 해당 태그를 써서 표현하고 싶은 정보(콘텐츠)의 종류를 아는 것입니다. 그에 따라 사용하는 태그의 종류도 달라집니다. 태그의 종류는 다음과 같습니다.

태그의 종류 > https://developer.mozilla.org/ko/docs/Web/HTML/Content_categories

그리고 각 종류들은 다음과 같은 관계를 가지고 있습니다.

만약 어떤 콘텐츠의 제목이라면 heading 태그 중에서 사용할 수 있습니다.

표현하고 싶은 정보가 예를 들어 단순히 설명 글 정도라고 했을 때, 먼저 plain text를 포함하는 태그(콘텐츠)의 종류는 flow와 phrasing입니다. 그 중, phrasing의 정의는 paragraph를 꾸며주는 용도입니다. 그 중 더 상위 개념인 flow 에 속하는 <p> 태그를 사용하고 phrasing 태그들을 <p> 태그 내부에 사용하여 더 다양한 정보를 표현할 수 있습니다.

태그 간의 관계가 헷갈려 어떤 하위 태그를 사용해도 되는지 잘 모를 수 있습니다.

✅Technical summary

이때 해당 태그를 자세히 볼 수 있는 문서로 들어가주세요. 위의 예시를 이어서 설명하기 위해 <p>태그를 보았습니다. 오른쪽 목차 중에 Technical summary 부분을 보면 태그에 대한 정보가 한눈에 보입니다.

• Content categories : 태그가 표현하는 정보의 종류, 태그의 종류
• Permitted content: 허용하는 하위 태그의 종류
• Tag emission: 태그 생략 가능 여부 및 조건 설명
• Permitted parents: 허용하는 부모 태그의 종류
• Implicit ARIA role: 기본적은 ARIA 역할
• Permitted ARIA roles: 허용하는 ARIA 역할
• DOM interface: 해당 태그의 타입 //타입스크립트

위의 정보를 토대로 태그 간의 관계, ARIA, 태그의 타입 등을 한눈에 파악할 수 있습니다. 이 정보를 토대로 좀 더 시맨틱하게 사용할 수 있는 것입니다.

✅브라우저 호환성

태그를 사용할 때 이것저것 따져가며 사용했는데, 정작 브라우저가 지원을 안 한다면..? 헛고생입니다. 그러니 태그를 사용할 때 브라우저 호환성도 충분히 검토해주세요!

<meter> 태그의 경우

이 태그를 사용해야 한다면, 웹뷰(안드로이드)로 들어왔을 때 경고를 띄우고 크롬 등의 링크로 안내하는 게 좋을 듯 합니다ㅎㅎ

✔️결론

리액트에서 div 멈춰!! 태그를 알면 컴포넌트도 SOLID하게 쓰기 편하다!!

아토믹 디자인 패턴을 쓰는 이유는 작은 컴포넌트가 UI를 보여주는 기능 하나만을 담당할 수 있다는 이유도 있습니다. 그렇다면 하나의 UI를 보여주는 atoms 들도 각각의 역할 하나만을 담당할 수 있도록 시맨틱하게 만드는 것이 어떨까 합니다.