Inline & Block Elements

Everyone using HTML needs to understand the differences between inline and block elements.

Block Elements

A block-level element begins it's content on a new line and also forces content after the element to begin on another new line.

Some examples of commonly used block elements:

DIV

P

H1,H2,H3,etc..

P is a paragraph tag. If you write two sentences and enclose them in P tags, they will be separated by a blank line.

If you use WordPress and the Visual editor to write your page content, each new paragraph of content there is actually enclosed with this HTML tag. WordPress does this automatically when it displays the page. For this reason, WordPress can actually mess up HTML, CSS and PHP code that is entered over multiple lines. This can be fixed by simply removing space and blank lines between HTML tags, as shown in the example code below for the paragraph tag. Another option will be discussed in the PHP class that will be after the CSS class in this series.

DIV is a division tag and is commonly used along with CSS (can be used to completely control the layout of a site). Without any CSS at all, a DIV tag will still create a new line but without space between the lines.

In the next Techie Master Class lesson on CSS, I will be going into more detail about using this tag with CSS for design purposes.

H1, H2, H3, H4, H5 & H6 are all header tags. The number indicates the importance of each tag within your page content and is commonly looked at by search engines to help analyze the semantic meaning behind web pages. H1 is the most important heading on the page and H6 is the least important. It is not necessary to use all of the headings on a single page.

Without CSS, the header tags will have larger text when they are more important (H1 is really large text, down to H6 being small text). However, CSS can easily be used to change this and will be discussed more in the next class.

I find it to be best to set the H1 tag as the title / main subject of each page on your website. I will then often set the H2 tag as the website title, and then use other header tags for other main points within the content of my pages. Some WordPress themes actually use the first two header tags in the opposite manner, so I try to look at this when picking a theme to use to ensure it is being done right. This makes it easier to target a unique subject on each page of a site. I do not ever use more than one of each H1 and H2 tags on the same page but will sometimes use more than one of the other tags on the same page.

Typically, text within header tags will be bold. The sample HTML code below shows how these tags are used:

Inline Elements

The opposite is an inline-level element, which does not force a line break.

SPAN is a commonly used inline element. By setting CSS on a SPAN HTML tag, you can completely change the look of the text within that tag compared with the surrounding text. CSS will be covered more extensively with elements like these in the next class, but a basic example has been used here to show an example usage of an inline element. The STYLE attribute that I have used for the SPAN tags can be used with almost any HTML tag to provide CSS code for that tag.

An example of this has been provided below:

Many other HTML tags are also inline, such as most of the tags covered in this lesson so far like B, I, U, S, IMG, and A.