<p> 대신 <span>을 사용하는 경우


94

질문에서 알 수 있듯이 HTML에 추가하려는 텍스트가 있으면 언제 사용해야 <p>하고 언제 사용해야 <span>합니까?

답변:


91

HTML은 포함 된 내용을 설명하기위한 것임을 명심해야합니다.

따라서 단락을 전달하려면 그렇게하십시오.

하지만 당신의 비교는 정확하지 않습니다. 보다 직접적인 비교는

<div>대신 a를 사용하는 경우 <p>?

둘 다 블록 레벨 요소이기 때문입니다.

A <span>는 앵커 ( <a>),, <strong>강조 ( <em>) 등과 같이 인라인 이므로 html과 자연 쓰기 모두에서 기본 특성으로 인해 단락이 앞뒤로 구분됩니다. <div>.

가끔 스타일링을 할 때-인라인 물건 <span>-a는 CSS를 "연결"할 수있는 무언가를 제공하는 것이 좋지만 의미 론적 또는 문체 적 의미가없는 빈 태그입니다.


7
인라인 요소와 블록 요소를 비교할 때 시각적 측면을 설명하지 않도록주의하세요. HTML5 사양에서 알 수 있듯이 a p는 반드시 주변 줄 바꿈으로 스타일이 지정되지 않을 수 있습니다. 예를 들어, 뒤에 인라인 필 크로 기호가 수 있습니다 . "인라인"및 "차단"이라는 용어는 시각 장애인에게 아무런 의미가 없습니다. 오히려 흐름 콘텐츠구문 콘텐츠를 구분 하십시오 ( 이 링크 참조 ).
chharvey

3
또한 padding-left p는에서 와 다르게 작동 합니다 span. 단락에서 패딩은 모든 줄 (텍스트 블록)에 영향을주는 반면, 범위에서는 첫 번째 줄에만 영향을줍니다.
diynevala

95

의미 적 <p>으로는 태그를 사용 하여 단락을 표시합니다. <span>CSS 스타일 및 / 또는 클래스를 텍스트 및 인라인 요소의 임의 섹션에 적용하는 데 사용됩니다.


13

<p>태그는이다 paragraph와 같은, 그것은 인 블록 (예를 들면, 소자로 h1하고 div), 반면, span인라인 원소 (예로서, ba)

블록 요소는 기본적으로 자신의 위와 아래에 약간의 공백을 생성하며 float속성을 설정하지 않는 한 그 옆에 아무것도 정렬 할 수 없습니다 .

인라인 요소는 단락 내의 텍스트 범위를 처리합니다. 일반적으로 여백이 없으므로 예를 들어 a width를 설정할 수 없습니다 .


예, 스팬에는 여백이 없으므로 html 마크 업을 사용할 수있는 기능을 테이블 셀 (td)로 사용하는 것이 좋습니다.
Igor Fomenko

6

Span은 완전히 의미가 없습니다. 의미가 없으며 단순히 미용 효과의 요소로만 사용됩니다.

단락에는 의미 론적 의미가 있습니다. 즉, 캡슐화하는 내용이 텍스트 블록이며 책의 텍스트 단락과 동일한 의미를 가지고 있음을 컴퓨터 (예 : 브라우저 또는 스크린 리더)에 알립니다.


5

의미 상으로 말하자면 ap는 단락 태그이며 텍스트 단락의 형식을 지정하는 데 사용되어야합니다. 범위는 의미 론적으로 처리되지 않는 인라인 서식 변경입니다.



4

실용적인 설명 : 기본적으로 <p> </p>는 포함 된 텍스트 앞뒤에 줄 바꿈을 추가하여 단락을 만듭니다. <span>이를 수행하지 않기 때문에 inline 이라고 합니다.


3

p 태그는 단락 요소를 나타냅니다. 여백 / 패딩이 적용되었습니다. 범위는 스타일이 지정되지 않은 인라인 태그입니다. 중요한 차이점은 스팬이 인라인 일 때 p가 블록 요소라는 것 <p>Hi</p><p>There</p>입니다. 즉, <span>Hi</span><span>There</span>나란히 감기면 다른 선에 나타납니다 .


3

그 당시 일반 텍스트를 사용하고있을 때는 태그 <p>를 원하고, 그 당시 일부 효과가있는 일반 텍스트를 사용할 때는 <span>태그 를 원합니다.


2

<span>은 인라인 태그이고 <p>는 단락에 사용되는 블록 태그입니다. 브라우저는 단락 아래에 빈 줄을 렌더링하는 반면 <span>은 같은 줄에 렌더링합니다.


0

태그는 블록 레벨 요소이지만 태그는 인라인 요소입니다. 일반적으로 블록 요소 내부의 스타일을 지정하기 위해 스팬 태그를 사용합니다.하지만 스팬 태그를 사용하여 스타일을 인라인 할 필요는 없습니다. "display : inline"을 사용하여 블록 요소를 인라인 요소로 변환


-6
p {
    float: left;
    margin: 0;
}

주위에 간격이 없으며 범위와 비슷합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.