HTML 5 Tutorial #4 - HTML Elements

in #steemit6 years ago

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 tagElement contentEnd 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

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

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.


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.


HTML 5 Tutorials:

HTML 5 Tutorial #1 - Introduction
HTML 5 Tutorial #2 - HTML Editors
HTML 5 Tutorial #3 - HTML Basic

Sort:  

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

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

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.

This post has received a 0.42 % upvote from @booster thanks to: @cj23.

This post has received gratitude of 0.63 % from @appreciator thanks to: @cj23.