CMS Básico com PHP, HTML e CSS

Parte 1 - Conhecendo as nossas ferramentas de trabalho


Aula 2.2 - Títulos, parágrafos, divisões e quebras de linha

[voltar] [índice]

Tudo que é exibido no navegador está contido na tag <body>, e é ali que escrevemos efetivamente os elementos de formatação do documento.

Títulos

No HTML é possível definir até seis níveis de títulos:

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Parágrafos

Um parágrafo é uma unidade do texto caracterizado por uma mudança de linha, e isso é feito no HTML com a tag <p>:

<p>Isto é um parágrafo. Não importa quantas quebras de linha
sejam dadas antes da tag de fechamento, o navegador sempre entenderá
que este bloco contém apenas uma linha de texto.</p>

Quebras de linha

Se for absolutamente necessário fazer uma quebra de linha dentro de um parágrafo (ou de qualquer outra unidade do texto), nós podemos recorrer à tag <br />:

<p>Isto é um parágrafo. <br /><br /> Desta vez, haverá
duas quebras de linha antes desta frase ser exibida.</p>

Na maior parte das vezes é considerada uma péssima prática quebrar linhas dentro de parágrafos! É sempre preferível começar outro parágrafo ou utilizar um outro tipo de container com valor semântico (como listas, por exemplo).

Seções e divisões

Existem duas formas de agrupar elementos do documento: definindo seções e divisões. Em termos semânticos, porém, as seções dizem respeito às partes de um texto, enquanto as divisões possuem uma aplicação mais geral, podendo ser utilizadas para agrupar vários componentes de uma página para posterior estilização.


<div class="content">

    <section id="sect1">
    <h1>Título da seção 1</h1>
    <p>Isto é um parágrafo.</p>
    </section>

    <section id="sect2">
    <h1>Título da seção 2</h1>
    <p>Isto é um parágrafo.</p>
    </section>
    
</div><!-- Fim do conteúdo -->

<div class="sidebar">

    <h2>Título do Elemento 1</h2>
    <p>Conteúdo da barra lateral.</p>

    <h2>Título do Elemento 2</h2>
    <p>Conteúdo da barra lateral.</p>

</div><!-- Fim da barra lateral -->

A seguir...