소개
시맨틱 HTML 은 웹 개발에서 중요한 개념입니다. 이는 검색 엔진과 보조 기술이 웹사이트의 콘텐츠를 더 잘 이해하도록 돕기 때문입니다. 시맨틱 HTML 을 생성하는 데 사용할 수 있는 요소 중 하나는 <article> 태그입니다. 이 랩에서는 <article> 태그를 사용하는 방법과 접근 가능한 웹 페이지를 만드는 데 어떻게 도움이 되는지 배우겠습니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML5 구조 추가
선호하는 텍스트 편집기에서 index.html 파일을 생성하고 저장합니다.
index.html 파일에 기본 HTML5 구조를 추가합니다. 여기에는 <!DOCTYPE html> 선언, <html> 요소, <head> 요소 및 <body> 요소가 포함됩니다.
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
태그 추가
<body> 요소 내부에 <article> 태그를 추가합니다. 이 태그는 웹 페이지의 주요 콘텐츠를 포함합니다. <article> 태그는 시작 태그와 종료 태그를 갖습니다.
<article>
<!-- Add main content here -->
</article>
Article 내용 추가
<article> 태그 내부에 웹 페이지의 주요 콘텐츠를 나타낼 콘텐츠를 추가합니다. 이는 기사, 블로그 게시물 또는 제품 설명 등 무엇이든 될 수 있습니다.
<article>
<h1>My Awesome Article</h1>
<p>
This is the main content of my webpage. It is a really awesome article that
everyone should read.
</p>
<p>Here are some reasons why:</p>
<ul>
<li>It is well-written</li>
<li>It is informative</li>
<li>It is funny</li>
</ul>
</article>
Footer 태그 추가
<article> 태그 내부에 콘텐츠에 대한 추가 정보를 제공하기 위해 <footer> 태그를 추가합니다.
<article>
<h1>My Awesome Article</h1>
<p>
This is the main content of my webpage. It is a really awesome article that
everyone should read.
</p>
<p>Here are some reasons why:</p>
<ul>
<li>It is well-written</li>
<li>It is informative</li>
<li>It is funny</li>
</ul>
<footer>
<p>
Published on <time datetime="2022-09-15">September 15th, 2022</time> by
<a href="#">John Doe</a>
</p>
</footer>
</article>
index.html 파일을 저장하고 웹 브라우저에서 열어 연락처 정보가 포함된 최종 웹 페이지를 확인하십시오.
요약
<article> 태그를 사용하는 것은 의미론적 HTML 을 생성하고 웹사이트의 접근성을 향상시키는 쉬운 방법입니다. <article> 태그를 사용하면 웹 페이지의 주요 콘텐츠에 대한 추가 정보를 제공하여 검색 엔진 및 보조 기술이 웹사이트를 더 잘 이해하도록 도울 수 있습니다. 항상 HTML 코드를 검증하여 오류가 없고 필요한 모든 표준을 충족하는지 확인하십시오.
