By the end of this lesson, you'll know what an HTML element is, how to start using them and some common elements in HTML.
An HTML element is the unit of valid HTML markup your browser can display. HTML uses tags to create markup. Most tags in HTML, for example the button tag, comes in pairs - an opening (<button>) and a closing tag (<button>), just as in the html code below:
<button> click me </button>
A button element in HTMLIn this case, the browser sees the opening tag (<button>) the text in between and the closing tag (</button>) and understands that this is a button element. The combination of the opening and closing tag is what forms the HTML element. This combination is the unit of markup that the browser can understand and display on the page.
if you forget to add the closing tag of an element, your browser would try the best it can to fill it in but it can fail and do so incorrectly.
The code example below shows what i mean.
let's say while creating the button, i forgot to add the foward slash in the closing tag
<button> click me <button>The browser sees this and renders this output...
The result of the code snippetCan you spot the problem in the output image?
The browser created the button element from the code and created an additional one (an empty one) because I failed to close the button element.
So you have to take extra care to make sure you're adding the tags with the proper opeining and closing tags so they can be displayed properly- HTML doesn't show error messages!
Self Closing tags and Void elements
Not all HTML tags come in pairs. HTML tags that are written without a closing tag partner are called self-closing tags. HTML elments created using self-closing tags are called void elements. self-closing tags are written in a similar way as opeining tags but without the closing tag patner. Some examples of void elements (elements without a closing patner ) in HTML includes :
- line-break elment (<br>)
- image elment (<img>)
- input element (<input>)...e.t.c.
These are also HTML elements (precisely void elements), a unit of markup that can be displayed on the browser.
In earlier versions of HTML (before version 5.0), one is required to add a foward slash to a self-closing tag just before greater than sign, e.g <br/>, <img/>, e.t.c This is not a requirement anymore. You can choose to add the foward slash or choose to leave to it out. If you decide to add it, make sure to put it in the right position (just before the greater than sign)
Don't worry about all these void elements for now, we'll talk about them properly in comming lessons. For now, let's see how to use just one of them, the line-break element (<br>).
Line break Element
The line-break element is used to add a new line on the page. If an element comes after the line-break element, that element would be displayed in the next line, not the same line as the previous element. This is what i mean:
<button> click me </button>
<button> click me also </button>
Both button elements are displayed next to each other on the webpageNow check this out (using the line break element)
<button> click me </button> <br> <button> click me also </button>
The secnod button element is displayed in the next lineAny element, placed after the line-break element would be pushed to the next line!
So that's it, an HTML element is the smallest piece of valid HTML markup that your browser can display. Most of HTML elements are written in pairs, a few others are self-closing. Next, let's learn about some HTML elments - headings and paragraphs.