HTML Blocks

HTML Block Elements

Usually the HTML elements are defined as block level elements or as inline elements.

Generally block level elements start as well as end with a new line when displayed in a browser.

For example: <h1>,<p>,<ul>,<table>

HTML Inline Elements

Talking about inline elements it must be mentioned that normally they are displayed without starting a new line.

For example: <strong>,<td>,<a>,<img />

The HTML <div> Element

The HTML <div> element is a block level element that can be used to group other HTML elements. This element comes in pairs. As you already know we should open it ( <div>) and after typing the information we should certainly close it. (</div>).

The <div> element has no meaning. The only meaning is that the browser will display a line break before and after it because it is a block level element.

When the <div> element is used together with CSS, it can be used to set style attributes in order to large blocks of content.

We have also another common use of the <div> element, which is for document layout.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for phrasing content. This element comes in pairs. As you know this element also should be opened( <span>) and after typing the text it should be closed ( </span>)

When we use the </span> element together with CSS, it can be used for styling purposes so it can be used to set style attributes to parts of the text.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>
      <h3>Here can be any heading(title)</h3>
      <ul>
        <li>Some list item.</li>
        <li>Another list item.</li>
      </ul>
      <p>Some text <span style="color:#ff9311">with span</span></p>
    </div>
  </body>
</html>

Here is the result of our code.

As you can see in the above mentioned example, we use some elements. All of them come in pairs. All our elements are grouped inside the <div> tag. Inside the <p> tag we see our <span> tag with the help of which we have changed the color of the text. With the help of CSS we can do many other changes too. About all that we will learn in our next chapters.