HTML 태그 와 의 차이점은 무엇입니까?
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 <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="http://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. 그 안에서 사용자 이름은 a span, 스타일을 바꿀 수 있도록. 보시다시피, 나는 또한 span 제목의 약 2 글자 - 스타일 시트에서 색상을 변경할 수 있습니다.
또한 HTML5는 기사, 섹션, NAV 등과 같은 공통 페이지 구조를 정의하는 광범위한 새로운 요소 세트가 포함되어 있습니다. HTML 5 작업 초안 그것들을 나열하고 그들의 사용법에 대해 힌트를줍니다. HTML5는 여전히 작동 사양이므로 아직 "최종"은 아니지만 이러한 요소 중 어느 곳이 어디든 가고 있다는 것은 의심의 여지가 있습니다. 이전 버전의 IE에서 이러한 요소를 스타일링하려면 사용해야 할 JavaScript 해킹이 있습니다. 기본적으로 각 요소 중 하나를 사용해야합니다. document.createElement 해당 요소 중 하나가 소스에 지정되기 전에. 당신을 위해 이것을 돌볼 수있는 많은 도서관이 있습니다 - 빠른 Google 검색이 나타났습니다. html5shiv.
다른 팁
완전성을 위해서, 나는 당신이 다음과 같이 생각하도록 초대합니다.
- HTML에 정의 된 많은 블록 요소 (전후에 라인 브레이크)와 많은 인라인 태그 (라인 브레이크 없음)가 많이 있습니다.
- 그러나 현대 HTML에서는 모든 요소가 의미: ㅏ
<p>단락입니다<li>목록 항목 등이며, 우리는 올바른 목적으로 올바른 태그를 사용해야합니다.<blockquote>내용이 인용인지 아닌지 - 그래서, 당신은 거기에 무엇을합니까? ~이다 당신이하려는 일에 의미가 없습니까? 아니요 의미 400px 넓은 열에 있습니까? 디자인에 적합하기 때문에 텍스트 열이 400px 너비가되기를 원합니다.
- 이러한 이유로 그들은 HTML에 두 가지 요소를 추가했습니다 : 일반적이고 의미없는 요소
<div>그리고<span>, 그렇지 않으면 사람들은 의미가있는 요소를 남용하는 것으로 돌아갈 것입니다.
여기에는 이미 훌륭하고 자세한 답변이 있지만 시각적 예제는 없으므로 여기에는 빠른 설명이 있습니다.
<div> 블록 태그입니다 <span> 인라인 태그입니다.
<div> 블록 레벨 요소입니다 <span> 인라인 요소입니다.
인라인 텍스트로 무언가를하고 싶다면 <span> 라인 브레이크를 소개하지 않기 때문에 <div> 일 것이다.
다른 사람들이 언급했듯이, 이들 각각에 암시 된 의미론이 있습니다. <div> 문서의 논리 부서를 암시합니다. 문서의 섹션이나 무언가와 유사하게 : LA :
<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 맥락에서 인라인으로 렌더링됩니다. 그러나 의미 론적 가치도 없다. 그들은 당신이 당신이 주어진 일의 컨텐츠에 스타일과 정체성을 적용 할 수 있도록 존재합니다. 스타일을 사용하면 a를 만들 수 있습니다 div a처럼 행동하십시오 span 그 반대.
유용한 스타일 중 하나입니다 div ~이다 inline-block
예 :
나는 사용했다 inline-block 게임 웹 프로젝트에서 큰 성공을 거두었습니다.
div는 블록 요소이며 스팬은 인라인 요소이며 그 너비는 div가하지 않는 Self의 내용에 따라 다릅니다.
당신이 보는 스페인어를 알고 있다면 이 페이지, 적절하게 설명되는 곳.
그러나 빠른 정의는 그 일입니다 div 섹션을 나누기위한 것입니다 span 다른 블록 요소 내의 요소에 어떤 종류의 스타일을 적용하는 것입니다. div.
그곳에서 어떻게 생겼는지에 대한 역사적 맥락을 추가하고 싶었습니다. span vs div
의 역사 span:
1995 년 7 월 3 일, Benjamin CW Sittler 일반 텍스트 컨테이너를 제안합니다 특정 텍스트 블록에 스타일을 적용하기위한 태그. 스타일 시트의 결합으로 사용되는 경우를 제외하고 렌더링은 중립적입니다. 가독성, 의미에 대한 논쟁이 있습니다. Bert Bos는 클래스 속성을 통해 요소의 확장 성 특성 (도시, 사람, 날짜 등과 같은 값)을 언급하고 있습니다. Paul Prescod는 두 요소 모두 남용 될까 걱정하고 있습니다. 그는 "모든 새로운 요소가 오래된 요소에 있어야한다"고 언급하고 "우리가 의미론없이 태그를 만들면 잘못되지 않고 어느 쪽이든 사용할 수 있습니다. 우리는 저자가 문서의 의미론에 올바르게 태그를 지정하도록 강요해야합니다. 편집자 공급 업체가 인터페이스에서 그 선택을 명시 적으로 만들도록 강요해야합니다. "
소개하는 RFC 드래프트에서 span:
첫째, 다른 요소가 적절하지 않은 경우 Lang 및 Bidi 속성을 전달하려면 일반적인 구성원이 필요합니다. 그 목적을 위해 스팬 요소가 소개됩니다.
의 역사 div:
DIV 요소는 HTML 문서를 분열 계층으로 구성하는 데 사용될 수 있습니다.
...
Center는 HTML 3.0 DIV 요소에 대한 지원을 추가하기 전에 NetScape에 의해 도입되었습니다. 광범위한 배포로 인해 HTML 3.2에서 유지됩니다.
간단히 말해서, 두 요소는 더 의미 적으로 유전자 용기가 필요하지 않게 발생했습니다. 스팬은보다 일반적인 대체품으로 제안되었습니다. <text> 스타일 텍스트에 대한 요소. Div는 페이지를 나누는 일반적인 방법으로 제안되었으며 교체 할 수있는 이점이 추가되었습니다. <center> 센터 정렬 컨텐츠에 대한 태그. Div는 페이지 분배기로서의 역사 때문에 항상 블록 요소였습니다. 원래의 목적은 텍스트 스타일이었고 오늘 Div와 Span은 각각 기본 블록 및 인라인 디스플레이 속성을 가진 일반 요소로 도달했기 때문에 스팬은 항상 인라인 요소였습니다.
HTML에는 콘텐츠에 구조 나 의미론을 추가하는 태그가 있습니다. 예를 들어 <p> 태그는 단락을 식별하는 데 사용됩니다. 또 다른 예는 다음과 같습니다 <ol> 주문 목록에 대한 태그.
위와 같이 HTML에 사용 가능한 적절한 태그가 없으면 <div> 그리고 <span> 태그는 일반적으로 의지합니다.
그만큼 <div> 태그는 전후에 라인이 나오는 문서의 블록 레벨 섹션/디비전을 식별하는 데 사용됩니다.
DIV 태그를 사용할 수있는 위치는 헤더, 바닥 글, 탐색 등입니다. 그러나 HTML 5에서는이 태그가 이미 제공되었습니다.
그만큼 <span> 태그는 문서의 인라인 섹션/분할을 식별하는 데 사용됩니다.
예를 들어 스팬 태그를 사용하여 요소에 인라인 그림을 추가 할 수 있습니다.
기본적으로 자아는 어떤 기능도 수행하지 않습니다. 그들은 ~ 아니다 기능에 대해 구체적으로 그들의 태그만으로.
CSS의 도움으로 만 사용자 정의 할 수 있습니다.
이제 당신의 질문에 오는 것 :
스팬 태그와 함께 일부 스타일링은 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>
둘 다 요구 사항에 따라 시간과 사례를 사용할 때를 가지고 있습니다.
답이 분명합니다. 고맙습니다.
<div> 블록 요소입니다. div 내부에 쓰여진 모든 단락 또는 컨텐츠로서, 우리는 Div의 전체 요소에 CSS를 적용 할 수 있습니다. DIV만으로 스타일을 제공함으로써.
<span> 인라인 요소입니다.
해당 요소에만 반영되는 모든 CSS 변경 사항.
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
