Exibição de Tags : De cima para baixo e da esquerda para direita

Nota : existe CSS que são capazes de mudar a classe inline/block tipica de uma tag :
   display:inline;
   display:block;
   display:inline-block;

   Elementos inline são as tags que são colocadas uma depois da outra ( da esquerda para a direita ) na mesma linha até que preencha a largura do browser e ai a exibição passa a ser na linha seguinte.

   Elementos block são as tags que são colocadas uma a cada linha, ou seja, mesmo que haja espaço a direita para exibir outra tag seguinte, devido a tag atual, a exibição da tag seguinte passa a ser na linha seguinte.

Página de referência : https://www.w3schools.com/html/html_blocks.asp

Elementos Block :

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1-h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

Elementos Inline :

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Elementos Block :


<address>

Tag1
Tag2

<article>

Tag1
Tag2

<aside>

<blockquote>

Tag1
Tag2

<dd>

Tag1
Tag2

<div>

Tag1
Tag2

<dl>

Tag1
Tag2

<dt>

Tag1
Tag2

<fieldset>

Tag1
Tag2

<figcaption>

Tag1
Tag2

<figure>

Tag1
Tag2

<footer>

<form>

Tag1
Tag2

<h1 a h6>(h6)

Tag1
Tag2

<header>

Tag1
Tag2

<hr>

Tag1
Tag2

<li>

  • Tag1
  • Tag2

    • <main>

    Tag1
    Tag2

    <nav>

    <noscript>

    <ol>

      Tag1
      Tag2

    <output>

    Tag1 Tag2

    <p>

    Tag1

    Tag2

    <pre>

    Tag1
    Tag2

    <section>

    Tag1
    Tag2

    <table>

    Tag1
    Tag2

    <tfoot>

    Tag1 Tag2

    <ul>

    <video>


    Elementos Inline :


    <a>

    Tag1Tag2

    <abbr>

    Tag1Tag2

    <acronym>

    Tag1Tag2

    <b>

    Tag1Tag2

    <bdo>

    Tag1Tag2

    <big>

    Tag1Tag2

    <br>


    Tag1
    Tag2

    <button>

    <cite>

    Tag1Tag2

    <code>

    Tag1Tag2

    <dfn>

    Tag1Tag2

    <em>

    Tag1Tag2

    <i>

    Tag1Tag2

    <img>

    Tag1Tag2

    <input>

    Tag1Tag2

    <kbd>

    Tag1Tag2

    <label>

    <map>

    Tag1Tag2

    <object>

    Tag1Tag2

    <q>

    Tag1Tag2

    <samp>

    Tag1Tag2

    <script>

    <select>

    <small>

    Tag1Tag2

    <span>

    Tag1Tag2

    <strong>

    Tag1Tag2

    <sub>

    Tag1Tag2

    <sup>

    Tag1Tag2

    <textarea>

    <time>

    <tt>

    Tag1Tag2

    <var>

    Tag1Tag2
    Algumas tags como a div ( de bloco ) são utilizadas definir uma seção do documento e para agrupar elementos e dar um 'estilo' comum aos elementos agrupados:

    Londres

    Londres é a capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma população metropolitana acima de 13 milhões de habitantes.


    A tag span ( inline ) é utilizada definir uma seção do documento e para conter e estilizar textos em particular como abaixo :

    Meu Título Importante demais


    Podemos controlar a exibição do elmento inline/block pela CSS :

    display: inline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

    display: inline-block

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

    display: block

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

    Agora podemos criar um menu com links de navegação em qualquer ponto da página :

    Horizontal Navigation Links

    By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).

    Note: If you resize the browser window, the links will automatically break when it becomes too crowded.