Baseline Widely available
HTML-ÑÐ»ÐµÐ¼ÐµÐ½Ñ <p>
пÑедÑÑавлÑÐµÑ Ñобой абзаÑ. ÐбзаÑÑ Ð¾Ð±ÑÑно пÑедÑÑÐ°Ð²Ð»ÐµÐ½Ñ Ð² визÑалÑной ÑÑеде в виде блоков ÑекÑÑа, оÑделÑннÑÑ
Ð¾Ñ ÑоÑедниÑ
блоков пÑÑÑÑми ÑÑÑоками и/или оÑÑÑÑпом в пеÑвой ÑÑÑоке, кÑоме ÑÑого HTML-абзаÑÑ Ð¼Ð¾Ð³ÑÑ Ð¿ÑедÑÑавлÑÑÑ Ñобой ÑÑÑÑкÑÑÑнÑÑ Ð³ÑÑппиÑÐ¾Ð²ÐºÑ Ð¾Ð´Ð½Ð¾Ñипного ÑодеÑжимого, напÑÐ¸Ð¼ÐµÑ Ð¸Ð·Ð¾Ð±Ñажений или полей ÑоÑмÑ.
ÐбзаÑÑ ÑвлÑÑÑÑÑ Ð±Ð»Ð¾ÑнÑми ÑлеменÑами и, в ÑаÑÑноÑÑи, авÑомаÑиÑеÑки закÑÑваÑÑÑÑ, еÑли дÑÑгой блоÑнÑй ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð½Ð°Ñ
одиÑÑÑ Ð¿ÐµÑед закÑÑваÑÑим Ñегом </p>
. СмоÑÑиÑе ниже "ÐÑопÑÑк Ñега".
<p>
Geckos are a group of usually small, usually nocturnal lizards. They are found
on every continent except Antarctica.
</p>
<p>
Some species live in houses where they hunt insects attracted by artificial
light.
</p>
p {
margin: 10px 0;
padding: 5px;
border: 1px solid #999;
}
ÐаÑегоÑии конÑенÑа ÐоÑоковÑй конÑенÑ, ÑвнÑй конÑенÑ. ÐопÑÑÑимое ÑодеÑжимое ФÑазовÑй конÑенÑ. ÐÑопÑÑк Ñегов ТÑебÑеÑÑÑ Ð¾ÑкÑÑваÑÑий Ñег. ÐакÑÑваÑÑий Ñег Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð¿ÑопÑÑен, еÑли за ÑлеменÑом <p>
ÑÑÐ°Ð·Ñ ÑледÑÐµÑ ÑÐ»ÐµÐ¼ÐµÐ½Ñ <address>
, <article>
, <aside>
, <blockquote>
, <div>
, <dl>
, <fieldset>
, <footer>
, <form>
, <h1>
, <h2>
, <h3>
, <h4>
, <h5>
, <h6>
, <header>
, <hr>
, <menu>
, <nav>
, <ol>
, <pre>
, <section>
, <table>
, <ul>
или дÑÑгой ÑÐ»ÐµÐ¼ÐµÐ½Ñ <p>
, или еÑли в ÑодиÑелÑÑком ÑлеменÑе болÑÑе ниÑего не ÑодеÑжиÑÑÑ Ð¸ ÑодиÑелÑÑкий ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð½Ðµ ÑвлÑеÑÑÑ ÑлеменÑом <a>
. ÐопÑÑÑимÑе ÑодиÑели ÐÑбой ÑлеменÑ, коÑоÑÑй ÑазÑеÑÐ°ÐµÑ Ð¿Ð¾ÑоковÑй конÑÐµÐ½Ñ Ð² каÑеÑÑве ÑодеÑжимого. ÐопÑÑÑимÑе ARIA-Ñоли ÐÑбÑе DOM-инÑеÑÑÐµÐ¹Ñ HTMLParagraphElement
ÐÑÑибÑÑÑ
Ð ÑÑÐ¾Ð¼Ñ ÑлеменÑÑ Ð¿ÑÐ¸Ð¼ÐµÐ½Ð¸Ð¼Ñ ÑолÑко глобалÑнÑе аÑÑибÑÑÑ.
ÐÑимеÑание: ÐÑÑибÑÑ align
в ÑегаÑ
<p>
ÑÑÑаÑел и болÑÑе не должен Ñ Ð¸ÑполÑзоваÑÑÑÑ.
<p>
ÐÑо пеÑвÑй Ð°Ð±Ð·Ð°Ñ ÑекÑÑа. ÐÑо пеÑвÑй Ð°Ð±Ð·Ð°Ñ ÑекÑÑа. ÐÑо пеÑвÑй Ð°Ð±Ð·Ð°Ñ ÑекÑÑа. ÐÑо
пеÑвÑй Ð°Ð±Ð·Ð°Ñ ÑекÑÑа.
</p>
<p>
ÐÑо вÑоÑой Ð°Ð±Ð·Ð°Ñ ÑекÑÑа. ÐÑо вÑоÑой Ð°Ð±Ð·Ð°Ñ ÑекÑÑа. ÐÑо вÑоÑой Ð°Ð±Ð·Ð°Ñ ÑекÑÑа. ÐÑо
вÑоÑой Ð°Ð±Ð·Ð°Ñ ÑекÑÑа.
</p>
РезÑлÑÑÐ°Ñ Ð¡ÑилизаÑÐ¸Ñ Ð°Ð±Ð·Ð°Ñев
Ðо ÑмолÑÐ°Ð½Ð¸Ñ Ð±ÑаÑзеÑÑ ÑазделÑÑÑ Ð°Ð±Ð·Ð°ÑÑ Ð¾Ð´Ð½Ð¾Ð¹ пÑÑÑой ÑÑÑокой. ÐлÑÑеÑнаÑивнÑе меÑÐ¾Ð´Ñ ÑазделениÑ, Ñакие как оÑÑÑÑÐ¿Ñ Ð² пеÑвой ÑÑÑоке абзаÑа, могÑÑ Ð±ÑÑÑ Ð´Ð¾ÑÑигнÑÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ CSS:
HTML<p>
Разделение абзаÑев пÑÑÑÑми ÑÑÑоками Ñдобнее Ð´Ð»Ñ ÑиÑаÑелей, но иÑ
Ñакже можно
ÑазделиÑÑ, Ñделав оÑÑÑÑÐ¿Ñ Ð² иÑ
пеÑвÑÑ
ÑÑÑокаÑ
. ÐÑо ÑаÑÑо иÑполÑзÑеÑÑÑ Ð´Ð»Ñ
Ñкономии меÑÑа, напÑимеÑ, ÑÑÐ¾Ð±Ñ ÑÑаÑиÑÑ Ð¼ÐµÐ½ÑÑе бÑмаги пÑи пеÑаÑи.
</p>
<p>
ÐиÑÑмо (имееÑÑÑ Ð²Ð²Ð¸Ð´Ñ Ð¿Ð¸ÑÑменноÑÑÑ), пÑедназнаÑенное Ð´Ð»Ñ ÑедакÑиÑованиÑ,
напÑимеÑ, ÑколÑнÑе запиÑи и ÑеÑновики, иÑполÑзÑÐµÑ Ð´Ð»Ñ ÑÐ°Ð·Ð´ÐµÐ»ÐµÐ½Ð¸Ñ ÐºÐ°Ðº пÑÑÑÑе
ÑÑÑоки, Ñак и оÑÑÑÑпÑ. РгоÑовÑÑ
ÑабоÑаÑ
обÑединение ÑÑиÑ
двÑÑ
ÑпоÑобов
ÑÑиÑаеÑÑÑ Ð¸Ð·Ð»Ð¸Ñним и лÑбиÑелÑÑким.
</p>
<p>
РоÑÐµÐ½Ñ ÑÑаÑом пиÑÑме абзаÑÑ Ð±Ñли ÑÐ°Ð·Ð´ÐµÐ»ÐµÐ½Ñ ÑпеÑиалÑнÑм Ñимволом: ¶,
<i>pilcrow</i> (знак абзаÑа). РнаÑÑоÑÑее вÑÐµÐ¼Ñ ÑÑо ÑÑиÑаеÑÑÑ Ð·Ð°Ð¼ÐºÐ½ÑÑÑм и
ÑÑÑдно ÑиÑаемÑм.
</p>
<p>
ÐаÑколÑко ÑÑÑдно ÑиÑаÑÑ? ÐоÑмоÑÑиÑе Ñами:
<button data-toggle-text="РнеÑ! ÐеÑеклÑÑи обÑаÑно!">
ÐÑполÑзÑем "pilcrow" Ð´Ð»Ñ Ð°Ð±Ð·Ð°Ñев
</button>
</p>
CSS
p {
margin: 0;
text-indent: 3ch;
}
p.pilcrow {
text-indent: 0;
display: inline;
}
p.pilcrow + p.pilcrow::before {
content: " ¶ ";
}
JavaScript
document.querySelector("button").addEventListener("click", function (event) {
document.querySelectorAll("p").forEach(function (paragraph) {
paragraph.classList.toggle("pilcrow");
});
var newButtonText = event.target.dataset.toggleText;
var oldText = event.target.innerText;
event.target.innerText = newButtonText;
event.target.dataset.toggleText = oldText;
});
РезÑлÑÑÐ°Ñ ÐоÑÑÑпноÑÑÑ
Разделение конÑенÑа на абзаÑÑ Ð¿Ð¾Ð¼Ð¾Ð³Ð°ÐµÑ ÑделаÑÑ ÑÑÑаниÑÑ Ð±Ð¾Ð»ÐµÐµ доÑÑÑпной. ÐÑогÑÐ°Ð¼Ð¼Ñ ÑÑÐµÐ½Ð¸Ñ Ñ ÑкÑана и дÑÑгие вÑпомогаÑелÑнÑе ÑÐµÑ Ð½Ð¾Ð»Ð¾Ð³Ð¸Ð¸ пÑедоÑÑавлÑÑÑ ÑоÑÑкаÑÑ ("shortcut" - кÑаÑÑайÑий пÑÑÑ), позволÑÑÑие полÑзоваÑелÑм пеÑÐµÑ Ð¾Ð´Ð¸ÑÑ Ðº ÑледÑÑÑÐµÐ¼Ñ Ð¸Ð»Ð¸ пÑедÑдÑÑÐµÐ¼Ñ Ð°Ð±Ð·Ð°ÑÑ, позволÑÑ Ð¸Ð¼ пÑоÑмаÑÑиваÑÑ ÑодеÑжимое, напÑимеÑ, как пÑÑÑÐ°Ñ ÑÑÑока позволÑÐµÑ Ð¿Ð¾Ð»ÑзоваÑелÑм, воÑпÑинимаÑÑим инÑоÑмаÑÐ¸Ñ Ð²Ð¸Ð·ÑалÑно, пÑопÑÑкаÑÑ Ð°Ð±Ð·Ð°ÑÑ.
ÐÑполÑзование пÑÑÑого ÑлеменÑа <p>
Ð´Ð»Ñ Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ñ Ð¿ÑÑÑого пÑоÑÑÑанÑÑва Ð¼ÐµÐ¶Ð´Ñ Ð°Ð±Ð·Ð°Ñами ÑвлÑеÑÑÑ Ð¿Ñоблемой Ð´Ð»Ñ Ð»Ñдей, коÑоÑÑе иÑполÑзÑÑÑ ÑеÑ
Ð½Ð¾Ð»Ð¾Ð³Ð¸Ñ ÑÑÐµÐ½Ð¸Ñ Ñ ÑкÑана.
ÐÑли ÑÑебÑеÑÑÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑное пÑоÑÑÑанÑÑво, иÑполÑзÑйÑе ÑвойÑÑва CSS, напÑÐ¸Ð¼ÐµÑ margin
, ÑÑÐ¾Ð±Ñ ÑоздаÑÑ Ñакой ÑÑÑекÑ:
p {
margin-bottom: 2em; // ÑвелиÑение пÑÑÑого пÑоÑÑÑанÑÑва поÑле абзаÑа
}
СпеÑиÑикаÑии СовмеÑÑимоÑÑÑ Ñ Ð±ÑаÑзеÑами СмоÑÑиÑе Ñакже
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4