Web Design Tutorials: HTML5 Elements

Web Design Tutorials: HTML5 Elements

As we discussed in the previous two tutorials First Day to Web Design and Starting HTML5the mentioned programming language (HTML5) has many tags; actually these tags are called HTML5 elements. We put things inside tags and they are shown as elements on the webpage. E.g. Heading tag “<h1> your heading here</h1> outputs a big text like a title on the webpage.




HTML5 Elements:

The HTML element is everything from the start tag to the end tag:

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

HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the “<br> element (which indicates a line break).

HTML elements can be nested, means you can put an element inside another element. All HTML documents consist of nested HTML elements.The big example for this clam is the HTML body structure itself as shown below:

Explaination:

The <html> element defines the whole document. It has a start tag <html> and an end tag </html>. The element 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>. The element content is two other HTML elements (<h1> and <p>). The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>. The element content is: My First Heading. The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>. The element content is: My first paragraph.

Keep in Mind:

1- Do not forget the end tag, though in some cases like below this point not really serious;

 

"The example above works in all browsers, because the closing tag is considered optional. Never rely on this. It might produce unexpected results and/or errors if you forget the end tag."

codejow

2- Use Lowercase tags:

Though HTML tags are not case sensitive: <P> means the same as <p>. The HTML5 standard does not require lowercase tags, but we recommend lowercase in HTML.

3- Empty HTML Element:

HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be “closed” in the opening tag like this: <br />.

HTML5 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.

Stay Tuned with Codejow for more on HTML5;

Previous How to Set-up an IDE for Java (+Video)
Next Introduction to Variable in CPlusPlus (Declaration & Scope)

About author

Raza Bayani
Raza Bayani 42 posts

<p>Raza Bayani studies BCE (Bachelor in Computer Engineering) in Poly-technical University of Kabul. He is the CEO of CODEJOW group, a web designer, coder and recently a blogger. Raza thinks, he can help others and also boost-up his own programming skills being on codejow.com.</p>

View all posts by this author →

You might also like