HTML

요소를 사용하는 방법

HTML <div> 사용 방법 알아보기 요소.

<div> 요소는 콘텐츠를 분할, 그룹화 및 캡슐화하는 데 사용되는 일반 컨테이너 요소입니다.

<div>만 사용해야 합니다. 의미 체계 HTML 요소가 컨텍스트와 관련하여 사용하는 것이 의미가 없는 경우(또는 확실하지 않은 경우) 요소를 사용합니다.

시맨틱 마크업 내부에 넣은 콘텐츠의 의미/기능을 설명하는 HTML 요소를 사용할 때입니다. <div> 요소는 일반/비의미적 요소입니다.

요소의 사용 사례

사이트 방문자가 뉴스레터를 구독하도록 유도하는 재사용 가능한 모달 구성요소를 웹사이트에 코딩한다고 가정해 보겠습니다.

그러한 구성 요소를 정의하기 위한 기존의 시맨틱 HTML 태그가 없으므로 일반 <div>를 언제 사용해야 하는지에 대한 완벽한 예입니다. 컨테이너 요소:

<div class="subscribe-modal">
  <form id="contact" method="post" action="">
    <fieldset>
      <h3>Subscribe to my Newsletter</h3>
      <input
        name="email"
        id="email"
        type="email"
        placeholder="Enter your email address here"
        required
      />
      <input type="submit" name="submit" class="submit" value="Subscribe!" />
    </fieldset>
  </form>
</div>

<div> 태그는 컨테이너 요소를 정의하는 데 사용되는 많은 HTML 태그 중 하나입니다. 가장 일반적으로 사용되는 HTML 컨테이너 요소는 다음과 같습니다.

<article> ,<section> , <main> , <header> , <footer> ,<form> .

위의 요소 중 하나라도 콘텐츠의 컨테이너로 사용하기에 적합하다면 일반 <div> 대신 사용하세요. .

왜요? 모두 시맨틱 요소 태그이기 때문에 동안 <div> 특정 컨텍스트를 제공하지 않는 의미 없는 태그입니다.

요소에 대해 알아두면 좋은 정보

<div> 안에 모든 유형의 콘텐츠를 넣을 수 있습니다. 요소.

시맨틱 마크업이 일반적으로 권장되지만 브라우저가 페이지를 이해하고 사용자에게 렌더링할 필요는 없습니다.

그러나 HTML에 이미 사용할 의미 태그가 있는 상황에서 일반/비의미 HTML 요소를 사용하면 SEO에 피해를 줄 수 있습니다.

일반적으로 <div>를 사용합니다. 잘못된 요소보다 일반 요소를 사용하고 싶기 때문에 어떤 HTML 요소를 사용할지 확실하지 않은 경우 요소입니다. 게다가 <div>는 실제로 사용할 수 없습니다. 기술적 관점에서 요소가 잘못되었습니다. 의미론적 관점에서만.