HTML 태그 <div>와 <span>의 차이점은 무엇입니까?

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

• divA는 블록 요소
• 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>

좋아, 무슨 일이야?

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

HTML 5 실무 초안 의 4.4 절에 그것들이 나열되어 있으며 사용법에 대한 힌트가 있습니다. HTML5는 여전히 작동하는 사양이므로 아직 "최종"은 아니지만 이러한 요소가 어디에서나 가고 있다는 것은 의심의 여지가 있습니다. 일부 이전 버전의 IE에서 이러한 요소의 스타일을 지정하려는 경우 사용해야하는 자바 스크립트 해킹이 있습니다 document.createElement. 소스에 해당 요소를 지정하기 전에 각 요소 중 하나를 작성해야합니다 . 이를 처리 할 라이브러리가 많이 있습니다. 빠른 Google 검색으로 html5shiv 가 활성화되었습니다 .

완벽을 기하기 위해 다음과 같이 생각하도록 초대합니다.

• HTML에는 많은 블록 요소 (전후 줄 바꿈)가 정의되어 있고 많은 인라인 태그 (줄 바꿈 없음)가 있습니다.
• 그러나 현대 HTML에서 모든 요소는 의미 가 있어야합니다 : a <p>는 단락, <li>a는 목록 항목 등이며, 우리는 예전 시대와 달리 올바른 목적을 위해 올바른 태그를 사용해야합니다. <blockquote>내용이 인용인지 여부를 사용하여 들여 쓰기 .
• 당신이하려는 일에 의미 가 없을 때 어떻게해야합니까? 더 없습니다 의미 400 픽셀 전체에 열을가? 디자인에 적합하기 때문에 텍스트 열의 너비가 400px가 되길 원합니다.
• 일반, 또는 의미 요소 : 이러한 이유로, 그들은 두 개 더 HTML에 요소를 추가 <div>하고 <span>, 그렇지 않으면, 사람들이 의미를 가진다 할 요소를 남용로 돌아갈 것이기 때문.

여기에 이미 훌륭하고 자세한 답변이 있지만 시각적 인 예는 없으므로 간단한 설명이 있습니다.

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>블록 태그이고 <span>인라인 태그입니다.

<div>블록 레벨 요소이며 <span>인라인 요소입니다.

인라인 텍스트로 무언가를 <span>하고 싶다면 줄 바꿈을하지 않기 때문에 갈 길 <div>입니다.

다른 사람들이 지적한 바와 같이, 각각의 의미는 일부 의미가 있으며, 가장 중요한 <div>것은 문서의 논리적 부분 또는 문서의 일부와 비슷한 부분을 의미한다는 사실입니다 .

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

진짜 중요한 차이점은 이미 Chris의 대답에 언급되어 있습니다. 그러나 그 의미가 모든 사람에게 명백하지는 않습니다.

인라인 요소로서 <span>다른 인라인 요소 만 포함 할 수 있습니다. 따라서 다음 코드가 잘못되었습니다.

<span><p>This is a paragraph</p></span>

위의 코드는 유효하지 않습니다. 블록 레벨 요소를 랩핑하려면 다른 블록 레벨 요소 (예 :)를 사용해야합니다 <div>. 반면에 <div>블록 수준 요소가 합법적 인 장소에서만 사용할 수 있습니다.

또한 이러한 규칙은 (X) HTML로 고정되어 있으며 CSS 규칙이 있어도 변경 되지 않습니다 ! 따라서 다음 코드 도 잘못되었습니다!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

"블록 요소"의 의미는 암시되지만 명시 적으로 언급되지는 않습니다. 우리가 모든 이론을 무시한다면 (이론이 좋다) 다음은 실용적인 비교입니다. 다음과 같은:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

생산 :

This paragraph has a span.

This paragraph

has
a div.

즉 , div를 인라인으로 사용 하지 않아야 할뿐만 아니라 원하는 효과를 생성하지 않습니다.

다른 답변에서 언급했듯이 기본적 div으로 블록 요소 span로 렌더링 되지만 컨텍스트 내에서 인라인으로 렌더링됩니다. 그러나 의미 적 가치는 없습니다. 그것들은 당신이 어떤 컨텐츠에 스타일과 아이덴티티를 적용 할 수 있도록 존재합니다. 스타일을 사용하면 그 반대로 div행동 할 수 있습니다 span.

유용한 스타일 중 하나 div는inline-block

예 :

1. http://dustwell.com/div-span-inline-block.html

2. CSS 표시 : 인라인 대 인라인 블록

내가 사용한 inline-block게임 웹 프로젝트에서 큰 성공.

Div는 블록 요소이고 span은 인라인 요소이며 너비는 div가 아닌 자체 내용에 따라 다릅니다.

나는 당신 이이 페이지 를 볼 약간의 스페인어를 알고 있다면 , 제대로 설명되어 있습니다.

그러나 빠른 정의는 div섹션을 나누기위한 것이며 와 span같은 다른 블록 요소 내의 요소에 어떤 종류의 스타일을 적용하기위한 것 div입니다.

있을 온 방법 그냥 몇 가지 역사적 맥락을 추가하고 싶었 span대div

연혁 span:

1995 년 7 월 3 일 Benjamin CW Sittler 는 특정 텍스트 블록에 스타일을 적용하기위한 일반 텍스트 컨테이너 태그를 제안 합니다. 스타일 시트와 함께 사용되는 경우를 제외하고 렌더링은 중립입니다. 가독성과 의미에 대한 논쟁이 있습니다. Bert Bos는 클래스 속성 (도시, 사람, 날짜 등의 값으로)을 통해 요소의 확장성에 대해 언급하고 있습니다. Paul Prescod는 두 요소가 모두 남용 될 것을 걱정합니다. 그는 "새로운 요소는 오래된 요소 여야한다"고 언급하고 "시맨틱이없는 태그를 만들면 아무 잘못 없이도 사용할 수있다"고 덧붙이는 텍스트에 반대한다.저자는 문서의 의미를 올바르게 태그하도록 강제해야합니다. 우리는 편집자 벤더가 그 선택을 인터페이스에 명시 적으로 만들도록 강요해야합니다. "

-출처 (W3 Wiki)

RFC 초안에서 소개합니다 span.

첫째, 다른 요소가 적절하지 않은 경우 LANG 및 BIDI 특성을 전달하려면 일반 컨테이너가 필요합니다. SPAN 요소가 그러한 목적으로 도입되었습니다.

-출처 (IETF 초안)

연혁 div:

DIV 요소는 HTML 문서를 부서의 계층으로 구성하는 데 사용할 수 있습니다.

...

CENTER는 HTML 3.0 DIV 요소에 대한 지원을 추가하기 전에 Netscape에 의해 도입되었습니다. 광범위한 배포로 인해 HTML 3.2로 유지됩니다.

HTML 3.2 사양

요컨대, 두 요소 모두 더 의미 론적으로 일반적인 컨테이너가 필요했습니다. Span은 <text>텍스트 스타일 을 지정하는 요소를 대체하는 일반적인 것으로 제안되었습니다 . Div는 페이지를 나누는 일반적인 방법으로 제안되었으며 <center>중앙 정렬 컨텐츠 의 태그를 대체 할 수있는 추가 이점이있었습니다 . Div는 페이지 분배기의 역사로 인해 항상 블록 요소였습니다. Span의 원래 목적은 텍스트 스타일이었으며 현재 div 및 span은 각각 기본 블록 및 인라인 디스플레이 속성이있는 일반 요소가 되었기 때문에 Span은 항상 인라인 요소였습니다.

HTML에는 컨텐츠에 구조 또는 의미를 추가하는 태그가 있습니다. 예를 들어 <p>태그는 단락을 식별하는 데 사용됩니다. 또 다른 예는 <ol>정렬 된 목록 의 태그입니다.

위에 표시된 것처럼 HTML에 사용 가능한 적절한 태그가없는 경우 <div>및 <span>태그가 주로 사용됩니다.

<div>태그는 이전과 이후 모두 줄 바꿈이있는 문서의 블록 레벨 섹션 / 부서를 식별하는 데 사용됩니다.

div 태그를 사용할 수있는 위치의 예는 머리글, 바닥 글, 탐색 등입니다. 그러나 HTML 5에서는 이러한 태그가 이미 제공되었습니다.

<span>태그는 문서의 인라인 섹션 / 부서를 식별하는 데 사용됩니다.

예를 들어 span 태그를 사용하여 요소에 인라인 그림 문자를 추가 할 수 있습니다.

기본적으로 그들 자체는 어떤 기능도 수행하지 않습니다. 그것들은 단지 태그에 의해서만 기능에 관한 것이 아닙니다 .

CSS를 통해서만 사용자 정의 할 수 있습니다.

이제 그 질문에 왔습니다.

일부 스타일과 함께 SPAN 태그는 html에서 단락과 같이 줄 안에 넣는 데 유용합니다. 이것은 HTML의 줄 수준 또는 문장 수준입니다.

예:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

DIV 태그 기능은 스타일링으로 만 볼 수 있으며 HTML 코드의 큰 덩어리를 보유 할 수 있습니다.

DIV는 블록 레벨입니다

예:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

둘 다 귀하의 요구 사항에 따라 사용할 시간과 사례가 있습니다.

답이 분명하기를 바랍니다. 감사합니다.