HTML tags

Website to store all the HTML tags I have learned so far.

Download as .zip Download as .tar.gz View on GitHub
HTML Playbook

HTML playbook

  1. <h1> - <h6> : Heading Tags

    Example:

    This is a heading of level 1

    This is a heading of level 2

    This is a heading of level 3

    This is a heading of level 4

    This is a heading of level 5
    This is a heading of level 6

    • Heading tag is used to create headings of different levels.
    • There are 6 heading tags from <h1> to <h6>.
    • <h1> is the largest heading tag, and <h6> is the smallest heading tag.

  2. <br> : line break tag

    Example:

    This is a paragraph.
    This is another line in the same paragraph.


    • <br> is the line break tag which basically works like the enter key in out keyboard.

  3. <hr> : horizontal rule tag

    Example:
    • Tag Omission: True
    • Attributes : align, color, noshade, size, width.

    • <hr> the horizontal tag is used to create a horizontal line in our website.

  4. <center> : center tag

    Example:

    This is a heading

    This is a paragraph

    • Tag Omission: None

    • This is a deprecated tag. So, it is not recommended to use it.
    • <center> is used to center align the content inside it.

  5. <!-- --> : comment tag

    Example: 
        <!-- This is a comment -->
    • Tag Omission: True

    • <!-- --> is used to add comments in our HTML code. These comments are not visible to the user.

  6. <!DOCTYPE html>

    Example: 
        <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>
    • Tag Omission: None

    • <!DOCTYPE html> is used to declare that the document is an HTML5 document.
    • It is not an HTML tag. It is an instruction to the web browser about what version of HTML the page is written in.

  7. <html> : HTML tag

    Example: 
        <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>
    • Tag Omission: None
    • Attributes : lang, manifest, version, xmlns

    • <html> is the root element of an HTML document. It is used to enclose all the HTML elements in a web page.
    • The <html> element is a container for all the other HTML elements.

  8. <head> : head tag

    Example: 
        <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>
    • Tag Omission: None
    • Attributes : profile

    • <head> is used to provide information about the document.
    • The <head> element contains meta information, like page title, scripts, styles, links, etc.

  9. <meta> : meta tag

    Example: 
        <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="description" content="Free Web tutorials">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="John Doe">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>
    • Tag Omission: True
    • Attributes : charset, content, http-equiv, name

    • <meta> is used to provide metadata about the HTML document.
    • Metadata will not be displayed on the page, but will be machine parsable.
    • Metadata typically define the document title, character set, styles, scripts, and other meta information.

    charset attribute

    Example: 
        <meta charset="UTF-8">
    • The charset attribute specifies the character encoding for the HTML document.
    • The charset attribute is used together with the <meta> tag to declare a character set for the HTML document.
    • The charset attribute is required if the character encoding is not UTF-8.

    content attribute

    Example: 
        <meta name="description" content="Free Web tutorials">
    • The content attribute specifies the value associated with the http- equiv or name attribute.
    • The content attribute is used together with the <meta> tag to declare metadata for the HTML document.

    http-equiv attribute

    Example: 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    • The http-equiv attribute provides an HTTP header for the information /value of the content attribute.
    • The http-equiv attribute is used together with the <meta> tag to declare metadata for the HTML document.

    name attribute

    Example: 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • The name attribute specifies a name for the metadata.
    • The name attribute is used together with the <meta> tag to declare metadata for the HTML document.

  10. <title> : title tag

    Example: 
        <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>

    • <title> is used to specify a title for the document.
    • The <title> element is required in all HTML documents and should be the first element in the <head> element.
    • The <title> element defines the title in the browser toolbar, the title in the page's tab, and the title that is displayed in search engine results.

  11. <body> : body tag

    Example: 
        <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>
    • Tag Omission: None
    • Attributes : alink, background, bgcolor, bottommargin, leftmargin, link, onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onredo, onresize, onstorage, onundo, onunload, rightmargin, text, topmargin, vlink

    • <body> is used to define the document's body.
    • The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
    • The <body> element is a container for all the visible contents such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
    • The <body> element is a required element in an HTML document.

  12. <p> : paragraph tag

    Example: 
        <p>This is a paragraph.</p>

    • <p> is used to define a paragraph.
    • The <p> element is used to group related content in a document.
    • The <p> element is used to define a block of text.

  13. <em> : emphasis tag

    Example: 
        <p>I am <em>emphasized</em> text.</p>

    • <em> is used to define emphasized text.
    • The <em> element is used to define emphasized text with no special importance.
    • The <em> tag is a phrase tag. It renders as emphasized text.

    <em> vs <i>

    • The <em> tag is a phrase tag. It renders as emphasized text.
    • The <i> tag is a phrase tag. It renders as italic text.
    • The <em> tag is more semantic than the <i> tag.
    • The <em> tag is used to define text with stress emphasis.
    • The <i> tag is used to define a part of text in an alternate voice or mood.

  14. <strong> : strong tag

    Example: 
        <p>I am <strong>strong</strong> text.</p>

    • <strong> is used to define important text.
    • The <strong> element is used to define important text.
    • The <strong> tag is a phrase tag. It renders as bold text.

    <strong> vs <b>

    • The <strong> tag is a phrase tag. It renders as bold text.
    • The <b> tag is a phrase tag. It renders as bold text.
    • The <strong> tag is more semantic than the <b> tag.
    • The <strong> tag is used to define text with strong importance.
    • The <b> tag is used to define bold text without any extra importance.

  15. <ul> : unordered list tag

    Example: 
        <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    • Tag Omission: None
    • Attributes : compact, type,

    • <ul> is used to define an unordered list.
    • The <ul> element is used to define an unordered list (a list that does not have a number next to each item).
    • The <ul> element is used to group a set of unordered list items.
    • The <ul> element is used to define a list of items in no particular order.

  16. <ol> : ordered list tag

    Example: 
        <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
    • Tag Omission: None
    • Attributes : compact, reversed, start, type

    • <ol> is used to define an ordered list.
    • The <ol> element is used to define an ordered list (a list that has a number next to each item).
    • The <ol> element is used to group a set of ordered list items.
    • The <ol> element is used to define a list of items in a specific order.

  17. <li> : list item tag

    Example: 
        <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    • Tag Omission: None
    • Attributes : value, type

    • <li> is used to define a list item.

  18. <img> : image tag

    Example: 
        <img src="image.jpg" alt="image">
    • Tag Omission: True
    • Attributes : alt, crossorigin, decoding, fetchpriority, height, ismap, loading, referrerpolicy, sizes, src, srcset, usemap, width, align, border, hspace, longdesc, name, vspace

    • <img> is used to define an image.
    • The <img> element is used to embed an image in an HTML page.
    • The <img> tag is empty, it contains attributes only, and does not have a closing tag.
    • The <img> tag has two required attributes: src and alt.

  19. <a> : anchor tag

    Example: 
        <a href="https://www.google.com">Google</a>
    • Tag Omission: False
    • Attributes : download, href, hreflang, ping, referrerpolicy, rel, target, type, charset, coords, name, rev, shape

    • <a> is used to define a hyperlink.
    • The <a> element is used to define a hyperlink, which is used to link from one page to another.
    • The <a> tag is used to create a link to another document.

  20. <table> : table tag

    Example: 
        <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>50</td>
      </tr>
    </table>
    • Tag Omission: None
    • Attributes : align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width

    • The <table> element is used to define an HTML table.
    • The <table> element is used to add tables to a web page.

  21. <tr> : table row tag

    Example: 
        <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>50</td>
      </tr>
    </table>
    • Tag Omission: None
    • Attributes : align, bgcolor, char, charoff, valign

    • The <tr> element is used to define a row in an HTML table.

  22. <td> : table data tag

    Example: 
        <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>50</td>
      </tr>
    </table>
    • Tag Omission: None
    • Attributes : align, bgcolor, char, charoff, colspan, headers, rowspan, scope, valign

    • The <td> element is used to define a cell in an HTML table.

  23. <theader> : table header tag

    Example: 
        <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>50</td>
        </tr>
      </tbody>
    </table>
    • Tag Omission: None
    • Attributes : align, bgcolor, char, charoff, valign

    • The <thead> element is used to group the header content in an HTML table.

  24. <th> : table header tag

    Example: 
        <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>50</td>
      </tr>
    </table>
    • Tag Omission: None
    • Attributes : align, bgcolor, char, charoff, colspan, headers, height, rowspan, scope, valign, width

    • The <th> element is used to define a header cell in an HTML table.

  25. <tbody> : table body tag

    Example: 
        <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>50</td>
        </tr>
      </tbody>
    </table>
    • Tag Omission: None
    • Attributes : align, bgcolor, char, charoff, valign

    • The <tbody> element is used to group the body content in an HTML table.

  26. <form> : form tag

    Example: 
        <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
      <input type="submit" value="Submit" />
    </form>
    • Tag Omission: None
    • Attributes : accept, accept-charset, action, autocomplete, enctype, method, name, novalidate, target

    • The <form> element is used to create an HTML form for user input.
    • The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
    • The <form> element is used together with the <input> element to create interactive forms that allow users to input data.

  27. <label> : label tag

    Example: 
        <form action="demo_form.asp" method="get">
      <label>First Name:</label>
      <input type="text" name="fname" /><br />
    </form>
    • Tag Omission: None
    • Attributes : for, form, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate

    • The <label> element defines a label for many form elements.
    • The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
    • The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - when the user clicks on the text within the <label> element, it toggles the radio button/checkbox.

  28. <input> : input tag

    Example: 
        <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
      <input type="submit" value="Submit" />
    </form>
    • Tag Omission: True
    • Attributes : accept, alt, autocomplete, autofocus, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width

    • The <input> element is the most important form element.
    • The <input> element is used to create interactive controls for web-based forms in order to accept data from the user.
    • The <input> element can be displayed in many ways, depending on the type attribute.

    • To See all the types of of <input> click here.

  29. <div> : div tag

    Example: 
        <div>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
    </div>
    • Tag Omission: None
    • Attributes : align, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate

    • The <div> element is the generic container for flow content.
    • It has no effect on the content or layout until styled using CSS.
    • The <div> element is often used as a container for other HTML elements to style them with CSS (with the help of class or id attributes).

  30. <span> : span tag

    Example: 
        <span>This is a span</span>
    • Tag Omission: None
    • Attributes : class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate

    • The <span> element is an inline container used to mark up a part of a text, or a part of a document.
    • The <span> element does not introduce any new line or breaks in the content (like the <p> element does).
    • The <span> element is useful for:
      • Grouping inline-elements to format them with CSS
      • Controlling the behavior of content (using the contenteditable attribute)
      • Controlling the behavior of content (using the contenteditable attribute)