Um parágrafo, segundo o dicionário, é a divisão de um texto escrito (não muito longo, curto na verdade) indicada pela mudança de linha, cuja função é mostrar que as frases aí contidas mantêm maior relação entre si do que com o restante do texto. Em HTML, parágrafo é a mesma coisa.
Você pode escrever um parágrafo do jeito que você quiser, pode seguir as normas da escrita formal, ou pode ignorá-las completamente, mas eu recomendo fortemente que você as siga.
Você deve ficar ligado com algumas pequenas peculiaridades de boas práticas na web, por exemplo, de acordo com as regras da ABNT (Associação Brasileira de Normas Técnicas), os parágrafos devem começar sempre um pouco à frente da margem esquerda da folha. Em sites, você não vê essa prática.
Observe os sites de jornais e qualquer outro site onde os textos são postados por profissionais da área, esse espaço não existe. Como eu disse, você pode seguir a risca e querer inserir espaços no inicio dos parágrafos, mas na hora de transformar isso em códigos HTML, algumas coisas darão muito mais trabalho e não vão seguir um padrão de boas práticas na web. Observe
Código
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae orci tortor. Sed sed maximus ligula, id dapibus metus.
Aliquam volutpat nulla in imperdiet volutpat.
Integer eu lacus nunc. Maecenas tincidunt, tortor a placerat suscipit, odio velit ornare mi, sed lacinia erat arcu id mauris.
Proin malesuada sodales erat eget hendrerit.
Etiam pellentesque tortor nec erat fermentum tempor.
</p>
Resultado
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae orci tortor. Sed sed maximus ligula, id dapibus metus. Aliquam volutpat nulla in imperdiet volutpat. Integer eu lacus nunc. Maecenas tincidunt, tortor a placerat suscipit, odio velit ornare mi, sed lacinia erat arcu id mauris. Proin malesuada sodales erat eget hendrerit. Etiam pellentesque tortor nec erat fermentum tempor.
Observe que não importa se apertamos a tecla “Enter” para seguir para um novo parágrafo ou para quebrar a linha, nem os espaços que damos, o navegador vai ignorar isso se simplesmente usarmos a tag <p> . Para os espaços resolvemos com a instruçõa e para cada enter que você quiser, terá que usar um par de tags <p>
Outro caso são os alinhamentos. Em textos como livros, cartas, revistas, documentos governamentais ou empresariais e outros tipos de textos nós vamos encontrar os parágrafos, geralmente, justificados. Na web o cenário é diferente. Não é considerado uma boa prática justificar textos na web.
Já pegamos clientes que faziam questão de que seus textos ficassem justificados, por puro capricho e gosto pessoal, mesmo depois de explicarmos e dar boas razões para não cometer esse “crime” eles ainda assim optaram por justificar seus textos e claro, nós fizemos como eles queriam, mesmo contra nossa vontade, lembre-se “o Cliente sempre tem razão”.
Aí você me pergunta, mas porque não é uma boa prática justiçar os textos na web?
Primeiro entenda que nossa visão se comporta de maneira diferente em mídias digitais, é mais difícil e menos confortável, você pode até não perceber isso por estar acostumado, mas acredite, é verdade.
Quando justificamos um texto, o computador insere espaços entre as palavras para forçar um alinhamento homogêneo das colunas. Em impressos isso cria grandes blocos de informações e organiza melhor o conteúdo. Vale lembrar que softwares de diagramação oferecem recursos como: diferentes espaços entre palavras e letras e o hífen para separar uma palavra e quebrar a linha sem deixar tanto espaço entre elas.
Na web isso deve ser feito manualmente e em cada aparelho ou resolução de tela, vai ter um comportamento diferente, ou seja, nunca será 100% uma boa formatação.
Outra coisa, em impressos utilizamos, geralmente, o dedo para guiar a leitura, em mídias digitais o mouse, o que não se mostra tão eficaz. O alinhamento à esquerda ajuda no direcionamento da leitura compensando a falta do dedo e o desconforto causado pela luz dos monitores.
Não era o foco do assunto, mas precisava ser dito, em breve eu postarei um artigo falando detalhadamente do porque não devemos justificar textos na web.
A grande questão aqui é como vamos escrever parágrafos em HTML. Pois bem, essa tarefa é bem simples e provavelmente nós já falamos nos artigos anteriores. Para escrever parágrafos basta usar o par de tags <p></p>.
É muito simples, mas alguns cuidados devem ser tomados. Nunca esqueça, como já foi dito, de fechar a tag. Alguns navegadores irão interpretar corretamente mesmo que você não feche, mas não confie nisso, podem ocorrer erros inesperados e prejudicar seu texto.
Os navegadores adicionam automaticamente um espaço (margem) entre os elementos <p>. Esse espaço pode ser definido com CSS.
A formatação padrão do elemento <p> é:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
No HTML4 a propriedade “align” era aceita, já no HTML5 não. Só por curiosidade, essa propriedade definia o alinhamento do texto, se à esquerda (left), direita (right), centralizada (center) ou justificada (justify).Indicates a neutral informative change or action.
Se você escrever um texto e der enter esperando que o navegador interprete isso, você vai ter uma surpresa, isso será ignorado completamente. Observe o exemplo acima.
Quebra de linha <br>
Existe uma tag para quebrar a linha sem iniciar um novo parágrafo. A tag <br> faz isso por nós. Ela não tem fechamento, basta escrever a tag e pronto, o texto inicia em uma nova linha. Você pode escrever usando HTML5 <br> ou XHTML <br/>. Como disse antes, o XHMTL é para uma validação mais profunda. Acompanhe os textos anteriores para saber mais sobre isso.
Cabe dizer que essa tag não aceita nenhum atributo, a não ser atributos globais e atributos de eventos. Falaremos deles mais na frente.
<p>Texto aqui<br>Mais textos aqui</p>
Texto aqui
Mais textos aqui
Texto pré-formatado <pre>
O elemento HTML <pre> define um texto pré-formatado. O texto dentro do elemento <pre> é exibido em uma fonte diferente (geralmente Courier) e preserva os espaços e as quebras de linha.
Info! Em HTML4 essa tag possuía um atributo width para definir a largura, mas isso não é mais suportado no HTML5.
Assim como o <br>, o <pre> aceita os atributos globais e de eventos.
<pre>
<p>Texto aqui
Mais textos aqui espaços em branco e enter são
respeitados.</p>
</pre>
Texto aqui
Mais textos aqui espaços em branco e enter são
respeitados.
É isso pessoal, essas são as tags do HTML usadas para definir parágrafos. Elas são bem simples, pois nenhuma delas possui atributos, mas podem ser formatadas com CSS.
Por falar em CSS, na próxima aula vamos falar do atributo “style” que usa o CSS para formatar os elementos HTML inline. Fique ligado nas atualizações do site, toda segunda tem novos posts, tutoriais e muito mais.
