Today we are going to talk about the tags that are shown below.
b = bold formating ( inline tag)
br = line break (inline tag) *
h1 = header, level one (block tag)
h3 = header, level three (block tag)
li = list item (block tag)
ol = ordered list (block tag)
ul = un-ordered list (block tag)
* although it introduces a line break
The content that are included on a web pages is packaged as shown in the following diagram.
The basic types of tags are block and inline. Block tags have a “box’ around the element content, either a paragraph or a simple header. This “box” extends across the full width of it’s nearest container. And, in our case that nearest container is the body tags that extend the full width of your browser screen. We’ll talk more about containers in future posts.
So, the important features of the block tag are:
1 – Extends the width of the nearest container. No other content is allowed on that specific line.
2 – It extends the full width of the container even if there is not enough content to fill up the line i.e., the h1 and h3 tags.
3 – The height is determined by the amount of content i.e., a paragraph.
4 – There is a margin on the top and bottom around the element.
Unlike the block tag, the inline tag only takes up as much space as is needed to display the content.
The block element is what forces much of the structure of a web page. In my example, all the words ran together. So, when the h1 tag was added around FAMILY VACATION, it forced all the other content down to another line. And similarly for the rest of the block tags as they were added.
The bold tags (opening and closing ) <b></b>will cause any content between them to be displayed in bold font.
The single <br /> tag causes any content following it to drop down to the line below.
The opening and closing <h1></h1> and <h3></h3> tags determine the letter sizes. The h1 tag letter sizes are larger than the h3 tags.
The <ol></ol> opening and closing tags will result in a list with some order such as 1,2,3 or A,B,C.
The <ul></ul> opening and closing tags will display a list with symbols such as circles or squares.
The <li></li> opening and closing tags are needed to define and separate the individual list items.
What people are saying