1. What are the Types of HTML Markup?
HTML types are informative to study because HTML5 language divides itself into various categories depending upon its usage. Also, every browser deals uniquely with these different HTML types. Therefore, markup is intelligently segmented into the following types based on its behavior regarding HTML5 tags. Below are the types of HTML language which we will discuss in this tutorial.
- Semantic HTML
- Non-Semantic HTML
- Presentational and Deprecated HTML
Moreover, HTML types are also essential to discuss, because some HTML5 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 lack of browser support.
2. Semantic HTML Type
- Firstly, the HTML type that itself conveys some meaning to the browser is known as Semantic HTML.
- Additionally, it tells the browser how it will behave after rendering.
- Also, this semantic HTML type has pre-formatting of its elements.
- Therefore, the communication of the markup with the browser is nicely done.
- Besides, it delivers additional information to the browser to interpret the markup.
- Furthermore, the search engine promptly identifies the semantic HTLM type tags.
- Thus, it 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.
Below 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 links or introduction content regarding the page. |
| <footer> | The footer of a web page uses this tag for 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 the address on the 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> | To display the content on the sidebars we use this tag. |
| <details> | It displays the detail of something on the web page. |
3. Non-Semantic HTML Type
- Unlike Semantic HTML type, non-semantic HTML elements reveal nothing about the content type.
- Hence, these elements are some universal HTML elements.
- Therefore, we can manipulate these elements with CSS styling to produce the required outcomes of any type.
- Thus, it 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 specific 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 padding, margins, or formatting. |
4. 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 help in this regard. 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 than the surrounding text. Its alternative is, font-size: bigger; that we can implement in cascading style sheets(CSS). |
| <small>Some Text<small> | Likewise big element, its use is to display text a bit smaller than the surrounding text. The CSS font-size: smaller; helps to achieve this property. |
| <sub>Some Text<sub> | When there is a need to write some text in a 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 a 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 browser support and 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> | 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> | 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> | In the same vein, it has the same function as a strike. Moreover, text-decoration:line-through; is used for this formatting in CSS. |
| <u>Some Text</u> | This tag underlines the text. Its alternate is text-decoration:underline; for this purpose. |
| <tt>Some Text</tt> | 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> | 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. |
Note:
For checking complete list of the deprecated HTML tags, visit this tutorial.
5. Presentational and Deprecated HTML Attributes
Likewise 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 the same as the "rel" attribute and its use is to specify the relationship between the current document and the 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 the 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. It works for these tags <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 the table inside the border. <table> |
| summary | Content summary of table. <table> |
Note:
For checking complete list of the deprecated HTML attributes, visit this tutorial.