개발자로서 고려해야 할 사항 중 하나는 웹사이트를 사용하기 위해 스크린 리더가 필요한 사람들이 우리 사이트에 액세스할 수 있도록 하는 방법입니다. HTML은 마크업에서 의미론적 요소의 사용을 제공함으로써 이러한 노력을 지원합니다. 이 기사에서 우리는 웹 개발에서 사용하기 위해 더 대중적인 의미론적 요소들에 대해 다룰 것입니다.
시맨틱 HTML
'시맨틱 HTML'이 무엇을 의미하는지 설명할 때 '시맨틱'이라는 단어의 정의로 바로 이동하여 도움을 받을 수 있습니다. Merriam-Webster에 따르면 의미론은 기호의 의미 또는 의미에 대한 연구입니다. 따라서 시맨틱 HTML을 작성할 때 태그가 의미하는 바를 절대적으로 암시하는 HTML 코드를 생성합니다.
표준 방식으로 웹 페이지의 구조를 설명할 수 있도록 의미 체계 마크업을 사용합니다. 이를 통해 화면 판독기와 음성 도우미는 HTML 요소를 스캔하고 사용자가 요청할 경우 관련 정보를 사용자에게 반환할 수 있습니다.
의미론적 요소
HTML5 사양이 2014년에 출시되었을 때 웹 페이지의 구조를 더 잘 나타내기 위해 추가적인 의미 요소와 함께 제공되었습니다. 다음은 시맨틱 태그로 간주되는 태그 중 일부입니다.
<헤더>
헤더는 주로 섹션 시맨틱 HTML 요소로 작동하는 컨테이너 요소입니다. 일반적으로 <nav> 로고가 포함됩니다. 및 <h1> 웹사이트 자체를 설명합니다. 이는 일반적으로 사이트의 모든 페이지에서 일관됩니다.
<내비게이션>
<nav> 요소는 탐색 요소의 약자입니다. 사용자를 사이트의 다른 부분으로 연결하는 링크가 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
탐색 요소에는 링크, 메뉴 및 하위 메뉴가 있을 수 있습니다. 그러나 요소는 다른 <nav>를 포함할 수 없습니다. 집단. 위의 예에는 <img>가 있습니다. 로고 및 <nav>의 자리 표시자 역할을 하는 앵커() 요소를 포함합니다. 이것들은 모두 <header> 안에 중첩되어 있습니다. .
<메인>, <섹션>, –
<main> 태그는 초기 <header> 외부에 있는 사이트의 주요 콘텐츠를 알려줍니다. . <section>를 가질 수 있습니다. 고유한 <header>를 가질 수 있는 태그 및 <h2> –<h6> 집단.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
표제 태그에 대한 일반적인 경험 법칙은 하나 <h1> 페이지에 지정된 제목과 일치하는 페이지당 요소입니다. 또한 낮은 번호를 사용할 때까지 높은 번호의 제목을 사용할 수 없습니다. 그러나 순서 없이 높은 번호의 제목에서 낮은 번호의 제목으로 이동할 수 있는 능력이 있습니다. 이것은 기본적으로 웹 페이지의 구조를 따릅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header.main-header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
h6 {
text-decoration: line-through;
}
h6.ok {
text-decoration: none;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="main-header">
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<body>
<main>
<header>
<h2>
I'm an h2 -- Semantic Elements -- Describes purpose of main content
</h2>
</header>
<section>
<header>
<h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3>
</header>
<div>Content and More stuff and things that pertain to h3 </div>
<h4> I'm an h4 -- Even less important heading </h4>
<div>More content that pertains to h4</div>
</section>
<section>
<header>
<h3> We can go back up to h3 even though we used h4</h3>
</header>
<div>More stuff and things that pertain to h3 </div>
<h6>No h6 until h4 and h5</h6>
<h4> This can't be h6, unless h4</h4>
<div>More content that pertains to h4</div>
<h5> and h5 are used first. </h5>
<div>More content that pertains to h5</div>
<h6 class="ok">Now h6 can be used!</h6>
</section>
</main>
<footer>
</footer>
<script src="script.js"></script>
</body>
</html> 제목 태그를 순서에 맞지 않게 사용할 수 있지만 그렇게 하는 것은 모범 사례가 아님을 기억하십시오. 적절한 계층 구조가 있으면 접근성이 향상됩니다.
결론
시맨틱 HTML을 사용할 수 있는 가능성은 무궁무진합니다. 시맨틱 HTML 사용에 대한 문서는 MDN 웹사이트와 W3C 사이트에 있습니다. 의도를 설명하는 다른 태그는 두 사이트에 모두 나열됩니다. 문서를 찾는 방법을 알고 HTML 프로세서가 의미 체계를 사용하여 필요한 경우 사용자에게 추가 계층 정보를 제공한다는 사실을 인지하십시오.