시맨틱 HTML 요소: 다음은 div 요소 대신 사용할 8가지 요소입니다.

다시 안녕.

지난 시간에 우리는 조금 했습니다. 오늘은 HTML로 초점을 약간 옮기고 있습니다.

HTML은 Hyper Text Markup Language의 약자입니다. HTML에서 관련 태그를 사용하여 텍스트 문서의 모든 요소를 ​​나타낼 수 있습니다. 그러나 HTML5 표준이 출시되기 전까지 문서의 특정 영역을 나타내는 요소가 없었습니다.

결과적으로 바닥글과 탐색을 각각 나타내는 데 사용되는 div class=”footer” 또는 div class=”navigation”과 같은 마크업을 종종 찾을 수 있습니다. 이것이 작동하는 동안 의미상 이상적인 사용 사례는 아니었습니다. 내가 의미론적이라고 할 때, 각 HTML 요소가 의미 있는 방식으로 동등함을 나타내야 함을 의미합니다. 고맙게도 HTML5 표준의 등장은 의미론적 요소도 가져왔습니다.

의미론적 요소란?

문서에는 바닥글 섹션이 있습니다. HTML 문서에서 바닥글을 나타내기 위해 div class="footer"를 사용하는 대신 이제 전용 바닥글 요소를 사용할 수 있습니다.

시맨틱 요소의 등장은 HTML 마크업에 더 나은 의미를 가져왔고 더 직관적이고 합리적인 방식으로 HTML 요소에 대한 추론을 가능하게 했습니다.

더 이상 고민하지 않고 아래에 div 요소 대신 사용할 10개의 요소가 있습니다.

기사

기사는 블로그 게시물 또는 포럼 게시물을 나타낼 수 있습니다. 태그가 도입되기 전에는 다음과 같이 했을 것입니다.

<div class=”first-article”>
<h2>1st article</h2>
<p>This is the first article from Kingsley</p>
</div>

이제 모두 의미가 있습니다.

<article>
<h2>1st article</h2>
<p>This is the first article from Kingsley
</article>

<article>
<h2>2nd article</h2>
<p>This is the first article from Kingsley.</p>
</article>

보행인

바닥글 태그는 페이지의 하단 섹션을 나타내는 데 사용됩니다.

전에:

< div class=”footer”>
  <p>Kingsley Ubah</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</div>

지금:

<footer>
  <p>Kingsley Ubah</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

헤더

헤더는 기사 제목과 같은 일부 형식의 소개 콘텐츠 영역을 나타냅니다.

전에:

<div class=”article”>
  <div class=”header”>>
    <h1>React Definition</h1>
    <p>What is React?</p>
  </div>
  <p>React is a JavaScript framework...
</div>

지금:

<article>
  <header>
    <h1>React Definition</h1>
    <p>What is React?</p>
  </header>
  <p>React is a JavaScript framework...
</article>

탐색

탐색은 탐색 링크 세트를 보유하는 데 사용됩니다.

전에:

<div class=”nav”>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
 </div>

지금:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  </nav>

기본

이것은 문서의 주요 내용을 정의합니다.

전에:

<div class=”main”>
  <p> This is the main text </p>
 </div>

지금:

<main>
  <p> This is the main text </p>
</main>

부분

이름에서 알 수 있듯이 페이지의 섹션을 정의합니다.

<div class=”section-one”>
<h1>First Section</h1>
<p>This is the first section</p>
</div>

<div class=”section-two”>
<h1>Second Section</h1>
<p>This is the second section</p>
</div>

지금:

<section>
<h1>First Section</h1>
<p>This is the first section</p>
</section>


<section>
<h1>Second Section</h1>
<p>This is the second section</p>
</section>

그림 및 그림 캡션

그림 태그는 일러스트레이션, 코드 블록, 다이어그램, 사진 등과 같은 자체 포함된 콘텐츠를 지정합니다.
figcaption은 그림의 캡션을 정의합니다.

<figure>
  <img src="ubahthebuilder.jpg" alt="This is my blog">
  <figcaption>Fig1. – Blog Home</figcaption>
</figure>

곁에

side 요소는 사이드바와 같이 다른 콘텐츠 옆에 배치될 일부 콘텐츠를 정의합니다.

전에:

<p>This content is the main content which will be placed at the center</p>

<div class=”sidebar”>
<h2>Side Content</h2>
<p>This content will be aligned to the side</p>
</div>

지금:

<p>This content is the main content which will be placed at the center</p>

<aside>
<h2>Side Content</h2>
<p>This content will be aligned to the side</p>
</aside>

P/S: I recently launched my Beginners Guide to Web development for Absolute Beginners. Check it out .

이 8개는 div 태그 대신 사용되는 의미 체계 요소 중 일부입니다. 이 게시물이 깨달음을 얻으셨기를 바랍니다.

웹 개발에 대한 더 많은 정보를 얻으려면 이 블로그를 팔로우하십시오.

곧 봐요.