Elementos de Nível de Bloco e Inline do HTML
Este artigo explica os elementos de nível de bloco e inline do HTML.
Isto explica as diferenças entre elementos de nível de bloco e elementos inline, bem como os principais elementos de nível de bloco e elementos inline.
YouTube Video
Elementos de nível de bloco e elementos inline
O HTML possui duas categorias principais de elementos que determinam como eles são exibidos na tela: 'elementos de nível de bloco' e 'elementos inline'. Esses elementos desempenham um papel importante no layout da página e afetam diretamente como eles são posicionados. Aqui, explicaremos em detalhes as características e o uso de cada elemento.
O que é um elemento de nível de bloco?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Elementos de nível de bloco normalmente ocupam toda a largura da página e aparecem em uma linha separada de outros elementos. Esses elementos podem conter outros elementos de nível de bloco ou elementos inline dentro deles e definem a estrutura maior de um documento.
Recursos:
- Os elementos começam em uma nova linha e se expandem para ocupar o máximo de largura possível (geralmente toda a largura do elemento pai).
- Eles são separados de outros elementos de bloco verticalmente, com margens aplicadas entre eles.
- Eles podem conter outros elementos de bloco ou inline dentro deles.
Aqui, os seguintes elementos de nível de bloco são utilizados:.
- A tag
<div>é comumente usada para construir layouts. - A tag
<p>é usada para definir um parágrafo. <h1>a<h6>são elementos usados para definir cabeçalhos.<h1>é o maior cabeçalho, e<h6>é o menor.- A tag
<ul>cria uma lista não ordenada. - A tag
<ol>cria uma lista ordenada. - A tag
<section>define uma seção dentro de um documento.
O que é um elemento em linha?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Os elementos inline são colocados na mesma linha que outros elementos e geralmente ocupam apenas a largura de seu conteúdo. Esses elementos são tratados como parte do texto e, ao contrário dos elementos de nível de bloco, não ocupam a linha inteira.
Recursos:
- Os elementos aparecem na mesma linha e são colocados lado a lado com outros elementos inline.
- A largura é determinada pelo conteúdo do elemento (texto ou imagens).
- Eles podem ser incluídos dentro de elementos de nível de bloco, mas não o contrário.
Aqui, os seguintes elementos inline são utilizados:.
- A tag
<span>é usada para enfatizar uma parte do texto com um estilo específico. - A tag
<a>define um hiperlink. - A tag
<img>é um elemento usado para incorporar imagens. <strong>destaca texto importante (normalmente exibido em negrito).<em>indica texto enfatizado (normalmente exibido em itálico).
Diferenças entre elementos de nível de bloco e elementos inline
- Forma de exibição: Elementos de nível de bloco são exibidos em uma nova linha e ocupam toda a largura da página, enquanto os elementos inline são exibidos na mesma linha que outros elementos e sua largura é determinada pelo conteúdo.
- Manipulação de elementos internos: Elementos de nível de bloco podem conter outros elementos de nível de bloco, bem como elementos inline, mas os elementos inline não podem conter elementos de nível de bloco.
- Função no layout: Elementos de nível de bloco são usados principalmente para criar a estrutura do layout de uma página, enquanto os elementos inline definem pequenos elementos, como textos e links.
Pontos-chave para diferenciação
Criação de layouts: Use elementos de nível de bloco como <div>, <section>, <article> para definir grandes seções e blocos de conteúdo.
Decoração de texto e links: Use elementos inline como <span>, <a>, <strong>, <em> para decorar partes do texto ou adicionar links.
Misturando elementos de nível de bloco e elementos inline
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Elementos de bloco como
<main>,<header>e<section>são usados, e eles geralmente são renderizados em uma nova linha, ocupando toda a largura do seu elemento pai. - Elementos inline, como
<a>,<strong>,<span>e<img>, são usados e são colocados dentro da linha sem ocupar toda a largura dentro dos elementos de bloco.
Incluir elementos em linha dentro de elementos de nível de bloco é um padrão comum. Por exemplo, é comum incluir links (<a>) ou ênfases (<strong>) dentro de um parágrafo (<p>). No entanto, como não é possível incluir elementos de nível de bloco dentro de elementos em linha, é importante usá-los adequadamente.
Resumo
Elementos de nível de bloco e elementos em linha são dois tipos básicos de elementos HTML, cada um com sua própria função. Elementos de nível de bloco formam a base do layout da página, enquanto elementos em linha são usados para decorar e manipular conteúdos específicos dentro deles. Compreender e utilizar corretamente esses dois tipos de elementos permite uma codificação HTML eficiente.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.