HTML параграфи и наслови

Објави Душко

HTML параграфи и наслови спадају у оне различите садржаје и HTML елементе које можемо додати у наш документ. Уобичајени садржај који можете пронаћи на било којој веб страници је једноставан или plain текст. Текст може бити у било ком облику или стилу. Пасуси могу бити било које дужине, наслови било које величине, а можете промените боју, величину фонта, стил фонта, боју позадине…

Параграф у HTML-у се додаје помоћу ознаке или тага <p>. За наслове, имамо више ознака или тагова, од <h1> до <h6>. Ове ознаке представљају шест величинских нивоа наслова, називају се још heading тагови. Њих користимо када текст желимо да поделимо на наслове и поднаслове секција. Врло су важни за SEO оптимизацију јер говоре пауковима или ботовима претраживача шта се налази на страници. Headings тагове не треба мешати са “header” који је први дете елемент одмах на врху кода странице испод родитеља HTML.

<p> таг

Параграфи (пасуси) су делови или блокови текста који се креирају користећи <p> тагове.

HTML параграфи и наслови:  <p> таг.

Лако се да видети да је то затварајући таг јер има одговарајућу завршну ознаку у реду 12, док је садржај написан између отвореног и затвореног тага. Хајде да то проверимо у претраживачу.

HTML параграфи и наслови: <p> таг у претраживачу.

Добро је. Садржај унутар ознака се приказује у претраживачу. Хајде да додамо  још пар пасуса испод њега.

HTML параграфи и наслови: Додавање нових параграфа у HTML.

Сада постоје три параграфа у документу, исписали смо три пасуса. Запамтите, сваки пасус почиње новим редом.

HTML параграфи и наслови: Сваки пасус почиње новим редом.

Line break

Јасно је до сада да сваки параграф почиње новим редом или линијом. Али, шта ако желимо да пређемо у нови ред док смо унутар једног пасуса? Претпоставимо да имамо неки текст попут овога:

Моје име је Карл. Имам 25 година. Живим у Москви, Русија. Долазим из једне московске више школе на даље усавршавање. На тој школи сам дипломирао 2016. године.

HTML параграфи и наслови: Line break

Текст је лепо поређан у три реда. Мислите да ће их тако и претраживач приказати?

HTML параграфи и наслови: Неформатиран текст у претраживачу.

Текст није форматиран онако како смо то желели, како је написан унутар <p> тага. Зашто се то десило? Разлог је прост. Претраживач увек узима оно што је у  <p> тагу као један пасус, без обзира како га ми форматирали. Да бисте ипак додали нови ред како би текст личио на нешто, HTML нам нуди <br> ознаку за преламање текста (line break). Једноставно поставите овај таг на крај текста где желите да почиње нови ред.

HTML параграфи и наслови: <br> ознака.

Сигурно примећујете да <br> таг нема затварајућу ознаку. Он је празан таг, не захтева да се затвори, самозатварајући таг. Да погледамо шта нам сад наш претраживач приказује.

HTML параграфи и наслови: <br> таг у претраживачу.

Сада је текст форматиран онако како смо желели.

<h1> и други heading тагови

Да би нам текст био читљив, поделићемо га на наслове и поднаслове и у ту сврху користимо такозване heading ознаке. У HTML-у оне су у распону од <h1> до <h6>. Величина је једина разлика између ових тагова, друге не постоје.

HTML параграфи и наслови: <h1> и други heading тагови.

Линије 10 до 15 приказују различите величине наслова.

<h1> има највећу величину, док је <h6> најмањи.

Сврха ових ознака јесте да нам омогуће да поставимо наслове и поднаслове и наш текст учинимо читљивим и разумљивим. Наслови се разликују од пасуса. Не треба их користити да би текст био подебљан или већи. Користите ове ознаке ефикасно и тамо где треба.

Закључак

● <p> таг се користи за параграфе.

● Сваки пасус почиње новим редом.

● Да додате нови ред, користите <br> таг. Овај таг нема затварајућу ознаку.

● Постоји шест ознака за наслове или headings тагова. Сваки од њих различит је по величини.

● Никад не користите heading тагове између параграфа.

Претходно објављено:

HTML елементи, тагови и атрибути

Категорије: HTMLWeb дизајн

0 коментара

Оставите одговор

Avatar placeholder

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *

.copyright.pull-right { display: none; }