Programming.a.baby - (Html5) Body elements

Html5 - Article (5)

How To Start

Since Html is a part of the new revolutionary Web 2.0, it came with some simplification, and a better structure but also with more stuff, like new Tags...etc.

More Tags means more learning, but you do not need to use them all.

For people that knows a bit of Html 4 it won't be difficult to learn all the new things.

If you are new in Html or your knowledge is not enough, do not worry, i will explain you step by step and with the easy way, with samples that you can copy and use it at your free will.

Working inside the Html body

Yes, is this what we want to do now, so we won't write nothing in the Html's Head so it will be easy for you to learn, please refer to my previous articles to learn other steps in the Programming.a.baby series.

Sample 1

<body>

<p>
  This tag contains Text
</p>

<br />

<body>

Sample 2

<body>

<div>
 This tag contains Text
 <br />
</div>

<body>

Sample 3

<body>

<div>
 <p>Some Text</p>
</div>

<body>

Content and Empty Elements

We already know that we should not write directly inside the Html Body

Instead we will always use a Tag element.

There are Two types of Tag Elements:

Content Tag Elements which we can fill it with text,images..etc
Empty Tag Elements were we cannot fill it with nothing

Take a Look at the Sample 1 At your right:

The Paragraph "<p>" can contain Text inside
The Break Tag "<br />" cannot contain nothing because it closes it's self

The Layer "Div" in the Sample 2 Also can contain stuff inside, and is what i will recommend to be used always each time you want to write a portion of text.

If you wish you can also use "<p>" inside Layers "<div>" as you see it in Sample 3, the difference between both is that a Paragraph "<p>" occupies the space of two Breaks "<br />"

Later you will find how manipulate the Elements Styles, giving them Colors, width, height...etc

Sample 2.1

<body>

<div>
 <p>My first line</p>
 <p>My second line</p>
</div>

<body>

Sample 2.1 - Output

My first line

My second line

Sample 2.2

<body>

<div>
 My first line <br />
 My second line <br />
</div>

<body>

Sample 2.2 - Output

My first line
My second line

Writing Text in the Html's Body

Take a look now in the sample 2.1 and it's html output

Then compare it with he Sample 2.2 and it's Html output

Sample 3.1

<body>

<div>
 <h2>Header 2</h2>
 <h3>Header 3</h3>
 <h4>Header 4</h4>
 Some Text Here
</div>

<body>

Sample 3.1 - Output

Header 2

Header 3

Header 4

 
Some Text Here

Headers

Body Headers "h#" are easy to use and haves already a formatted style of space, size, weight...etc

Of course we can always later change the styles, but not now, so you won't be confuse.

Another thing that you learn later is that the search engines read your Body Headers when visiting your web page so they can find some key words to index your page in their data bases.

You can use from "<h1>" to "<h5>" , check the Sample 3.1 and it's output

Others are also reading...

Programming.a.baby - (Html5) Meta Tags Robots Index - Follow Noindex Nofollow

Programming.a.baby - (Html5) Meta Tags B ( all html5 meta copyright ) ( html5 copyright meta tag ) ( html5 meta robots )

Programming.a.baby - (Html5) Meta Tags ( html5 beginner meta ) ( Html5 Meta Tag In Body ) ( Html5 Meta Tags Language )