“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
what is 시멘틱 마크업 ?
시멘틱 마크업은 html요소를 적절한 의미와 목적에 따라 사용하는 것을 말합니다.
html 코드에서 각 요소가 문서의 의미와 구조를 나타내도록 작성하는 것을 의미합니다.
이를 통해 검색 엔진은 문서를 더 잘 이해하고 보조기기 사용자는 더 쉽게 문서를 이해할 수 있습니다.
시멘틱 마크업을 사용하면 좋은 점
1. 검색 엔진 최적화에 도움이 됩니다.
검색 엔진은 html 코드에서 각 요소가 어떤 의미를 갖고 있는지 파악하며 검색 결과의 순위를 결정합니다.
시멘틱 마크업을 사용하면 문서의 의미와 구조를 명확하게 표현할 수 있어 검색 결과의 순위를 높일 수 있습니다.
2. 웹 접근성을 향상시킵니다. 시각 장애인이나 저시력자, 신체적 장애를 가진 사람들은 보조기기를 통해 웹사이트를 이용합니다.
시멘틱 마크업을 사용하면 보조기기가 문서의 구조와 의미를 더욱 정확하게 파악할 수 있어 사용자들이 웹사이트를 보다
쉽게 이해할 수 있습니다.
3. 코드의 가독성을 높입니다, 시멘틱 마크업을 사용하면 코드의 가독성이 높아집니다. 각 요소가 문서의 의미와 구조를
나타내기 때문에 코드를 읽는 사람들이 문서를 더 쉽게 이해할 수 있습니다.
시멘틱 마크업을 사용하기 위해 각 요소가 어떤 의미를 가지고 있는질 이해하고 적절한 요소를 사용해야 합니다.
예를들어, <h1>요소는 제목을 나타내는 데 사용되며 <p> 요소는 단락을 나타내는 데 사용됩니다.
이러한 요소들을 적절하게 조합하여 문서의 구조와 의미를 나타내는 것이 시멘틱 마크업의 핵심입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시멘틱 마크업</title>
</head>
<body>
<h1>반응형 웹</h1>
</body>
</html><h1>은 문서의 첫 제목을 의미하는 태그입니다.
이 부분을 보조기기가 반응형 웹 헤딩 일이라고 읽어준다면, 사용자가 이 부분이 제목임을 알 수 있습니다.
시맨틱 마크업을 하기 위해선 각 태그를 용도에 맞게 사용해야 합니다.
- 헤더/푸터에 <header> 와 <footer> 사용
- 메인 컨텐츠에 <main> 과 <section> 사용
- 독립적인 컨텐츠에 <article> 사용
- 최상위 제목으로 <h1> 사용
- 순서가 없는 목록으로 <ul>과 <li> 사용
- 내비게이션 <nav> 사용
what is 논리적 순서 마크업 ?
논리적 순서 마크업은 웹 접근성을 향상시키기 위해 html 코드에서 문서의 구조와 순서를 명확하게 표현하는 것을
말합니다.
이는 주로 보조기기를 사용하는 사용자들을 위한 것입니다.
시각 장애인이나 저시력자는 보조기기를 사용해 웹 페이지를 탐색합니다.
보조기기는 html 코드에서 요소의 순서와 구조를 파악하여 이를 읽어줍니다.
따라서 html코드에서 문서의 구조와 순소를 올바르게 나타내지 않으면 보조기긱 사용자들이 웹 페이지를 이해하는데
어려움을 겪을 수 있습니다.
논리적 순서 마크업을 사용하기 위해선 문서의 구조와 순서를 고려하여 html코드를 작성해야 합니다.
에를 들어, <h1> 요소는 문서의 가장 중요한 제목을 나타내는 데 사용 되며, 이어지는 제목은 <h2> ,<h3> 등의 요소를 사용하여
구조적으로 나열 돼야 합니다. 또한 <nav> 요소는 페이지의 주요 링크를 나타내는데 사용되며, <main> 요소는 페이지의 핵심 컨텐츠를
나타내는 데사용됩니다.
논리적 순서 마크업을 사용하면 보조기기 사용자 뿐 아니라 일반 사용자들도 더욱 쉽게 웹 페이지를 이해할 수 있습니다.
또한 검색 엔진 최적화에도 도움이 됩니다.
따라서 웹 접근성을 고려하여 html 코드를 작성하는 것은 매우 중요합니다.
✨ 감사합니다.
'HTML' 카테고리의 다른 글
| 움직이는 귀여운 강아지를 넣어 만든 퀴즈 사이트 (16) | 2023.03.08 |
|---|---|
| 내 스타일대로 만드는 카드 유형 페이지 (16) | 2023.03.07 |
| 섹션<section>과 관련된 태그 한 번에 정리 (14) | 2023.02.22 |
| 텍스트 관련 요소 (14) | 2023.02.17 |
| 인라인 구조, 블록구조 ? (12) | 2023.02.17 |