Table of Contents

    HTML Tags Explained: Essential Elements for Web Development

    Rumman Ansari July 05, 2024 9,982 views
    HTML Tags Explained: Essential Elements for Web Development

    There are lots of tags and they are all in pairs; there are opening tags and closing tags . The closing tag is always slightly different from the opening tag in that it has a forward slash after the first angled bracket:

    A pair of tags and the content these include are known as an element . In Figure below, you can see the heading tag

    tags in html

    Opening Tag: The opening tag says This is the beginning of a heading

    Closing Tag: The closing tag says This is the end of a heading.

    Text Inside: The text inside the angled brackets explains the purpose of the tag — here h1 indicates that it is a level 1 heading (or top - level heading)

    Title Tag

    The <head> element: Often referred to as the head of the page, this contains information about the page (this is not the main content of the page). For example, it might contain a title and a description of the page, or instructions on where a browser can find CSS rules that explain how the document should look. It consists of the opening <head> tag, the closing </head> tag, and everything in between.

    The <title> element is a required HTML element used to assign a title to an HTML document. Page titles are not display the browser window, but they are used as the page name by search engines and displayed by browsers in the title page tab, and as the page name of bookmarked webpages.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>This is Title</title>
</head>
<body>

</body>
</html>

    The <body> element: Often referred to as the body of the page, this contains the information you actually see in the main browser window. It consists of the opening <body> tag, closing </body> tag, and everything in between.

    Output Preview in internet explorer

    tags in html

    Heading Tags

    HTML has six levels of headings, which are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> describes the most important heading and <h6> describes the least important headings.

    Search Engines(like google) use the headings to index the structure and content of your web pages. Users skim your pages by their headings. It is important to use headings to show the document structure.

    headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>List of Heading</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2 id="article-heading-3">This is heading 2</h2>
<h3 id="article-heading-4">This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

    Live Preview

    Paragraph Tag

    <p> element describes a paragraph into whole document. Content of the each paragraph will be placed between opening tag <p> and closing tag </p>.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Paragraph</title>
</head>
<body>
<p>Content of the first paragraph will be placed here.</p>
<p>Content of the second paragraph will be placed here.</p>
<p>Content of the third paragraph will be placed here.</p>
</body>
</html>

    Live Preview

    Button Tag

    <button> element is used to create an HTML button. Any text appearing between the opening tag (<button>) and closing tag (</button>) appear as text on the button. No action takes place by default when a button is clicked. Actions must be added to be using JavaScript or by associating the button with a form.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Button</title>
</head>
<body>
<button>I am the Button</button>
<p>No action takes place if you click on this button.</p>
</body>
</html>

    Live Preview

    Bold Tag

    <b> element is used to differenciate words from the surrounding text by styling the text in bold. Another way bold text is described as a important part of the whole text. The text which you want to bold must be written between <b> and </b>.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Bold Text</title>
</head>
<body>
<p>In our solar system <b>Jupiter is the largest Planet</b> but <b>Earth is most important</b> for us. </p>
</body>
</html>

    Live Preview

    Italic Tag

    The <i> element is used to differentiate words from the surrounding text by styling the text in italic. Italic text must be written between <italic> and </italic>

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Italic Text</title>
</head>
<body>
<p>Moon is the only <i>Natural Satelite</i> of Earth.</p>
</body>
</html>

    Live Preview

    Line Break Tag

    The <br> element is used to insert a line break in the document. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Line Break</title>
</head>
<body>
 <p>Address:</p>
 <p>New Town <br>Kolkata <br>West Bengal <br> India</p>
</body>
</html>

    Live Preview

    Horizontal Lines Tag

    The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

    Example

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Horizontal Lines</title>
</head>
<body>
<p>Hey,It's upper part. </p>
<hr>
<p>and It's lower part. </p>
</body>
</html>

    Live Preview

    iframe Tag

    The <iframe> creates an inline frame, which embeds an independent HTML document into the current document. Content will be placed within opening tag (<iframe>) as a attribute and do not forgot to write closing tag ().

    
<!DOCTYPE html>
<html>
<head>
<title>Example of iframe</title>
</head>
<body>
<iframe src=""></iframe>
</body>
</html>

    Live Preview

    Image Tag

    The <img> tag is used to insert an image into the document. This tag is also an example of an empty element, where you do not need opening and closing tags

    
<!DOCTYPE html>
<html>
<head>
<title>Example of Image</title>
</head>
<body>
<img src="/library/subject-thumbnail-images/html.PNG">
</body>
</html>

    Live Preview

    Important tags

    Tags Short description
    THE ROOT ELEMENT
    <html> Main container
    DOCUMENT METADATA
    <head> The document's header
    <title> The document's title
    <base> Base URI to solve relative URIs
    <link> Relational information for documents
    <meta> Variable for the document
    <style> Presentational attributes
    SECTIONS
    <body> The document's body
    <article> Distributable content
    <section> Defines a section
    <nav> Navigational section
    <aside> Content only slightly related
    <h1> A level 1 heading
    <h2> A level 2 heading
    <h3> A level 3 heading
    <h4> A level 4 heading
    <h5> A level 5 heading
    <h6> A level 6 heading
    <hgroup> Groups consecutive headings
    <header> The header of a section
    <footer> The footer of a section
    <address> Author’s contact information
    GROUPING CONTENT
    <p> Paragraph
    <hr> Content separator
    <pre> Preformatted text block
    <blockquote> Block level quotation
    <ol> Ordered list
    <ul> Unordered list
    <li> List item
    <dl> Description list
    <dt> Term in a description list
    <dd> Description in a description list
    <figure> Self-contained information
    <figcaption> Caption for a figure
    <main> Main content of a section
    <div> Generic container for blocks of text
    TEXT-LEVEL SEMANTICS
    <a> Hyperlink
    <em> Text with emphasis
    <strong> Text with strong emphasis
    <small> Side commment
    <s> Content no longer accurate or relevant
    <cite> Citation or reference
    <q> Inline quotation
    <dfn> Term defined in the surrounding text
    <abbr> Abbreviated term
    <ruby> Ruby annotated text
    <rt> Ruby annotation
    <rp> Text to be ignored in ruby
    <data> Machine-readable information
    <time> Date and/or time
    <code> Computer code
    <var> Instance of a variable
    <samp> A program’s sample output
    <kbd> Text entered by users
    <sub> Tex to en subíndice
    <sup> Texto en superíndice
    <i> Text offset from the normal prose
    <b> Text offset from its surrounding content
    <u> Non-textual annotations
    <mark> Marks text in another document
    <bdi> Isolates text for bidirectional formatting
    <bdo> Overrides the bidirectional algorithm
    <span> Generic container for runs of text
    <br> Line break
    <wbr> Line break opportunity
    EDITS
    <ins> Added text
    <del> Deleted text
    EMBEDDED CONTENT
    <picture> Multi-source image
    <img> Image
    <iframe> Nested browsing context
    <embed> Inserts external applications
    <object> Inserts external applications
    <param> Parameter for an external application
    <video> Video
    <audio> Audio
    <source> Alternative media resource
    <track> Text tracks for videos
    <map> Client-side image map
    <area> Sector in an image map
    TABULAR DATA
    <table> Table
    <caption> The caption of a table
    <colgroup> Group of columns
    <col> Sets attributes for columns
    <tbody> The body of the table
    <thead> The header of the table
    <tfoot> The footer of the table
    <tr> Row
    <td> Regular cell
    <th> Header cell
    FORMS
    <form> Form
    <label> Label for a control
    <input> Input control
    <button> Button
    <select> List of options
    <datalist> Suggestions for controls
    <optgroup> Group of options in a list
    <option> An option in list
    <textarea> Multi-line text input
    <keygen> Key pair generation control
    <output> The output of a process
    <progress> A task’s completion progress
    <meter> A measurement
    <fieldset> Group of controls
    <legend> The caption of a group of controls
    INTERACTIVE ELEMENTS
    <details> Collapsable content
    <summary> A summary for collapsable content
    <menu> Menu
    <menuitem> An item in a menu
    <dialog> Dialog box
    SCRIPTING
    <script> Embeds scripts
    <noscript> Alternative content for scripts
    <template> Plantilla para información a agregar
    <canvas> Container for dynamic bitmap graphics

    Related Questions

    Question 1
    What are tags?
    Question 2
    what is semantic tag in html?
    Question 3
    What are the new FORM elements which are available in HTML5?
    Question 4
    What is the use of Canvas element?
    Question 5
    What is
    in HTML5?
    Question 6
    Name two new tags included in the HTML 5
    Question 7
    Are br tags the only way to separate sections of text?
    Question 8
    How do you create text on a webpage that will allow you to send an email when clicked?
    Question 9
    What is a marquee?
    Question 10
    What will happen if you overlap sets of tags?
    Question 11
    How do you create links to sections within the same page?
    Question 12
    Do all HTML tags come in a pair?
    Question 13
    What distinguishes the usage of
    and elements in HTML?

    Related Assignments

    Assignment 1
    How to use heading tag in HTML?