HTML Elements
Each HTML element specifies the nature/type/category of the content associated with it in order to represent it in a specific manner in the page. Examples of names/tags of HTML elements are p (stands for new paragraph), h1 (stands for first heading), h2 (stands for second heading), head (stands for header portion of the page), body (stands for the actual body portion of the page). Elements usually consist of a start tag and end tag, with the content inserted in between.
Structure of the simplest entity is as follows:
<br>
This is an empty element. Note that this doesnt have any content or end tag; it has a specific function. eg.:
<br>This directs a line break.
It is possible to close empty elements in the opening tag like this:
<br />
This was required before HTML5.
But for the documents to be readable by XML parsers, all HTML elements should be closed.
Some entities need an end tag as well, not including this can cause unexpected issues.
Content
eg.
Content comes here:
Another form of entity :
<[tag name ] optional [[parameter name]=[parameter value]] > Content
eg. for “form” entity:
<form input=submit action=example.jsp> Content comes here </form>
Example of a few entities:
<p>This content forms a paragraph</p>
<h1> This content forms the first heading in the page </h1>
Hierarchy of HTML Elements
HTML elements can act as containers for other elements.
The root html entity is named “html”, which has within it a “head” and a “body” entity which are all mandatory. The “head” and “body” entities can contain within it different entities customized to the requirement. The “head” entity stands for denoting the header portion of the page which can include the page title (entity name is “title”) among other things(what things)?. Some commonly used HTML entities are : form, input, text, button, div, br.
<html>
<head>
<title> This is Title 1 </title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph.</p>
</body>
</html>
Types of HTML Elements
There are different types of HTML Elements. Some examples below:
- Document metadata elements like head, title, base, link, meta, style etc.
- Sectioning elements like body, article, section, nav , aside, h1-h6 elements, hgroup, header, footer , address etc.
- Elements which group content like p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, main, div
- Text level semantics like a, em, strong, small, s, cite, q, dfn, abbr, ruby, rt, rp, data, time, code, var, samp, kbd, sub and sup, i, b,u, mark, bdi, bdo , span etc.
- Embedded content like picture, source, img, video, audio, object, param etc.
There is a categorization of HTML elements as block and inline elements. Inline elements allow other elements to be placed to their left and right. Margins and paddings can be adjusted accordingly for spacing between the elements. Block elements are placed in a separate line. Sectioning element div is a block element. Span is an inline element.
The HTML <script> tag allows usage of Javascript programming language/script within HTML for client side form validation and other dynamic changes. It is possible to write scripting statements directly inside the script element or link to an external javascript file using "src" attribute.
Syntax:
<script>Some javascript code </script>