시맨틱 마크업(Semantic Markup):
의미를 가진 HTML 태그를 사용하여 문서의 구조를 더 명확하게 만드는 것.
- 의미 없는 마크업 vs 시맨틱 마크업:
<!-- 의미 없는 마크업 -->
<div class="header">
<div class="logo">로고</div>
<div class="nav">
<div class="nav-item">메뉴1</div>
<div class="nav-item">메뉴2</div>
</div>
</div>
<!-- 시맨틱 마크업 -->
<header>
<h1>로고</h1>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>
</header>- 자주 사용되는 시맨틱 태그들:
<header> - 머리글, 로고, 네비게이션 등
<nav> - 네비게이션 메뉴
<main> - 주요 콘텐츠
<article> - 독립적인 콘텐츠 (뉴스 기사, 블로그 포스트 등)
<section> - 관련된 콘텐츠의 구분
<aside> - 사이드바, 광고 등 부수적 콘텐츠
<footer> - 바닥글, 저작권 정보 등
<figure> - 이미지, 다이어그램 등
<time> - 날짜, 시간 정보- 실제 웹사이트 구조 예시:
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>메인 기사 제목</h2>
<p>기사 내용...</p>
<time datetime="2024-02-04">2024년 2월 4일</time>
</article>
<aside>
<h3>관련 글</h3>
<ul>
<li>다른 기사 1</li>
<li>다른 기사 2</li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 웹사이트 이름</p>
</footer>
</body>시맨틱 마크업의 장점:
- 검색엔진 최적화(SEO) 향상
- 접근성 개선 (스크린 리더 등)
- 코드 가독성과 유지보수 용이
- 개발자 간 의사소통 향상
궁금한 것, 했던 것, 시행착오 그리고 기억하고 싶은 것들을 기록합니다.