- HTML elements are responsible for creating web pages and define content in the webpage. HTML element usually consist of a start tag and end tag.
- An element is a part of Webpage.
- An element may contain a data item or a chunk of text or an image, or perhaps nothing.
Syntax for HTML Elements:
-
<tagname>Write the content</tagname>
Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements. Empty elements do not have an end tag!
Example:
<html lang="en-us">
<head>
<title>HTML Elements</title>
</head>
<body>
<h1>My first Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Nested HTML Elements
- HTML can be nested, which means an element can contain another element.
- All HTML documents consist of nested HTML elements.
- The following example contains five HTML elements (<html>,<body>,<h1>,<ul>,<li>)
Example:
<html lang="en-us">
<body>
<h1>Nested HTML Elements</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
Empty HTML Elements
- HTML Elements with no content are called empty elements
- The <br>, <hr> tag defines a line break and thematic break, is an empty element without a closing tag.
Example:
<html lang="en-us">
<head>
<title>HTML Paragraph</title>
</head>
<body>
<h1>HTML element with break tag</h1>
<p>This is a <br/> paragraph with line break</p>
</body>
</html>
Block-Level Elements
Block-Level elements are structured main part of web page, by dividing a page into coherent blocks. It always start with new line and takes the full width of web page, from left to right.
Following are the block-level elements in HTML.
<div>, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <address>, <blockquote>, <form>, <table>, <ul>,<ol>, <li>, <video>, <pre>, <p>, <figure>, <figcaption>, <canvas>.
Inline HTML Elements
Inline elements are differentiate the part of a given text and provide it a particular function. It does not start with new line and take width as per requirement.
Following are the Inline elements in HTML.
<a>, <br>, <button>, <code>, <em>, <img>, <input>, <label>, <map>, <object>, <q>, <script>, <span>, <textarea>, <sub>, <sup>, <time>, <select>, <cite>.
Note: Block-Level and Inline Elements are discussed in the next chapters.