Руководство HTML Block/Inline Elements
View more Tutorials:
Элементы в HTML делятся на 2 вида: Block-Level elements (Блочные) и Inline elements (Строчные элементы).
Block-level Elements
Когда Block-level element (блочные элементы) отображаются на браузере, они автоматически добавляют разрывы строк (line break) впереди и сзади.

<h3>Block Element Example:</h3> <hr/> Tom <h1>and</h1> Jerry.
Список всех Block-level element (по умолчанию) у HTML5:
- <address>
- <article>
- <aside>
- <blockquote>
- <details>
- <dialog>
- <dd>
- <div>
- <dl>
- <dt>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
- <header>
- <hgroup>
- <hr>
- <li>
- <main>
- <nav>
- <ol>
- <p>
- <pre>
- <section>
- <table>
- <ul>
Примечание: Некоторые элементы по умолчанию это Block-Level element, например <div>, но вы можете его конвертировать в Inline Element если применить к нему CSS: {display:inline}.
div-inline-example.html
<h3>DIV (Default):</h3> This is a <div>DIV</div> element. <hr/> <h3>DIV style:{display:inline}</h3> This is a <div style='display:inline'>DIV</div> element.
Inline Elements
Inline element (строчные элементы) постоянно появляются в строке (sentence), при отображении на браузере, он не добавляет автоматически разрывы строк (line break) впереди и сзади.

<h3>Inline Element Example:</h3> <hr/> Tom <b>and</b> Jerry.
Список всех Inline element (по умолчанию) у HTML5:
- <a>
- <abbr>
- <acronym>
- <audio> (if it has visible controls)
- <b>
- <bdi>
- <bdo>
- <big>
- <br>
- <button>
- <canvas>
- <cite>
- <code>
- <data>
- <datalist>
- <del>
- <dfn>
- <em>
- <embed>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <label>
- <map>
- <mark>
- <meter>
- <noscript>
- <object>
- <output>
- <picture>
- <progress>
- <q>
- <ruby>
- <s>
- <samp>
- <script>
- <select>
- <slot>
- <small>
- <span>
- <strong>
- <sub>
- <sup>
- <svg>
- <template>
- <textarea>
- <time>
- <u>
- <tt>
- <var>
- <video>
- <wbr>
Примечание: Некоторые элементы по умолчанию это Inline element, например <span>, но вы можете его конвертировать в Block-Level если применить к нему CSS: {display:block}.
span-block-example.html
<h3>SPAN (Default):</h3> This is a <span>SPAN</span> element. <hr/> <h3>SPAN style:{display:block}</h3> This is a <span style='display:block'>SPAN</span> element.
<div> является Block-level element, это один из самых широко используемых элементов, и самый важные в документе HTML, он используется для содержания других жлементов или участвует в создании лэйаута (Layout) страницы.
По умолчанию <div> создает прозрачный прямоугольный участок, но вы можете визуально увидеть его если применить к нему CSS, например: background, border,....
div-css-example.html
<!DOCTYPE html> <html> <head> <title>DIV Element</title> <meta charset="UTF-8"> </head> <body> <h2>DIV Css Example:</h2> <div style="background:#eee;width:250px;padding:5px;"> <h3>HTML Tutorials</h3> <ul> <li>Iframe</li> <li>Tables</li> <li>Lists</li> </ul> </div> <p>Others ...</p> </body> </html>
<span> является важным Inline element и используется большего всего в документе HTML. Он используется для содержания других Inline element, или текстовых содержаний. <span> создает прозрачный участок, но вы можете визуально увидеть его если применить к нему CSS, например: background, border,...

span-css-example.html
<!DOCTYPE html> <html> <head> <title>SPAN Element</title> <meta charset="UTF-8"> </head> <body> <h2>Span Css Example:</h2> <p> Apollo 11 was the spaceflight that landed the first humans, <span style="background:#eee;color:blue;padding:3px;margin:2px;"> Americans <b>Neil Armstrong</b> and <b>Buzz Aldrin</b>, on the Moon on July 20, 1969, at 20:18 UTC. </span> Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. </p> <p>...</p> </body> </html>