의미 HTML.무엇
무슨
의미 HTML은 개발자와 브라우저가 좋은 개발과 방문 체험을 만드는 데 도움을 준다.W3Schools에 따르면 의미 요소는 브라우저와 개발자에 대한 의미를 명확하게 묘사했다.
왜?
그것의 주요 장점 중 하나는 아마도 가장 중요한 것일 것이다. 웹 사이트를 쉽게 방문하는 데 도움이 되는 것이다.화면 판독기나 보조 장치는 웹 페이지에서
<p></p>과 같은 의미를 부여하는 요소를 스캔해서 제목을 알 수 있습니다.무장애 사이트는 모든 유형의 사용자에게 내용을 제공하는데 이것은 모든 사이트와 웹 개발자의 주요 목표이다.뿐만 아니라 소송(news article)을 피하고 더 좋은 검색엔진 최적화, 원래 발견할 수 없었던 가용성 문제를 발견한 등 커다란 결과를 가져왔다.따라서 더 많은 일과 봉사 정신을 필요로 하지만, 추가 시간은 가치가 있다.
의미 HTML 외에 사이트를 방문할 수 있는 여러 가지 측면이 있다는 것을 잊지 마라. 예를 들어 그림의alt, 아리아 라벨, 그리고 정확한 색 대비도 사용 등이다.evaluation tool을 보시면 프로젝트에 접근할 수 있는 체험을 만들 수 있습니다.
의미 HTML이 제공하는 기타 이점:
더욱 가벼운 개발 체험.개발자들은
<header></header>이 어떤 사건을 촉발하는 데 쓰이는 것이지 사건 탐지기로 <button></button>을 촉발하는 것이 아니라는 것을 이해하기 쉽다.모바일 장치에 적합합니다.Mozilla에 따르면 의미 HTML의 파일 크기는 비의미 스파게티 코드보다 가볍다.또한 응답이 용이합니다.
검색엔진 최적화에 유리하다.검색엔진은 간단한
<div></div>이나 div보다 링크, 제목, 페이지의 키워드를 더 중시한다. 이는 우리 사이트가 고객에게 더욱 쉽게 발견될 수 있음을 의미한다.어째서.
HTML의 의미가 매우 중요하다는 것을 알았으니, 우리는 신구 프로젝트에서 그것을 어떻게 응용하는지 배워야 한다.모두 13개의 의미 표시가 있지만 가장 많이 사용하는 것은
span, article, aside, footer, header, nav과 section이다.다음은 메모지입니다. 의미 사이트를 개발하는 데 도움을 줄 것입니다.마찬가지로, W3Schools article의 기타 내용을 검사해 주십시오.
일단 이러한 라벨을 배우고 실천한다면 미래에 의미 사이트의 코드를 작성하는 것이 훨씬 쉬워질 것이다. 이를 이해하면 많은 개발자들과 구별될 수 있을 것이다.
예.
이것은 우리가 해서는 안 될 예이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Non-Semantic HTML</title>
</head>
<body>
<div class="navigation">
<span>Logo<span>
<div aria-label="menu" class="navigation__button" />
<div class="navigation__links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</div>
</div>
<div class="hero">
<img class="hero__video" alt="Promotion video" src="assets/video.png" />
<div class="hero__left">
<div class="hero__text-box">
<h1 class="heading-primary">Work around you and your team</h1>
<h3 class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus lacus ac justo mollis hendrerit. Nulla justo diam, efficitur eu dolor non, mollis semper urna.
</h3>
<div class="btn btn--purple">get started</div>
</div>
</div>
<img class="hero__image" alt="Colorful waves" src="assets/groove.png" />
</div>
</body>
</html>
이제 의미 HTML로 변환하면 다음과 같이 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Pixel Perfect Layout</title>
</head>
<body>
<header class="navigation">
<h1>Logo<h1>
<button aria-label="menu" class="navigation__button"/>
<nav class="navigation__links">
<!--
Using lists helps screen readers
receive orienting information about
related content.
-->
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
<ul>
</nav>
</header>
<section class="hero">
<img class="hero__video" alt="Promotion video" src="assets/video.png" />
<div class="hero__left">
<header class="hero__text-box">
<h1 class="heading-primary">Work around you and your team</h1>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus lacus ac justo mollis hendrerit. Nulla justo diam, efficitur eu dolor non, mollis semper urna.
</p>
<button class="btn btn--purple">get started</button>
</header>
</div>
<img class="hero__image" alt="Colorful waves" src="assets/groove.png" />
</section>
</body>
</html>
결론
의미 HTML은 사용자, 개발자, 브라우저에 많은 중요한 장점을 가진다.우리 웹 개발자들에게 접근 가능하고 효율적인 HTML을 작성하는 것은 반드시 주요한 방법이어야 한다.개발자는 더욱 높은 가독성을 얻을 수 있을 뿐만 아니라 사용자 체험도 개선할 수 있다는 것이 모든 사이트의 가장 중요한 목표이다.
레이아웃 모델과 의미 HTML을 만드는 방법을 알았으니 놀라운 레이아웃을 만들 수 있습니다.이 시리즈의 마지막 부분에서 우리는 원활한 디자인을 신속하고 효율적인 HTML과 CSS로 전환할 것이다.
더 많은 최신 웹 개발 내용에 관하여 계속 저를 주목해 주십시오!읽어주셔서 감사합니다!😎
내가 통신하는 거 알아?📬
만약 내가 새로운 블로그 게시물을 발표할 때 알림을 받고 웹 개발에서 선두를 유지하기 위해 매주 훌륭한 자원을 받고 싶다면 https://jfelix.info/newsletter을 방문하십시오.
Reference
이 문제에 관하여(의미 HTML.무엇), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joserfelix/semantic-html-what-why-and-how-14n0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
