1. What are HTML Types?

HTML types are informative to study because HTML code breaks itself into some significant types. Also, the browser deals uniquely with these different HTML types. Therefore, markup is intelligently segmented into the following types based on its behavior regarding HTML tags.

  1. Semantic HTML
  2. Non-Semantic HTML
  3. Presentational and Deprecated HTML

Tutorial Contents:

  1. What are HTML Types?
  2. Semantic HTML
  3. Non-Semantic HTML
  4. What are Presentational and Deprecated HTML Elements?
  5. What are Presentational and Deprecated HTML Attributes?

Moreover, HTML types are also essential to discuss, because some HTML elements and attributes show distinct behavior as compared to others. Also, some elements and attributes are not in use,i.e deprecated and therefore, abandoned due to certain reasons.

2. What is Semantic HTML?

Firstly, that HTML type, which itself addresses some meaning to the browser is known as Semantic HTML. Additionally, it indicates the browser how it will behave after rendering. Also, this semantic HTML type has pre-formatting. Therefore, the communication of the markup with the browser is nicely done. Besides, it gives some extra information to the browser to interpret the markup.
Furthermore, the search engine promptly identifies the semantic HTLM type tags.   And thus delivers a handful of information about its content to the browser. For instance, any content enclosed within <h2>Some Text</h2> tags is immediately detected by browser as h2 heading. Hence, this is the beauty of semantic HTML. The following are some of the semantic HTML tags.

Tag Name Description
<header> The header of any web-page uses this tag. Usually, the header contains some navigation liks or introduction content regarding page.
<footer> The footer of a web-page uses this tag to tell the web-browser that this is footer content.
<nav> This tag carries navigation content.
<section> This tag depicts some section of content that is grouped.
<abbr> It displays the abbreviation.
<acronym> This tag denotes acronym.
<blockquote> It displays some block quoted text.
<img> This displays image on the screen.
<form> It depicts form related content.
<table> The table tag displays the content in a table form.
<dfn> This tag defines something.
<address> It displays address on screen.
<cite> This tag displays the cited text. (shows reference)
<figure> This tag displays some prominent content, which may be image, text, code etc.
<code> It displays some code.
<tt> It displays teletype text.
<h1>–<h6> These are the headings.
<article> It displays the web-page content.
<aside> The content which displays in sidebars, uses this tag.
<details> It displays the detail of something on the web-page.

3. What is Non-Semantic HTML?

Unlike to Semantic HTML type, non-semantic HTML elements reveals nothing concerning the content type. Hence, these are some types of universal elements. Therefore, we can manipulate these elements with CSS to produce the required outcomes of any type. Thus, this is the main difference between the semantic and non-semantic HTML types. The following are non-semantic HTML elements.

Element Name Description
<div> All browsers support this tag. Additionally, it has no attributes in HTML5, but we can style it with the help of id and class attributes. Moreover, this tag is useful where content is in a large amount. Also, it allows nesting and is a block-level element.
<span> It is a very useful tag and can be styled with CSS and javascript. Moreover, It allows adding inline content without any style, as it does not affect the content.

4. What are Presentational and Deprecated HTML Elements?

The use of presentational and deprecated elements is obsolete and avoided. Therefore, to overcome the situation, now cascading style sheets make the most of it. Moreover, almost 99% of web-pages contain CSS for styling purposes.

4.1. Presentational HTML Elements

Many XHTML elements are entirely devoted to presentations and their main use is in text formatting. Hence, such types of elements are known as presentational HTML elements. Following are some of these presentational HTML elements:

Element Name Description
<big>Some Text</big> Its use is to make the text bigger from the surrounding text. Its alternative is, font-size: bigger; that we can implement in cascading style sheets(CSS).
<small>Some Text<small> Likewise big, its use is to display text a bit smaller than the surrounding text. In CSS font-size: smaller; helps to achieve this property.
<sub>Some Text<sub> When there is a need to write some text in subscript, this presentational element comes in handy. Its CSS alternative is as follows.
sub {
vertical-align: sub;
font-size: smaller;
}
<sup>Some Text<sup> Likewise <sub> , this presentational tag is helpful to write any text in superscript. Its css alternative is as follows.
sup {
vertical-align: super;
font-size: smaller;
}
<i>Some Text<i> Its use is to make the text italic or simply tilted. It emphasizes the text and its CSS version is as follows.
i{
font-style:italic;
}
<b>Some Text</b> This is the element that can make some text bold. CSS handles it much better like this.
b{
font-weight:bold;
}

bolder and boldest are other values
There may also be the value from 1-1000

4.2. Deprecated HTML Elements

Some HTML elements may accomplish the goal of text formatting but their use is not in practice. Furthermore, their use is also minimum due to a lack of flexibility in contrast to the latest HTML5 and CSS. Hence, these elements are known as deprecated HTML elements.
Following are some of these deprecated HTML elements:

Element Name Description
<font>Some Text</font>
(deprecated)
This deprecated element selects font from font-family, font-size and font-color. CSS do this formatting by font-family: verdana; font-size: 12px; font-color: #000000; more effectively and flexibly.
<strike>Some Text</strike>
(deprecated)
When there is a need to strikethrough the text, this element in presentational HTML is helpful. Alternatively, text-decoration:line-through; in css do this job.
<s>Some Text</s>
(deprecated)
In the same vein, it has the same function as strike. Moreover, text-decoration:line-through; is used for this formatting in css.
<u>Some Text</u>
(deprecated)
This tag underlines the text. Its alternate is text-decoration:underline; for this purpose.
<tt>Some Text</tt>
(deprecated)
It stands for teletype, that is used to select some fixed width font. CSS style declaration is font-family: Comic sans;
<applet>Some Text</applet>
(deprecated)
In HTML, this element embeds some java or javascript script. It appears as follows.
<applet code="circles.class" width="640" height="640">
This is a sample java applet that will draw circles on the screen.
</applet>

In HTML5, the applet element is no more supported.
Instead, <embed> or <object> elements are in practice.

5. What are Presentational and Deprecated HTML Attributes?

Likewise presentational and deprecated HTML elements, there are some presentational and deprecated HTML attributes. Following is the list of presentational and deprecated attributes.

Attribute Name Description
rev It is same as “rel” and its use is to specify the relationship between current document and linked document.
<link>,<a>
charset It specifies the encoding of the linked document.
<link>, <a>
coords HTML elements coordinates are described with this attribute.
<a>
name We can declare anchor name with this attribute.
<a>
shape Tells the shape of the anchor element.
<a>
nohref It declares that the area has no link attached.
<area>
color This attribute declares the default text color.
<basefont>
alink It specifies the active link color within a document.
<body>
link Specifies the non-visited links color.
<body>
vlink It tells the visited link color to the browser.
<body>
scheme Specifies a way of interpretation of the attributes.
<meta>
background It sets the background image of a document.
<body>
bgcolor It sets the background color of a document.
<body>, <table>
compact Renders the specific list smaller than the surrounding text.<dl>, <dir>, <ol>, <ul>, <menu>
align It declares the content alignment with a document.
<div>,<p>, <h1>--<h6>, <hr>, <img>, <input>, <legend>, <object>, <table>
type Specifies the type of bullet for the list element.
<li>
noshade It tells the browser that there is no shade in <hr> tag and the element appears only in single color.
<hr />
width It specifies the <hr> element width in pixels.
<hr>, <pre>
vspace Specifies the white space above and below the image element.
<img>, <object>
hspace It sets the white space on left and right side of image element.
<img>, <object>
border Specifies border for image.
<img>, <object>, <table>
archive A list of resources relating to object.
<object>
classid Sets class id value like in URL.
<object>
codebase Defines the code location of object.
<object>
codetype Defines type of code as mentioned in classid.
<object>
declare Tells that object should be declared not created.
<object>
standby Text to display while object loading.
<object>
face It declares default font for a document’s text.
<basefont>
size It specifies the default size of text.
<basefont>, <hr />
cellpadding Specifies the padding of a cell.
<table>
cellspacing Sets the space present in between the cells.
<table>
frame Specifies the visibility of table outside border.
<table>
target It specifies where the link will loads i.e in the same tab, separate tab, etc.
<a>, <link>
rules Specifies the visibility of table inside border.
<table>
summary Content summary of table.
<table>
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us