HTML 태그 <div>와 <span>의 차이점

질문 : HTML 태그의 차이점은 무엇입니까

그리고 ?

---

<div> 및 <span> 의 사용을 보여주는 간단한 예제를 요청하고 싶습니다.
id 또는 class 로 표시하는 데 사용되는 것을 보았지만 하나가 다른 것보다 선호되는 경우가 있는지 알고 싶습니다.

답변

---

• div 는 블록 요소입니다.
• span 은 인라인 요소 입니다.

즉, 의미 론적으로 사용하려면 div를 사용하여 문서의 섹션을 래핑해야하고 스팬은 텍스트, 이미지 등의 작은 부분을 래핑하는 데 사용해야합니다.

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... 불법입니다.

편집 : HTML5부터 일부 블록 요소는 일부 인라인 요소 내부에 배치 될 수 있습니다. 꽤 명확한 목록은 여기 MDN 참조를 참조하십시오. <span> 은 구문 콘텐츠 만 허용하고 <div> 는 흐름 콘텐츠이므로 위는 여전히 불법입니다.

몇 가지 구체적인 예를 요청 하셨으므로 볼링 웹 사이트 BowlSK에서 가져온 것입니다 .

 

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

좋아, 무슨 일이야?

내 페이지 상단에는 "헤더"라는 논리적 섹션이 있습니다. 섹션이므로 div (적절한 ID 포함)를 사용합니다. 그 안에는 사용자 표시 줄과 실제 페이지 제목의 두 섹션이 있습니다. 제목은 적절한 태그 h1 사용합니다. 섹션 인 사용자 표시 줄은 div 로 래핑됩니다. 그 안에서 사용자 이름이 span 래핑되어 스타일을 변경할 수 있습니다. 보시다시피 span 을 감았습니다.이를 통해 스타일 시트에서 색상을 변경할 수 있습니다.

또한 HTML5에는 기사, 섹션, 탐색 등과 같은 일반적인 페이지 구조를 정의하는 광범위하고 새로운 요소 집합이 포함되어 있습니다.

HTML 5 작업 초안 의 섹션 4.4에서는이를 나열하고 사용법에 대한 힌트를 제공합니다. HTML5는 여전히 작동하는 사양이므로 아직 "최종"이 아니지만 이러한 요소가 어디로 든 가고 있는지는 의심 스럽습니다. 일부 이전 버전의 IE에서 이러한 요소를 스타일링하려는 경우 사용해야하는 자바 스크립트 해킹이 있습니다. 해당 요소가 소스에 지정되기 전에 document.createElement 이를 처리 할 라이브러리가 많이 있습니다. 빠른 Google 검색을 통해 html5shiv가 나타납니다.

출처 : https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span