HTML Tags: List of HTML Tags, Its Rules, Nested HTML Elements
HTML Tags behaves like a keyword that contains a Starting or Opening tag, some content, and an ending or Closing tag.
Syntax – <tag> Content (Learn @ EducateBee) </tag>
HTML Tags Rules
- Tags are always written within < > these brackets.
- A tag is opened and you must enclose it.
Note: There are some HTML tags that have no content (such as the <br>, <hr> element). such elements are known as empty elements. Empty elements do not have an end tag.
HTML Heading Tags: (h1 – h6)
HTML language provides six different sizes of heading tags to use. such as <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. <h1> defines the most important heading of the content and <h6> defines the least important heading in content. here, we will understand these heading tags through the below example.
<html>
<body>
<title> EducateBee - HTML Heading Tags List </title>
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> 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>Output Here:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML Paragraphs
HTML paragraph tags can be specified as <p>. Each paragraph has an opening and closing tag.
Syntax: <p> Content </p>
Example:
<!DOCTYPE html>
<html>
<head>
<title> EducateBee - Paragraph Tag </title>
</head>
<body>
<p> Welcome to EducateBee </p>
<p> We are Happy to see you here.......... </p>
</body>
</html>HTML Horizontal Tag (<hr>):
- it defines a thematic break in an HTML page and we use this tag to separate content.
Example:
<!DOCTYPE html>
<html>
<head>
<title> EducateBee - Paragraph Tag </title>
</head>
<body>
<p> Welcome to EducateBee </p>
<hr> <!-- We have used Horizontal Tag here -->
<p> We are Happy to see you here.......... </p>
</body>
</html>HTML Line break Tag:
<br> tag is used to give spacing between the characters. it is called an Empty tag (No opening and closing tags).
Example:
<!DOCTYPE html>
<html>
<head>
<title> EducateBee - Paragraph Tag </title>
</head>
<body>
<p> Welcome to EducateBee <br>
We are happy to see you here.......... </p>
</body>
</html>Output:
Welcome to EducateBee
We are happy to see you here……….
HTML Image Tag:
- It is used to embed an image on a web page.
- <Img> tag has two required attributes:
- src – Defines the path/source to the image.
- alt – Defines an alternate text for the image.
We can also use width, height, and style attributes.
<img src="EducateBee.logo.jpg" alt="EducateBee" width="120"height="150">List of HTML tags
| Html Tag | Description/ Use of |
|---|---|
| <!–…–> | Defines the comment |
| <!DOCTYPE> | Defines the document type |
| <a> | Describes the hyperlink |
| <abbr> | Defines an abbreviation or acronym |
| <acronym> | Defines an acronym. Not supported in HTML5. Use<abbr> instead |
| <address> | Describes the contact information for the author/owner of a document |
| <applet> | Defines an embedded applet. Not supported in HTML5. Use <embed> or <object> instead. |
| <area> | Defines an area inside an image-map |
| <article> | Defines an article |
| <aside> | Describes the content aside from the page content |
| <audio> | Describes the sound content |
| <b> | Describes the bold text |
| <base> | Defines the base URL/target for all relative URLs in a document |
| <basefont> | Specifies a default color, size, and font for all text in a document. Not supported in HTML5. Use CSS instead. |
| <bdi> | Isolates a part of a text which might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Defines big text. Not supported in HTML5. Use CSS instead. |
| <blockquote> | Describes a section that is quoted from another source</td. |
| <body> | Describes the document’s body |
| <br> | Describes a single line break |
| <button> | Describes a clickable button |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Describes a table caption |
| <center> | Describes centered text. Not supported in HTML5. Use CSS instead. |
| <cite> | Describes the title of a work |
| <code> | Describes a piece of computer code |
| <col> | defines column properties for each column within an element |
| <colgroup> | defines a group of one or more columns in a table for formatting |
| <data> | It Links the given content with a machine-readable translation |
| <datalist> | defines a list of pre-defined options for input controls |
| <dd> | Defines a description/value of a term in a description list |
| <del> | Defines text that has been deleted from a document |
| <details> | Describes additional details that the user can view or hide |
| <dfn> | It represents a defining instance of a term |
| <dialog> | Describes a dialog box or window |
| <dir> | Describes the directory list. Not supported in HTML5. Use instead. |
| <div> | Describes a section in a document |
| <dl> | Defines a description list |
| <dt> | Describes a term/name in a description list |
| <em> | Describes the emphasized text |
| <embed> | Describes a container for an external (non-HTML) application |
| <fieldset> | Defines the group’s related elements in a form |
| <figcaption> | Describes a caption for an element |
| <figure> | defines self-contained content |
| <font> | Describes font, color, and size for text. Not supported in HTML5. Use CSS instead. |
| <footer> | Describes a footer for a document or section |
| <form> | Describes an HTML form for user input |
| <frame> | Describes a window (a frame) in a frameset.Not supported in HTML5. |
| <frameset> | specifies a set of frames |
| <h1> – <h6> | Describes HTML headings |
| <head> | Describes information about the document |
| <header> | Describes a header for a document or section |
| <hr> | Describes a thematic change in the content |
| <html> | Describes the root of an HTML document |
| <i> | Describes a part of text in an alternate voice or mood |
| <iframe> | describes the name of the element |
| <img> | Describes an inline frame |
| <input> | Describes an image |
| <ins> | Describes an input control |
| <kbd> | Describes a text that has been inserted into a document |
| <label> | Describes keyboard input |
| <legend> | Describes a label for an element |
| <li> | Describes a list item |
| <link> | Describes the relationship between a document and an external resource |
| <main> | defines the main content of a document |
| <map> | Describes a client-side image-map |
| <mark> | Defines marked/highlighted text |
| <meta> | Defines metadata about an HTML document |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <noframes> | Defines an alternate content for users that do not support frames.Not supported in HTML5. |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <object> | Defines an embedded object |
| <ol> | Defines an ordered list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <output> | Defines the result of a calculation |
| <p> | Defines a paragraph |
| <param> | Defines a parameter for an object |
| <picture> | Defines a container for multiple image resources |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters |
| <ruby> | Defines a ruby annotation |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <script> | Defines a client-side script |
| <section> | Defines a section in a document |
| <select> | Defines a drop-down list |
| <small> | Defines smaller text |
| <source> | Defines multiple media resources for media elements |
| <span> | Defines teletype text. Not supported in HTML5. Use CSS instead. |
| <strike> | Defines strikethrough text |
| <strong> | Defines important text |
| <style> | Defines style information for a document |
| <sub> | Defines subscripted text |
| <summary> | Defines a visible heading for an element |
| <sup> | Defines superscripted text |
| <svg> | Defines a container for SVG graphics |
| <table> | Defines a table |
| <tbody> | Groups the body content in a table |
| <td> | Defines a cell in a table |
| <template> | Defines a template |
| <textarea> | Defines a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Defines a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | Defines a date/time |
| <title> | Defines a title for the document |
| <tr> | Defines a row in a table |
| <track> | Defines text tracks for media elements |
| <tt> | Defines teletype text |
| <u> | Defines text that should be stylistically different from normal text |
| <ul> | Defines an unordered list |
| <var> | Defines a variable |
| <video> | Defines a video or movie |
| <wbr> | Defines a possible line-break |
Questions Related this:
Can we specify the size for any heading?
Yes, You can specify the size for any heading. for this, you will use style attribute, using the CSS font-size property.
Do we need use of <br> tag before and after a heading for some white space?
We don’t need to do this. because, a Browser automatically adds some white space before and after a heading.
HTML Comment Tags