Block and inline elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

In the paragraph above, you can see the block level visually by the khaki background color applied to the block.

Some examples of block level elements include
<div> a division or a section
<p> paragraph
<hn> headings, where "n" is a number, usually from 1 to 6

This is a heading 5 with a background color to show the block.

<ul> unordered and <ol> ordered lists
<li> list items

An inline element does not start on a new line and only takes up as much width as necessary.

You can see the inline element above because there are two values added to the class attribute connnected to the span command.

Some examples of inline elements include
<a> anchor
<b> bold or <strong> strong
<i> italics or <em> emphasis
<img> image
<span> is used to group inline-elements in a document

For example, this is a span inline element in which the color of the text was changed, but it did not affect the remainder of the block element paragraph (which itself had its background color modified with a class attribute that had a color value just to display the block).

Headings

Tags for headings are of the style <hn> where n is replaced by a numeral between 1 and 6. The first pages we created use a Heading 1 for your name. Take a look at the code and how it displays.

<h1 class="w3-text-purple;"style="text-align:center;">Your name in the center of the block level element.</h1>

Your name in the center of the block level element.

All of our pages use heading tags to identify different parts of the page

For example, the title on line 111 of this page is a Heading 1

The title of each of the major divisions on this page is a Heading 2 (as is this line, line 272)

We don't have any standard Heading 3 elements on this page, except for this line, line 273

This line of text, line 274, is a Heading 4

And this line is a Heading 5.

We added a Heading 6 here just to see what it looks like.

The tags tell the browser to display the text between the opening tags
<h1, h2, h3, h4, h5, or h6> respectively
and the closing tags
</h1, /h2, /h3, /h4, /h5 or /h6> respectively
in the manner that the particular browser chooses to display a Heading 1, a Heading 2, a Heading 3, a Heading 4, a Heading 5, or a Heading 6

Sometimes we add a class attribute to a heading. See line 275 in this page's source code.

Lists (this element, by the way, is a Heading 2)

Unordered Lists

W3Schools on HTML Lists

The basic list in HTML is the unordered list. The following shows the usage of list tags.

<ul> - the start tag
        <li> - the tag for each item in the list, followed by the end tag </li>
        <li> - another list item </li>
        <li> - yet another </li>
</ul> - the end tag

Ordered Lists

1. Ordered lists are the same except "ul" (unordered) is replaced with "ol" (ordered).
   • Lists can be nested within lists.
   • Look at the code on lines 319-331 on this page.
2. We just nested two unordered list items within list item number one in an ordered list consisting of two list items, 1 and 2

Paragraph and line breaks

<p> - the tag for paragraph enters more vertical space than line breaks.
Remember to end a <p> with a </p>.

<br> - the tag for line breaks
returns to the following line and resumes there.
It has no end tag because a break tag is an empty element (it affects no content).

Empty elements

Some elements are simply directives and have no content and are their tags are thus handled differently from elements that have content.

For example, horizontal rules are created using the <hr> tag. The horizontal rule is is an empty element because it provides a simple directive - <insert a horizontal line> - and has no content.

Since an empty element does not require an end tag, but the XHTML standard requires one, the convention for empty element tags is to follow the tag with a blank space and a slash to indicate that the tag both opens and closes this element.

Or, that was the convention. The current convention is to not have a final / in a empty element.

---

The same is true for other empty elements

• <area>
• <base>
• <basefont>
• <br>
• <col>
• <frame>
• <img>
• <input>
• <isindex>
• <link>
• <meta>
• <param>

There's a difference between block and inline grouping tags

There's a difference between structural and semantic markup

There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages - they are known as semantic markup.

Examples include
<em> which allows you to indicate where emphasis should be placed on selected words;

Browsers often display <em> as italics

<blockquote> which which indicates that the block of text is a quotation.

Browsers tend to indent the contents of the blockquote

Other examples include
<abbr> for abbreviations
<cite> for marking a citation
<address> to contain contact details for an individual