HTML 의미 이해

1. HTML 의미론이란 무엇인가요?

<기본적으로 제목(H1~H6), 목록(li), 강조(strong em) 등과 같은 몇 가지 주요 태그를 중심으로 이루어집니다.>

콘텐츠의 구조(콘텐츠 의미론)를 기반으로 적절한 태그(코드 의미론)를 선택하면 개발자가 보다 우아한 코드를 읽고 작성할 수 있으며 브라우저 크롤러와 기계가 코드를 잘 구문 분석할 수 있습니다.

2. 왜 의미론인가?

• CSS 없이 페이지에 좋은 콘텐츠 구조와 코드 구조를 나타내기 위해: 알몸으로 실행할 때 보기 좋게 하기 위해
• 사용자 경험: 예를 들어 제목과 대체를 사용하여 명사를 설명하거나 사진 정보를 설명하고 라벨 태그를 유연하게 사용할 수 있습니다.
• SEO에 도움이 됩니다. 검색 엔진과 원활한 커뮤니케이션을 구축하면 크롤러가 더 효과적인 정보를 크롤링하는 데 도움이 됩니다. 크롤러는 태그를 사용하여 각 키워드의 맥락과 가중치를 결정합니다.
• 다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)에서 웹 페이지를 의미 있는 방식으로 렌더링할 수 있는 편리함
• 팀 개발 및 유지 관리가 더 쉽고 의미 체계가 더 읽기 쉽습니다. W3C 표준을 따르는 팀은 모두 이 표준을 따르므로 차별화가 줄어듭니다.

3. HTML 코드 작성 시 주의할 점은 무엇인가요?

• 의미 없는 태그인 div 및span을 최대한 적게 사용하세요.
• 의미가 명확하지 않은 경우 div 또는 p를 사용할 수 있습니다. p는 기본적으로 위쪽 및 아래쪽 간격을 가지므로 특수 터미널과의 호환성에 유리합니다.
• b, 글꼴, u 등과 같은 순수 스타일 태그를 사용하지 말고 대신 CSS 설정을 사용하세요.
• 강조해야 하는 텍스트는 Strong 또는 em 태그에 포함될 수 있습니다(브라우저 기본 스타일, CSS로 지정할 수 있는 경우 사용하지 않음). Strong의 기본 스타일은 굵게 표시됩니다(b를 사용하지 않음). , em은 이탤릭체입니다(i는 사용하지 마세요).
표를 사용할 때 제목에는 caption, 헤더에는 thead, 주요 부분에는 tbody, 꼬리에는 tfoot을 사용합니다. 테이블 헤더는 일반 셀과 구별되어야 합니다. 테이블 헤더에는 th를, 셀에는 td를 사용하세요.
• 양식 필드는 fieldset 태그로 래핑되어야 하며, 범례 태그는 양식의 목적을 설명하는 데 사용되어야 합니다.
• 각 입력 태그에 해당하는 설명 텍스트는 label 태그를 사용해야 하며, 입력에 대한 id 속성을 설정하고 label 태그에 for=someld를 설정하면 설명 텍스트가 해당 입력에 연결됩니다.

4. HTML5에 어떤 새로운 의미 태그가 추가되었는지 자세히 설명해주세요.

　

이 프론트엔드 마스터의 블로그를 확인하세요.