Kiedy używać <span> zamiast <p>?


95

Jak wskazuje pytanie, jeśli mam jakiś tekst, który chcę dodać w HTML, kiedy powinienem użyć, <p>a kiedy powinienem użyć <span>?

Odpowiedzi:


92

Należy pamiętać, że HTML ma na celu OPISYWANIE zawartej w nim treści.

Więc jeśli chcesz przekazać akapit, zrób to.

Twoje porównanie nie jest jednak dokładnie poprawne. Bardziej bezpośrednie byłoby porównanie

Kiedy używać <div>zamiast a <p>?

ponieważ oba są elementami blokowymi.

A <span>jest w tekście, podobnie jak kotwica ( <a>), <strong>podkreślenie ( <em>) itp., Więc pamiętaj, że zgodnie z jego domyślną naturą zarówno w html, jak i w piśmie naturalnym, akapit spowoduje przerwę przed i po sobie, jak <div>.

Czasami, podczas stylizowania rzeczy - rzeczy w tekście - <span>wspaniale jest dać ci coś, do czego można „zaczepić” css, ale poza tym jest to pusty tag pozbawiony znaczenia semantycznego lub stylistycznego.


7
Porównując elementy inline i block, uważaj, aby nie opisywać aspektów wizualnych. Jak mówi specyfikacja HTML5 , a pniekoniecznie musi mieć styl z otaczającymi znakami końca linii, na przykład może następować po nim wbudowany symbol pilcrow . Pojęcia „inline” i „block” również nic nie znaczą dla niewidomych użytkowników. Raczej dokonaj rozróżnienia między treścią przepływu a treścią frazowania (patrz ten link ).
chharvey

3
Ponadto padding-left zachowuje się inaczej pniż na span. W akapicie dopełnienie wpływa na każdy wiersz (blok tekstu), podczas gdy na rozpiętości wpływa tylko na pierwszą linię.
diynevala

95

Semantycznie używasz <p>tagów do wskazywania akapitów. <span>służy do stosowania stylu i / lub klas CSS do dowolnej sekcji tekstu i elementów wbudowanych.


13

<p>Znacznik jest pstęp, i jako takie, to blok elementu (jak, na przykład, h1i div), przy czym spanjest to element wbudowany (jak, na przykład, bi a)

Elementy blokowe domyślnie tworzą odstępy powyżej i poniżej siebie i nic nie może być wyrównane obok nich, chyba że ustawisz floatdla nich atrybut.

Elementy wbudowane zajmują się rozpiętością tekstu w akapicie. Zwykle nie mają marginesów i jako takie nie można na przykład ustawić widthna to.


tak, rozpiętość nie ma marginesów, więc dobrze jest jako komórka tabeli (td) mieć możliwość używania znaczników html
Igor Fomenko

7

Span jest całkowicie niesemantyczny. Nie ma znaczenia, służy jedynie jako element kosmetyczny.

Akapity mają znaczenie semantyczne - informują maszynę (na przykład przeglądarkę lub czytnik ekranu), że zawarta w nich treść jest blokiem tekstu i ma to samo znaczenie, co akapit tekstu w książce.


5

Mówiąc semantycznie, ap jest znacznikiem akapitu i powinien być używany do formatowania akapitu tekstu. Zakres to wbudowana zmiana formatowania, która nie jest obsługiwana semantycznie.



4

Praktyczne wyjaśnienie: Domyślnie <p> </p>dodaje podziały wierszy przed i po załączonym tekście (tak więc tworzy akapit). <span>nie robi tego, dlatego nazywa się to inline .


3

Znacznik p oznacza element akapitu. Ma zastosowane marginesy / dopełnienie. Span to niestylowany tag wbudowany. Ważną różnicą jest to, że p jest elementem blokowym, gdy span jest wbudowany, co oznacza, <p>Hi</p><p>There</p>że pojawiałby się na różnych liniach, gdy jest <span>Hi</span><span>There</span>nawijany obok siebie.


3

Kiedy używamy normalnego tekstu w tym czasie, chcemy <p>tag. Kiedy używamy normalnego tekstu z pewnymi efektami w tym czasie, chcemy <span>tag


2

<span> to tag wbudowany, a <p> to tag blokowy używany do akapitów. Przeglądarki będą renderować pustą linię poniżej akapitu, podczas gdy <span> s będą renderować się w tym samym wierszu.


0

tag jest elementem blokowym, ale tag jest elementem wbudowanym. Zwykle używamy tagu span do stylizacji wewnątrz elementów blokowych. ale nie musisz używać tagu span do stylu inline. musisz to zrobić; przekonwertuj element bloku na element wbudowany za pomocą "display: inline"


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

Wokół nie będzie odstępów, wygląda podobnie do rozpiętości.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.