HTML elements are the building block of HTML. They are responsible for creating web pages, thus defining the content on the web page. The elements always contain an opening tag and a closing tag. The content goes inside the two tags.
Syntax of HTML elements
<tag name> content of the element </tag name>
HTML tags and HTML elements can be confusing at times since these terms are used interchangeably. HTML elements are the collection of the opening and closing tags and the content. On the other hand, the HTML tag is either the opening or the closing tag. They both define the webpage hence can be used interchangeably.
HTML Empty Elements
These are elements without a closing tag. They are termed as called self-closing.
Example: <input>, <cite>, <i >, <area>,<base>, <col>, <hr>, <img>
Nesting HTML elements
This is the placing of an element inside another element. The nested element is called a child element. The HTML elements should always be nested correctly and closed in inverse order of how they are defined. The last tag opened must be closed first.
Example of good HTML nesting
<head> <title>THis is a good nested element exampole</title> </head> <body> <h1> Is this really <b>good</b>Nesting <i>of HTMl</i><u>elements</u></h1> </body>
Example of bad HTML nesting
Notice the incorrect <i> tag usage.
<head> <title>THis is a good nested element exampole</title> </head> <body> <h1> Is this really <b>goodNesting <i>of HTMl</b><u>elements</h1></u></i> </body>
Categories of HTML elements
Inline level elements
Inline level elements only take as much space as needed. They do not start with a new line and only take the required space.
Examples: <img>, <b>,<i>, <span>, <a>, <em>, <input>, <button> ,<button>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>.
Block-level elements
Block-level element occupies the full width of the webpage from left to right. It has a line break before and after.
Examples : <div>, <p>, <ol>, <ul>, <form>, <li>, <h1> to <h6>,<div>,<header>, <footer>, <video>, <tbfoot>, <table>, <canvas>,<figure>,<aside>,<hr>,<dt>,<figcaption> <address>,<article>,<blackquote>,<canvas>, <dd>,<dl>,<dt>,<hr>,<nav>, <noscropt>,<pre>, <section>,<fieldset>
Classification of HTML Elements
Root Element
<html>
It defines the whole HTML webpage. It’s the main root element.
Document metadata element
- <head> – Defines the header block where you can provide more information about the document. You can include the title, scripts and stylesheets.
- <title> – defines the document title that is displayed in the browsers title bar.
- <base> – specifies the base relative URL
- <link> – links documents
- <meta> provides more information for the document
- <style> – contains style information for the document
Section elements
The section elements include <body>,<article>, <section>,<nav>,<aside>,<h1>to <h6>,<hgroup>, <header>, <footer>, <address>
<body>
It defines the webpage body.
The section elements also include semantic elements.
- Nav Element – Holds the navigation bar.
- Header Element – Always at the top and can be used to hold the menu
- aside area – includes a sidebar.
- Section Element – is a thematic grouping of content
- Footer Element – Always at the bottom of the page
The Headings elements
We have six heading elements in HTML. The font size reduces as we go from h1 to h6.
Example:
<body> <h1>This is main heading.</h1> <h2>This is subheading h2.</h2> <h3>This is subheading h3.</h3> <h4>This is subheading h4.</h4> <h5>This is subheading h5.</h5> <h6>This is subheading h6.</h6> </body>
Grouping elements
They organize the blocks or sections of content between the body opening and closing tags. They include: <p>, <hr>,<pre>,<blockquote>,<ol>,<ul>,<menu>,<li>,<figure>,<figcaption>,<div>. Lets discuss some of the grouping elements one should know.
<hr> – Draws a horizontal line.
<body> <!-- Please draw a horizontal line--> <p>Horizontal line</p> <hr> <!-- Please draw a horizontal line--> </body>
List Elements
Ordered list
Opening and closing tags are <ol> Contains the list of Items</ol> . The ordered list element has attributes that determine how the list is displayed. It can be numbered with uppercase letters, lowercase letters, numbers, etc.
Example:
<head> <title> Ordered List</title> </head> <body> <ul> <li>Home</li> <li>contact</li> <li>services</li> <li>career</li> </ul> </body>
Unordered list
In an unordered list, the Items by default are marked with bullets, you can as well change the list to disc, circle, square, or none. The opening and closing tags are. <ul></ul>.
Example:
<body> <ol> <li>Home</li> <li>contact</li> <li>services</li> <li>career</li> </ol> </body>
P Elements
This a paragraph element <p> used to create lines of text in a HTML webpage.
<body>
<p>
This is a paragraph.
</p>
<p>
This is another paragraph.
</p>
</body>
Text level semantic elements
Tis elements define the meaning, structure or style of word in text. They include: <a>,<abbr>,<b>,<bdi>,<br>,<cite>,<code>,<data>, <em>, <i>, <mark>,<small,<span>,<sub>,<sup>,<strong>,<sup>. Lets discuss some of the most common text level semanticselements one should know.
Anchor element
The anchor <a> element is used for creating hyperlinks between pages or sections in a document. To be able to determine the destination of the hyperlink, we use a href attribute. Browsers display the link in different categories depending on.
- Unvisited link – the color is blue and not underlined
- Visited Link – the color is purple and underlined
- Active Link – the color is red and underlined
These are default attributes and can be changed using CSS.
<body> <a href="the link goes here">Click here for the Link</a> </body>
em Element
This is an emphasize text <em> . It creates emphasis on text.
Italic element
Used to italicize text on a webpage.
Image and Multimedia elements
They include: <area>, <audio>,<img>,<map>,<track>,<video>
img Element
The <img> element does not require a closing tag. It’s used to insert images in the web browser.
<img src="images.png" alt="this is my image" height="250px" width="250px">
Table content/Tabular elements
These are elements used to create tabular data(table data). They include:
<table> ; used to create a table
<caption> ; specifies the title of the table
<col> ; used to set attributes for the column
<colgroup> ; defines a group of columns
<tbody> ; defines a tables body
<td> ; defines a tables cell that holds table data
<tfoot> ; defines the tables footer
<th> ; inserts a header cell in a table
<thead>defines the tables header
<tr>defines a tables row
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<caption align="center">HTML Tabular Elements</caption>
<table border = "2" bordercolor = "green" bgcolor = "yellow">
<thead>
<tr>
<td colspan = "3" align="center">This is the table Header</td>
</tr>
</thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
<tfoot>
<tr>
<td colspan = "3" align="center">This is the table footer</td>
</tr>
</tfoot>
</table>
</body>
</html>
Form Elements
Form elements are used to create website forms that a user can fill and submit. These elements include; <button>,<datalist>,<fieldset>,<input>,<label>,<legend>,<meter>,<optgroup>,<option>,<output>,<progress>,<select>,<textarea>
<!DOCTYPE html>
<html>
<head>
<title>sign up</title>
<style type="text/css">
body{
background-color: lightblue;
padding: 0;
margin: 0;
}
#wrapper{
width: 900px;
background-color: white;
margin: 0px auto;
min-height: 400px;
border: 1px solid black;
margin-top: 40px;
border-radius: 5px;
}
#form{
margin: 0px auto;
width: 210px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="form">
<form>
<fieldset>
<legend>FORM ELEMENTS</legend>
<label>firstName:</label><br>
<input type="text" name="firstName"></br></br>
<label>lastName:</label><br>
<input type="text" name="lastName"><br></br>
<label>email:</label><br>
<input type="text" name="email"><br><br>
<label for="cars">Choose your favorite car:</label><br>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="suzuki">Suzuki</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="toyota">Toyota</option>
</optgroup>
</select><br><br>
<label>Text Area</label><br>
<textarea name="comment" form="usrform">Enter your comment here </textarea><br>
<label>password:</label><br>
<input type="password" name="password"><br></br>
<label>re-enterPassword:</label><br>
<input type="password" name="passwordConfirm"><br></br>
<label>image:</label><br>
<input type="file" name="image"><br><br>
<input type="submit" name="submit"><br>
<progress max=10 value=0>0%%</progress>
<progress max=100 value=25>25%%</progress>
<progress max=8 value=4>50%%</progress>
<progress max=100 value=75>75%%</progress>
<progress max=25 value=25>100%%</progress>
<progress>Unknown</progress>
</fieldset>
<br>
</form>
</div>
</div>
</body>
</html>
Interactive Elements
These elements create an interactive user interface objects. The inlude <details>,<dialog>,<menu>, <summary>
HTML Menu Elements
The HTML <menu> and <menuitem> are no longer used. Instead, we use the unordered list to create menus and menu items. It defines a list of commands used to create menus, both vertical or horizontal menus. Its represented by a list of unordered elements. The <menu> element consists of a list of <menuitem> for each selectable option.
Scripting elements
HTML allows scripting elements to make dynamic content and webpages. It supports scripting languages such as JavaScript. Examples of scripting elements include <script>, <noscript>,<canvas>
<script> element
It is used to embed JavaScript into Html. It contains scripting elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Thank you for clicking me";
}
</script>
</head>
<body>
<h1>The onclick Event</h1>
<p>Click the button to trigger a function that will output "Thank you for clicking me"</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Edits Elements
Allows alteration of the text at specific parts.
Examples: <del> and <ins>
Conclusion
This was our tutorial on the HTML element. HTML is the starting point of any web developer, and hence you need to understand it well. I hope this helps you and answers almost all questions about HTML Elements. Got anything more to discuss? Do let us know in the comments below.
