웹 페이지의 구조를 명확하게 표현하는 요소들이 있습니다. 아래 이미지는 시맨틱 요소를 사용하여 콘텐츠 섹션을 나눈 것입니다.
<address>는 주소 정보를 표시하고 해당 콘텐츠에 대한 연락처 정보를 나타내기 위해 사용합니다. 개인의 이름, 전화번호, 이메일 주소를 포함하며 조직의 이름, 로고, 웹사이트 주소, 소셜 미디어 계정, 메신저 계정을 포함합니다. 하지만 출판일 같은 연락처 외에 정보를 포함해서는 안 됩니다. <address>는 부모 요소에 따라 의미가 달라집니다. <footer>에 배치하여 사업체에 연락 방법으로 사용할 수 있으며, <article> 내에서 사용하여 글의 작성자를 나타냅니다. 이처럼 웹 페이지의 연락처 정보를 구조화하여 표시하는 데 도움이 됩니다. <address>는 <i>,<em>와 겉보기는 같지만, 연락처 표기 시에는 자체적인 의미를 가지는 <address>를 사용하는 것이 시맨틱 마크업에 적합합니다. <address>는 단순한 스타일링 목적으로 사용하지 않아서 스타일링은 CSS를 사용합니다. 요소 자체는 스타일을 가지지 않고 브라우저의 기본 스타일이 적용됩니다. 중복된 요소로 혼란을 야기하고 일관성을 해치지 않게 페이지 내에서 한 번만 사용합니다. 필수 요소가 아니므로 콘텐츠에 맞게 사용하시면 됩니다. <address>내부에 이메일주소나 링크를 포함할 때 <a>로 링크를 생성해서 사용하셔도 됩니다. <address>의 사용 예시입니다.
<footer>
<address>
<p>🏠: 서울 특별시 강남구</p>
<p>📞: 02-123-1234</p>
<p>💌: [email protected]</p>
</address>
<footer>
<article>은 사이트, 애플리케이션, 문서, 페이지 안에서 독립적인 콘텐츠 영역을 정의하기 위해 사용하므로 고유한 주제를 가져야 합니다. 뉴스 기사, 댓글, 레시피, 블로그 포스트 같은 독립적이며, 재사용할 수 있는 구획을 나타내는 요소입니다. 한 개의 문서가 여러 개의 <article>을 가질 수 있으며 각각의 <article>이 서로 다른 콘텐츠를 나타내야 합니다. <article> 안에는 여러 <section>이 사용될 수 있지만 의미상으로 관련된 콘텐츠 그룹을 나타내기 위해 사용되어야 합니다. <article>을 중첩해서 사용한다면 안쪽에 있는 내용은 바깥쪽과 관련된 내용으로 작성합니다. 각각의 <article>을 식별할 수단으로 제목<h1> ~ <h6>를 자식으로 포함합니다. 단순히 레이아웃을 위한 요소로 사용하지 않고 실질적인 내용을 담아야 합니다. <article>은 <section>과 다르게 다른 페이지로 재사용할 수 있는 영역을 그룹화하는 요소입니다. 따라서 내부의 콘텐츠는 자체 완결성을 가져야 하고 다른 페이지에서도 의미가 통하는지 확인해야 합니다. <article> 내부에 작성자 정보를 <address>를 사용해서 제공하지만 중첩된 <article>에서는 권장하지 않습니다. 중첩된 요소 내에서는 <p>, <div>를 활용하거나 다른 방법을 활용해서 작성자 정보를 제공하는 것이 적합합니다. <article>의 작성일자 및 시간을 <time>의 datetime 속성을 사용하여 작성할 수도 있습니다. <article>의 사용 예시입니다.
<article class="card-item">
<a href="#">
<img src="./img/고양이.jpg" alt="고양이 사진">
<div class="card-text">
<h2 class="title">야옹이</h2>
<p>고양이는 츄르를 좋아한다,,</p>
<p class="underline">Read</p>
</div>
</a>
</article>
<article class="card-item">
<a href="#">
<img src="./img/고양이_2.jpg" alt="고양이 사진">
<div class="card-text">
<h2 class="title">야옹이</h2>
<p>Card UI처럼 독립적으로 사용하는 부분에 article를 사용합니다. </p>
<p class="underline">Read</p>
</div>
</a>
</article>
<aside>는 문서의 주요 내용과 직접적으로 연관되지는 않고 페이지 전체 내용과는 관련된 부분을 나타내므로 문맥을 보충하는 역할을 합니다. HTML5부터 추가된 요소이며 시맨틱 마크업을 향상하기 위해 도입되었습니다. <aside> 안에서 적절한 의미를 가진 시맨틱 태그를 사용합니다. 예를 들어 사이드바 내용을 제공한다면 <nav>를 사용하여 탐색 링크를 감싸거나, 공지사항을 나타낸다면 <section>을 사용하여 의미적인 구획을 나눌 수 있습니다. 또한 적절한 제목, 설명, 레이블을 제공하여 작성합니다. 사용되는 곳 예시로는 부가적인 콘텐츠인 사이드바, 검색 폼, 인용문, 웹 애플리케이션 사이드 패널, 관련된 링크, 광고가 있습니다. CSS 스타일을 사용하여 요소를 적절히 디자인하고, 페이지 레이아웃에서 시각적으로 구분되도록 합니다. 주요 콘텐츠와 관계를 고려하여 적절한 위치에 배치하도록 합니다. <aside>는 <article>과 함께 사용하여 해당 <article>과 관련된 사이드 콘텐츠를 제공하는 데 사용될 수 있습니다. 필요한 경우에만 사용하고, 문서의 구조와 콘텐츠에 따라 적절하게 사용하는 것이 중요합니다. <aside>의 사용 예시입니다.
