Elements

HTML

  • HTML is the standard markup language for creating web pages.
  • HTML stands for Hyper Text Markup Language.
  • HTML describes the structure of a web page.
  • HTML consists of a series of elements.
  • HTML elements tell the browser how to display the content.
  • HTML elements are represented by tags.
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.
  • Browsers do not display the HTML tags, but use them to render the content of the page.

Tag

In information systems, a tag is a keyword or term assigned to a piece of information. This kind of metadata helps describe an item and allows it to be found again by browsing or searching.

Basic Tags of HTML

  • HTML tags are element

    Basic Tags of HTML

    • HTML tags are element names surrounded by angle brackets:
    • HTML tags normally come in pairs like <p> and </p>
    • The first tag in a pair is the start tag, the second tag is the end tag
    • The end tag is written like the start tag, but with a forward slash inserted before the tag name
    • The <!DOCTYPE html> declaration defines this document to be HTML5
    • The <html> element is the root element of an HTML page
    • The <head> element contains meta information about the document
    • The <title> element specifies a title for the document
    • The <body> element contains the visible page content
    • The <h1> element defines a large heading
    • The <p> element defines a paragraph

    Who invented HTML language?

    In 1991 Tim Berners-Lee invented HTML.

    HTML text Editors

    • An HTML file is a text file, so to create an HTML file we can use any text editors.
    • Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor.
    • There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
    • After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim,VSCode etc.

HTML Page Structure

<html> tag is the root element of an HTML page, which contains head and body elements.
Head element contains meta information about the document like title, style, and scripts.
Body element contains the visible page content like text, images, videos, etc.

HTML Tags

HTML tags are like keywords which define that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content, and closing tag. But some HTML tags are unclosed tags.
An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.
All HTML tags must be enclosed within <> these brackets.
Every tag in HTML performs different tasks.
If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

HTML tags are used to create web pages and define the structure, content, and presentation of the web pages. Here is a brief description of each tag you have mentioned: <!-...->: It is a comment tag that is used to write comments in the HTML code. The comments are not displayed on the webpage.

  1. <!DOCTYPE >: It specifies the version of HTML that is being used in the document..
  2. <code >: It is used to indicate computer code or programming language..
  3. <col >: It is used to define a single column within a table..
  4. <style >: It is used to define the style of the HTML elements..
  5. <sub >: It is used to display the text in subscript, which is usually smaller and below the baseline..
  6. <a >: It is used to create a hyperlink that can be clicked to navigate to another webpage or to a different location on the same webpage..
  7. <summary >: It is used to define a summary or caption for the content of a webpage..
  8. <frameset >: It is used to divide a webpage into multiple frames..
  9. <object >: It is used to embed multimedia content, such as videos or audio, into a webpage..
  10. <h1 > to
  11. <h6 >: They are used to create headings of different sizes and levels..
  12. <ol >: It is used to create an ordered list of items..
  13. <head >: It is used to define the header section of a webpage, which includes the title, meta tags, and links to external files..
  14. <optgroup >: It is used to group related options within a drop-down list..
  15. <header >: It is used to define the header section of a webpage, which typically includes the logo and navigation links..
  16. <option >: It is used to define an option within a drop-down list..
  17. <hr >: It is used to create a horizontal line that separates content on a webpage..
  18. <output >: It is used to display the result of a calculation or user action on a webpage..
  19. <html >: It is the root element of an HTML document..
  20. <abbr >: It is used to indicate an abbreviated form of a word or phrase..
  21. <sup >: It is used to display the text in superscript, which is usually smaller and above the baseline..
  22. <colgroup >: It is used to define a group of columns within a table..
  23. <data >: It is used to define a value that can be used for calculations or other purposes..
  24. <acronym >: It is used to indicate an acronym or abbreviation.
  25. <address >: It is used to display the contact information for the author or owner of a webpage..
  26. <svg >: It is used to display vector graphics on a webpage..
  27. <table >: It is used to create a table on a webpage..
  28. <tbody >: It is used to group the body content of a table..
  29. <datalist >: It is used to create a list of predefined options for an input field..
  30. <p >: It is used to define a paragraph of text..
  31. <applet >: It is used to embed Java applets into a webpage..
  32. <dd >: It is used to define a description for an item within a definition list..
  33. <i >: It is used to indicate a phrase in italicized text..
  34. <td >: It is used to define a cell within a table..
  35. <param >: It is used to pass parameters to an embedded object.
  36. <pre >: This tag is used to preserve white spaces and line breaks. It is commonly used for displaying code snippets or text that needs to be formatted in a specific way..
  37. <progress >: This tag is used to represent the progress of a task. It can be used to show a progress bar or other visual indicators of progress..
  38. <template >: This tag is used to define reusable content that can be used throughout a web page. It is commonly used for creating templates for dynamic content..
  39. <textarea >: This tag is used to create a text input field where users can input multiple lines of text..
  40. <q >: This tag is used to define a short quotation. The text inside the tag is displayed with quotation marks around it..
  41. <tfoot >: This tag is used to define a table footer. It is used to display summary information about the table..
  42. <th >: This tag is used to define a table header cell. It is used to label the contents of a table cell..
  43. <rp >: This tag is used to define what to display if a browser does not support ruby annotations. It is commonly used in Asian typography..
  44. <cite >: It is used to indicate the title of a work, such as a book or a movie.
  45. <rt >: This tag is used to define the pronunciation of a ruby annotation. It is commonly used in Asian typography..
  46. <thead >: This tag is used to define a table header. It is used to group the header content in a table..
  47. <ruby >: This tag is used to define ruby annotations. It is commonly used in Asian typography..
  48. <time >: This tag is used to define a date or time. It can be used to display dates or times in a specific format..
  49. <S >: This tag is used to define strikethrough text. The text inside the tag is displayed with a line through it..
  50. <title >: This tag is used to define the title of a web page. It is displayed in the browser 's title bar..
  51. <area >: This tag is used to define an area within an image map. It is used to create clickable areas within an image..
  52. <del >: This tag is used to define deleted text. The text inside the tag is displayed with a line through it..
  53. <iframe >: This tag is used to embed another web page or content within a web page. It is commonly used for displaying videos or other media..
  54. <article >: This tag is used to define an article or section of content within a web page. It is used to group related content together..
  55. <details >: This tag is used to create a collapsible section of content. It is used to hide content that is not immediately relevant..
  56. <img >: This tag is used to display an image on a web page. It can be used to display images of various formats..
  57. <aside >: This tag is used to define a section of content that is related to the main content of the web page, but not essential to it..
  58. <dfn >: This tag is used to define a term. It is commonly used in glossaries or dictionaries..
  59. <input >: This tag is used to create a form input field. It can be used to create various types of input fields such as text fields, checkboxes, radio buttons, and more..
  60. <audio >: This tag is used to embed an audio file within a web page. It is commonly used for playing music or other audio content..
  61. <dialog >: This tag is used to create a dialog box or popup window. It can be used for displaying important information or for getting user input
  62. <ins >: This tag is used to indicate text that has been inserted into a document..
  63. <kbd >: This tag is used to define keyboard input, and it is often used to display shortcuts and commands..
  64. <b >: This tag is used to make text bold..
  65. <dir >: This tag is used to define a directory list..
  66. <base >: This tag is used to specify a default URL and a default target for all links on a page..
  67. <div >: This tag is used to create a container for other HTML elements..
  68. <label >: This tag is used to associate a label with a form control..
  69. <basefont >: This tag is used to specify the base font size, color, and face for a page..
  70. <dl >: This tag is used to define a description list..
  71. <legend >: This tag is used to define a caption for a fieldset element..
  72. <bdi >: This tag is used to define text that should be isolated from its surrounding text in order to be formatted in a different direction..
  73. <dt >: This tag is used to define a term in a description list..
  74. <li >: This tag is used to define a list item..
  75. <bdo >: This tag is used to override the default direction of text..
  76. <em >: This tag is used to make text emphasized..
  77. <link >: This tag is used to link to an external resource, such as a stylesheet or a script..
  78. <big >: This tag is used to make text larger..
  79. <embed >: This tag is used to embed multimedia content, such as audio or video..
  80. <main >: This tag is used to indicate the main content of a page..
  81. <blockquote >: This tag is used to indicate a long quotation..
  82. <fieldset >: This tag is used to group related form controls..
  83. <map >: This tag is used to define an image map..
  84. <body >: This tag is used to define the body of an HTML document..
  85. <figcaption >: This tag is used to define a caption for a figure element..
  86. <mark >: This tag is used to highlight text..
  87. <br >: This tag is used to insert a line break..
  88. <figure >: This tag is used to group related content, such as images and captions..
  89. <meta >: This tag is used to specify metadata for a document, such as keywords and description..
  90. <small >: This tag is used to make text smaller..
  91. <button >: This tag is used to define a clickable button..
  92. <font >: This tag is used to define font size, color, and face..
  93. <meter >: This tag is used to define a scalar measurement within a known range..
  94. <canvas >: This tag is used to draw graphics and animations on a web page..
  95. <footer >: This tag is used to define the footer of a document or a section..
  96. <nav >: This tag is used to define a section of navigation links..
  97. <caption >: This tag is used to define a caption for a table..
  98. <form >: This tag is used to define a form..
  99. <noframes >: This tag is used to define content that should be displayed if a browser does not support frames..
  100. <noscript >: This tag is used to define content that should be displayed if a browser does not support scripting..
  101. <center >: This tag is used to center text or other content..
  102. <frame >: This tag is used to define a frame within a frameset..
  103. <tr >: This tag is used to define a table row..
  104. <samp >: This tag is used to define sample output from a computer program..
  105. <script >: This tag is used to define client-side scripts, such as JavaScript.
  106. <section >: It represents a section of a document, usually with a heading. It is used to group related content together and can be used for outlining purposes..
  107. <track >: It is used to provide timed text tracks, such as captions or subtitles, for media elements like video and audio..
  108. <tt >: It is used to indicate text that should be rendered in a monospace font like a typewriter. It was commonly used in the past to display code snippets, but it is now recommended to use the.
  109. <code > tag instead..
  110. <select >: It is used to create a dropdown list of options for users to choose from. It can be used for a variety of purposes, such as selecting a date or choosing a product from a list..
  111. <u >: It is used to underline text, but it is generally not recommended for styling purposes because it can be difficult to distinguish from hyperlinks..
  112. <ul >: It is used to create an unordered list of items, typically with bullet points. Each item is enclosed in a.
  113. <li > tag.
  114. <source >: It is used to specify the source of media content like video or audio. Multiple source tags can be used within a single media element to provide different formats or quality levels for different devices..
  115. <var >: It is used to indicate a variable in a computer program or a mathematical equation. It can also be used to indicate a placeholder or a variable term in a natural language text..
  116. <video >: It is used to embed video content in a web page. It supports a wide range of video formats and provides various playback controls and options..
  117. <span >: It is used to group inline elements together and apply styles to them. It can also be used for scripting purposes..
  118. <strike >: It is used to indicate text that has been struck through, usually to indicate that it has been deleted or is no longer valid. However, it is now recommended to use the.
  119. <del > tag instead..
  120. <wbr >: It is used to indicate a word break opportunity, which allows a long word to be broken into multiple lines if necessary. It is particularly useful for languages that do not use spaces between words..
  121. <strong >: It is used to indicate strong emphasis on text, typically by making it bold. However, it should not be used solely for visual formatting and should have semantic meaning in the context of the content.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading

Example:

  
<!DOCTYPE html>
<html>
<body>
<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

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 paragraphs are defined with the

<p>
tag.

Example:

<!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

HTML Elements:
  • An HTML element is defined by a start tag, some content, and an end tag.
  • Examples of some HTML elements:
    • <h1>
      My First Heading
      </h1>
    • <p>
      My first paragraph.
      </p>

Nested HTML Elements:

<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Empty HTML Elements:

  • HTML elements with no content are called empty elements.
  • The <br> tag defines a line break, and is an empty element without a closing tag.

Example:

<p>This is a <br> paragraph with a line break.</p>

HTML Attributes:

  • HTML attributes provide additional information about HTML elements.
  • Attributes are defined in the start tag.
  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

Syntax:

<element attribute_name="value">content</element>

1. href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.

Example:


                        <!DOCTYPE html>
                        <html>
                        <body>
                        <h2>The href Attribute </h2>
                        <p>HTML links are defined with the a tag.
                        The link address is specified in the href attribute:>
                        </body>
                        </html>

2. The src Attribute

The sre attribute is one of the important and required attributes of <img> element for the image which is required to display on the browser.

Example:


                        

                        <!DOCTYPE html>
                        <html> <head>
                        </head>
                        <body>
                        <h1>Example of src attribute</h1>
                        <p>HTML images can be displayed with the help of the
                        image tag and its attribute src gives
                        the source for that image</p>
                        <img src="https://github.io/
                        </body>
                        </html>

3. style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more. <p style="color:red;">This is a red paragraph.</p>

Example:


                     
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color:red;">
This is a red paragraph.</p>
</body>
</html>