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:
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.
p
niż 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ę.
<p>
Znacznik jest p
stęp, i jako takie, to blok elementu (jak, na przykład, h1
i div
), przy czym span
jest to element wbudowany (jak, na przykład, b
i 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 float
dla 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ć width
na to.
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.
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.
Rozpiętość to wbudowany element formatujący, który NIE ma wysuwu wiersza powyżej ani poniżej.
A p jest elementem bloku, który MA domniemane przesunięcie wiersza powyżej i poniżej.
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 .
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.
<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.
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"
p
niekoniecznie 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 ).