create account

HTML 5 Tutorial #4 - HTML Elements by cj23

View this thread on: hive.blogpeakd.comecency.com
· @cj23 ·
$26.27
HTML 5 Tutorial #4 - HTML Elements
# HTML Elements
We learned from the previous tutorials that HTML is consist of elements. HTML Elements usually consist of a start tag and end tag wherein the content is inserted in between. 
< tagname >Content goes here...< /tagname >

The HTML element is everything from the start tag to the end tag. It means, the start tag, content and end tag are called element. 

Start tag | Element content | End tag
------------ | ------------- | -------------
< h1 > | 	My First Heading | < /h1 >
< p > | My first paragraph. | < /p >
< br > | 

*HTML elements with no content are called empty elements. Empty elements do not have an end tag like < img > element and  < br > element (which indicates a line break).*

## Nested HTML Elements
All HTML documents consist of nested HTML elements. It means that , HTML elements can be nested (elements can contain elements). Let's see the example below to be more clearer. 

![example.png](https://steemitimages.com/DQmNv68BDtMLYWZqwp8pX9a8zxB8h8fjNf8dxcVmYUxkJ4U/example.png)

The **< html >** element defines the **whole document**. It has a **start** tag < html > and an **end** tag < /html >. Now, there are elements between < html > and < /html > and that's the content. The **content** is another HTML element, the < body > element.

The **< body >** element defines the **document body**. It has a **start** tag < body > and an **end** tag < /body >. Now, between the start and end tags is the **content** which are another HTML elements, the < h1 > and < p > elements. 

Did you see now how HTML elements can be nested or contain another HTML elements? 

## Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag. The example below works in all browsers because the closing tag is considered optional.

![example.png](https://steemitimages.com/DQmcr1TAvzxeH6rjRnqmiametkqmNyjA2eMajtEgKTFXTYp/example.png)

**Never rely on this because it might produce unexpected results and/or errors if you forget the end tag. So I advise that never forget to close your tag.**

## Empty HTML Elements 
Empty HTML elements are those elements that have no content and end tag like: 
< br >, < img >, etc. 

Empty elements can be "closed" by adding forward slash to the start or opening tag like this: < br />.

HTML 5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

## Use Lower Tags
HTML tags are not case sensitive. You can write the tags in uppercase or lowercase. < H1 > means the same as < h1 >. 

The HTML 5 standard does not require lowercase tags, but I recommend lowercase in HTML for stricter document types like XHTML.

<hr> 

Note: There should be no space in the HTML tags or between the angle brackets and element name. I just put a space for it to display the tags as it will hide or not display without a space. Remember, web browser don't display HTML tags.

<hr > 

### HTML 5 Tutorials:
[HTML 5 Tutorial #1 - Introduction](https://steemit.com/steemit/@cj23/html-tutorial-1-introduction)
[HTML 5 Tutorial #2 - HTML Editors](https://steemit.com/steemit/@cj23/html-tutorial-2-html-editors)
[HTML 5 Tutorial #3 - HTML Basic](https://steemit.com/steemit/@cj23/html-5-tutorial-3-html-basic)
👍  , , , , , , , , , , , , ,
properties (23)
authorcj23
permlinkhtml-5-tutorial-4-html-elements
categorysteemit
json_metadata{"tags":["steemit","steem","blog","philippines","steemph"],"image":["https://steemitimages.com/DQmNv68BDtMLYWZqwp8pX9a8zxB8h8fjNf8dxcVmYUxkJ4U/example.png","https://steemitimages.com/DQmcr1TAvzxeH6rjRnqmiametkqmNyjA2eMajtEgKTFXTYp/example.png"],"links":["https://steemit.com/steemit/@cj23/html-tutorial-1-introduction","https://steemit.com/steemit/@cj23/html-tutorial-2-html-editors","https://steemit.com/steemit/@cj23/html-5-tutorial-3-html-basic"],"app":"steemit/0.1","format":"markdown"}
created2018-01-26 06:51:45
last_update2018-01-26 06:51:45
depth0
children5
last_payout2018-02-02 06:51:45
cashout_time1969-12-31 23:59:59
total_payout_value19.953 HBD
curator_payout_value6.317 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,318
author_reputation1,090,777,745,148
root_title"HTML 5 Tutorial #4 - HTML Elements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,397,448
net_rshares2,911,710,908,694
author_curate_reward""
vote details (14)
@appreciator ·
<p>This post has received gratitude of 0.63 % from @appreciator thanks to: @cj23.</p>
properties (22)
authorappreciator
permlinkre-cj23-html-5-tutorial-4-html-elements-20180126t173423474z
categorysteemit
json_metadata{"tags":["steemit"],"app":"drotto/0.0.3"}
created2018-01-26 17:34:24
last_update2018-01-26 17:34:24
depth1
children0
last_payout2018-02-02 17:34:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length86
author_reputation55,801,543,512,306
root_title"HTML 5 Tutorial #4 - HTML Elements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,525,787
net_rshares0
@booster ·
<p>This post has received a 0.42 % upvote from @booster thanks to: @cj23.</p>
properties (22)
authorbooster
permlinkre-cj23-html-5-tutorial-4-html-elements-20180126t171846763z
categorysteemit
json_metadata{"tags":["steemit"],"app":"drotto/0.0.3rc3"}
created2018-01-26 17:18:45
last_update2018-01-26 17:18:45
depth1
children0
last_payout2018-02-02 17:18:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length78
author_reputation68,767,115,776,562
root_title"HTML 5 Tutorial #4 - HTML Elements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,522,608
net_rshares0
@cheetah ·
Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://www.w3schools.com/html/html_elements.asp
properties (22)
authorcheetah
permlinkcheetah-re-cj23html-5-tutorial-4-html-elements
categorysteemit
json_metadata""
created2018-01-26 06:52:00
last_update2018-01-26 06:52:00
depth1
children0
last_payout2018-02-02 06:52:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length147
author_reputation942,693,160,055,713
root_title"HTML 5 Tutorial #4 - HTML Elements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,397,482
net_rshares0
@lovejuice ·
re-cj23-html-5-tutorial-4-html-elements-20180126t164749212z
This post has received a 5.96% upvote from @lovejuice thanks to @cj23. They love you, so does Aggroed. Please be sure to vote for Witnesses at https://steemit.com/~witnesses.
properties (22)
authorlovejuice
permlinkre-cj23-html-5-tutorial-4-html-elements-20180126t164749212z
categorysteemit
json_metadata{"app":"postpromoter/1.7.4"}
created2018-01-26 16:47:48
last_update2018-01-26 16:47:48
depth1
children0
last_payout2018-02-02 16:47:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length174
author_reputation10,538,740,461,622
root_title"HTML 5 Tutorial #4 - HTML Elements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,516,738
net_rshares0
@treeplanter ·
Thanks for your donation
Good job! Thanks to @anonteamph00001 you have planted 0.05 tree to save Abongphen Highland Forest in Cameroon. Help me to plant 1,000,000 trees and share my Steem Power to the others. Selfvoting is prohibited, but that should be the reason to spread the world to protect our precious environment. Check out profile of our conservation association @kedjom-keku and the founder/coordinator @martin.mikes to get more information about our conservation program. My current SP is 14514.50. Help me to plant more trees with your delegated SP. 

Thanks a lot,
your @treeplanter 
[www.kedjom-keku.com](www.kedjom-keku.com)
properties (22)
authortreeplanter
permlinkre-cj23-html-5-tutorial-4-html-elements-20180126t145257287z
categorysteemit
json_metadata{}
created2018-01-26 14:52:57
last_update2018-01-26 14:52:57
depth1
children0
last_payout2018-02-02 14:52:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length614
author_reputation62,929,728,687,402
root_title"HTML 5 Tutorial #4 - HTML Elements"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,492,261
net_rshares0