Elementy HTML: elementy blokowe a elementy wbudowane
Degui Adil / EyeEm / Getty Images
HTML składa się z różnych elementów, które pełnią rolę bloków konstrukcyjnych stron internetowych. Każdy z tych elementów należy do jednej z dwóch kategorii: elementy blokowe lub element wbudowany. Zrozumienie różnicy między tymi dwoma typami elementów jest ważnym krokiem w budowaniu stron internetowych.
Elementy poziomu bloku
Czym więc jest element blokowy? Element blokowy to element HTML, który rozpoczyna nowy wiersz na stronie internetowej i rozciąga się na całą szerokość dostępnego poziomego obszaru elementu nadrzędnego. Tworzy duże bloki treści, takie jak akapity lub podziały stron. W rzeczywistości większość elementów HTML to elementy blokowe.
W treści dokumentu HTML używane są elementy blokowe. Mogą zawierać elementy wbudowane, a także inne elementy blokowe.
Elementy wbudowane
W przeciwieństwie do elementu blokowego, element inline:
- Może zaczynać się w linii.
- Nie rozpoczyna nowej linii.
- Jego szerokość rozciąga się tylko tak daleko, jak jest zdefiniowana przez jego znaczniki.
Przykładem elementu wbudowanego jest , co sprawia, że czcionka treści tekstowej zawartej w pogrubieniu. Element śródliniowy zazwyczaj zawiera tylko inne elementy śródliniowe lub nie może zawierać niczego, na przykład
przerwać tag.
Istnieje również trzeci typ elementów w HTML: te, które w ogóle się nie wyświetlają. Te elementy dostarczają informacji o stronie, ale nie są wyświetlane podczas renderowania w przeglądarce sieci Web.
Na przykład:
- definiuje style i arkusze stylów.
- definiuje metadane.
- jest elementem dokumentu HTML, który przechowuje te elementy.
Przełączanie typów elementów wbudowanych i blokowych
Możesz zmienić typ elementu z wbudowanego na blokowy lub odwrotnie, używając jednej z tych właściwości CSS:
- |_+_|
- |_+_|
- |_+_|
The CSS właściwość wyświetlania pozwala zmienić właściwość śródliniową na blokową lub blokową na śródliniową lub nie wyświetlać w ogóle.
Kiedy zmienić właściwość wyświetlania?
Ogólnie rzecz biorąc, należy pozostawić w spokoju właściwość wyświetlania, ale w niektórych przypadkach przydatna może być zamiana właściwości wyświetlania w wierszu i bloku.
- |_+_| i |_+_|
- |_+_| i |_+_|
- |_+_| i |_+_|
Typowe błędy formatowania elementów wbudowanych
Jednym z najczęstszych błędów popełnianych przez nowicjusza w projektowaniu stron internetowych jest próba ustawienia szerokości elementu wbudowanego. To nie działa, ponieważ szerokości elementów wbudowanych nie są definiowane przez pole kontenera.
Elementy śródliniowe ignorują kilka właściwości:
Microsoft Internet Explorer (zastąpiony przez Microsoft Edge) w przeszłości błędnie stosował niektóre z tych właściwości nawet do skrzynek wbudowanych. To nie jest zgodne z normami. Może tak nie być w przypadku nowszych wersji przeglądarki internetowej firmy Microsoft.
Jeśli potrzebujesz zdefiniować szerokość lub wysokość, jaką powinien zająć element, będziesz chciał zastosować to do elementu blokowego zawierającego tekst w wierszu.