HTML

The word hypertext markup language comprises the words “hypertext” and “markup language”. The term "hypertext" refers to the linking of text with other documents and “markup language” refers to a language that uses a set of tags. So, HTML is the linking of text with other documents using some set of tags.

HTML

1) HTML is an initialism for "HyperText Markup Language".
2) It is the language of the web.
3) It is used to create websites.
4) It is used to define a page layout, meaning it is a barebone page structure.
5) HTML is used for making pages of the website also called webpages that we see on the internet
6) It consists of a set of tags.
7) This set of tags is interpreted by web browsers.
8) This set of tags is written in HTML Document.
9) It is case-insensitive.
10) ".html" or ".htm" is the extension.
11) There are so many versions of HTML but HTML5 is the latest version.

  1. starter template
    starter template

    NOTE: These are the five must-use tags for HTML <!DOCTYPE html>, <html>, <head>, <title>, <body>

    The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. The current version is 5 i.e. HTML 5.

    The <html> tag is the root of an HTML page.
    The </html> tag is closing of <html> tag. Every HTML page needs at least these 8 lines to define a layout of a page.

    The <head> tag contains page metadata.
    The </head> tag is closing of <head> tag.

    The <title> tag contains the title of a page and is shown in the browser title bar.

    <body> tag is the main tag of HTML. It contains the main body of the page and is shown in the white part of the browser.
    The </body> tag is closing of <body> tag. 
                    
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                    </head>
                    <body>
                        
                    </body>
                    </html>
  2. Heading tags 

                    
                    <h1>
                    //heading content
                    </h1>
            
            

                                            <h2>
                                //heading content
                                </h2>
                            

                                         <h3>
                                //heading content
                                </h3>
                            

                                           <h4>
                                //heading content
                                </h4>
                            

                                               <h5>
            //heading content
            </h5>
        

                                                <h6>
                                        //heading content
                                        </h6>
  3. <p> tag: “defines a paragraph on an HTML page” 
        
        <p>              </p>
  4. <br /> tag: “used to break two lines or paragraph on an HTML page” 
        
        <br />
  5. <hr /> tag: “defines a horizontal line on an HTML page” 
        
        <hr />
  6. <center> tag: “used to put content in the center on an HTML page” 
        
        <center>            </center>
  7. <pre> tag: “used to put the exact code on an HTML page” 
        
        <pre>                    </pre>
  8. <b> tag: “used to make text bold on an HTML page” 
        
        <b>                      </b>
  9. <strong> tag: “used to make text important and bold on an HTML page” 
        
        <strong>          </strong>
  10. <i> tag: “used to represent a change in mood or quality of text on an HTML page” 
        
        <i>              </i>
  11. <em> tag: “used to display emphasized text on an HTML page” 
    
    <em>                    </em>
  12. <u> tag: “used for underline misspelled words on an HTML page” 
        
        <u>                    </u>
  13. <strike> tag: “used to make a thin line through text on an HTML page” 
            
        
            <strike>                </strike>
  14. <sup> tag: “used to display a text above other text with half of its height on an HTML page” 
                
                <sup>                  </sup>
  15. <sub> tag: “used to display a text beneath other text with half of its height on an HTML page” 
                    
                    <sub>               </sub>
  16. <mark> tag: “used to display highlighted text on an HTML page” 
                        
                        <mark>           </mark>
  17. <tt> tag: “used to display each letter with same width on an HTML page” 
                            
                            <tt>         </tt>
  18. <ins> tag: “used to display an inserted text on an HTML page” 
                                
                                <ins>          </ins>
  19. <del> tag: “used to display a deleted text on an HTML page” 
                                    
                                
                                    <del>           </del>
  20. <big> tag: “used to display a larger text on an HTML page” 
                                        
                                        <big>      </big>
  21. <small> tag: “used to display a smaller text on an HTML page” 
                                            
                                            <small>       </small>
  22. <abbr> tag: “used to define abbreviation form of an element” 
                                                
                                                <abbr>         </abbr>
  23. <acronym> tag: “used to define acronym” 
                                                    
                                                    <acronym>   </acronym>
  24. <blockquote> tag: “used to insert long quote on an HTML page” 
                                                        
                                                        <blockquote>   </blockquote>
  25. <q> tag: “used to insert a short quote or to add a double quote on an HTML page” 
                                                            
                                                            <q>    </q>
  26. <cite> tag: “used to provide a reference or defines the title of a creative work on an HTML page” 
                                                            
                                                            <cite>       </cite>
  27. <bdo> tag: “used to override the current direction of text on an HTML page” 
                                                            
                                                            <bdo>        </bdo>
  28. <address> tag: “used to show contact information on an HTML page” 
                                                            
                                      
<address>             </address>
  29. <code> tag: “used to show programming code on an HTML page” 
                                                            
                                                            <code>           </code>
  30. HTML Attributes
    HTML Attributes

    It is used to define the characteristics of an HTML element.
    It is placed in the opening tag of the HTML element.
    All attributes are made up of two parts: Name and Value.

    Name: It is used to set the property for that element.

    Value: It is used to set the value of that property for that element.

    There are three types of HTML attributes:
    1) Core Attributes
    2) Internationalization Attributes
    3) Generic Attributes
  31. HTML Core Attributes
    HTML Core Attributes

    The most widely used attribute is core attributes. There are 4 types of core attributes:

    • Id
    • Class
    • Title
    • Style

    This is the most widely used attribute. The id attribute is used to give a unique id to an HTML element. Each element in HTML with an id attribute has its own unique identity, just as each of us has our own unique identity. Multiple elements can’t share the same id.

    The class attribute is used to specify a class to an HTML element. It is not unique like the id attribute. Multiple elements can share the same class. It is used to associate an element with a stylesheet, JS.

    The id attribute is used to give a title to an HTML element. When the HTML element is loading, a tooltip of the cursor comes and shows the written title.

    The style attribute is used to give styling to an HTML element. It is a property of CSS (Cascading Style Sheet). It is mainly used by the CSS. It is the inline property of an element. In CSS, if we want to style within an HTML element we use the style attribute in inline of an HTML element.
  32. HTML Internationalization Attributes
    HTML Internationalization Attributes

    There are three types of internationalization attributes i.e. dir, lang, xml:lang

    • The dir Attribute
    • The lang Attribute
    • The xml:lang Attribute

    The dir attribute tells the browser in which direction should the text flow. There are two types of dir attributes:
    ltr: Left to right
    rtl: Right to left

    This attribute is replaced by xml:lang attribute. Earlier it was used to indicate the language for the web page.

    Value for the xml:lang should be ISO-639 country code.
  33. HTML Generic Attributes
    HTML Generic Attributes

    Generic attributes include various attributes which are mostly used. Some common generic attributes are:

    • The “align” Attribute
    • The “valign” Attribute
    • The “bgcolor” Attribute
    • The “width” Attribute
    • The “height” Attribute
    • The “src” Attribute
    • The “alt” Attribute

    align attribute uses align name for HTML element and uses left, right, and center values to indicate the text accordingly. It is used for horizontal aligns tags.

    valign attribute uses valign name for HTML element and uses top, middle, and bottom values to indicate the text accordingly. It is used for vertical aligns tags.

    bgcolor attribute uses bgcolor name to HTML element and uses numeric, hexadecimal, RGB code values to change the element's background color accordingly.

    The width attribute uses the width name of the HTML element and uses numeric values to change the element’s width according to the numeric given

    The height attribute uses the height name of the HTML element and uses numeric values to change the element’s height according to the numeric given.

    The src attribute is mostly used by the img element that we’ll be going to discuss later. This src attribute specifies the URL path to that element that is to be displayed. We can choose any of the two paths:
    1. Absolute path: This path contains the path of the external content.
    2. Relative path: This path contains the path of the internal content only. Relative paths are mostly used because content cannot be suddenly removed or changed. These are placed within a separate folder and that path is very well known to us

    The alt attribute is mostly used by the img element. This alt attribute specifies the alternate text to that image that is to be displayed. For some issues, if that image is not visible then alt text helps to tell us about the description of that image.
  34. HTML Links
    HTML Links

    HTML Link uses two attributes

    • href attribute
    • target attribute

    Without this tag, we are unable to go to the next page or the next document. This attribute is compulsorily used by the <a> tag. This attribute contains a URL path.

    The link tag uses another attribute which is the target attribute. By default, if we open any link then the page will be displayed in the current browser window. But if we wish to change these settings then we use the target attribute. It tells us where we want our linked document to be opened.
    This target attribute can use any of the values:
    • _blank: Opens linked document in a new window
    • _top: Opens document in the full body of the window
    • _self: Opens document in the same window
    • _parent: Opens linked document in a parent frame

    To link to a particular section of a webpage:
    • use the name attribute or id attribute
    • use hyperlink with # place where you want to go on a webpage.

    Three types of links are there: active, visited, and unvisited.
    • Active: It is in red with an underline.
    • Visited: It is purple and underlined.
    • Unvisited: It is blue and underlined.
    By CSS we can change the color of the links. 
    
          < href= "Your specified path" >             </a>
  35. HTML Comments
    HTML Comments

    HTML Comments

    • Comments are a piece of code that is ignored by a web browser.
    • Comments help us to understand the code.
    • All programming language has their commenting style.
    • In HTML, we use <!-- content --> tag. Any content placed in these brackets will be treated as a comment.
    • Shortcut Keys are "Ctrl + /" . This will automatically put our selected content as a comment
    • There are two types of comments: Single comments and Multiline comments.


    Single comments 
    
           <!-- Single line Comment -->

    Multi-line comments 
    
        <!--
        This is a multiline comment.
        You can add as many as lines you want.
        -->
  36. HTML Images
    HTML Images

    To represent HTML pages beautifully and to explain content, we use images for that. Our ability to comprehend complex things is aided by visual representations to do that we use images.
    <img> tag uses the height or width attribute to set the height or width of an image. Values for height or width attribute must be in pixel or percentage and value should be placed in double quotes otherwise we can see an error. 

    
          <img src="images/profile_pic" alt="Testing Image" />
  37. HTML Lists
    HTML Lists

    Our day-to-day lives revolve around lists. For example, We purchase items while shopping. A list of all our items is included on the bill we receive from the shopkeeper. Similarly, web developers use lists to display the data.
    HTML lists are used to display the data in an ordered and unordered form. List contains one or more list elements. The HTML list is of three types:

    • An unordered list
    • An ordered list
    • A definition list

    This list will list items using bullets.
    Unordered lists have no sequence.
    They are more like bullet points.
    Setting type attribute: Type attribute used to specify the type of bullet.
    There are three types of bullets:
    • disc
    • square
    • circle

    This list will list items using numbers. We can use different types of numbers like roman numerals etc.
    Ordered lists have a sequence.
    They are a more like numbered list.
    the type attribute is used to specify the type of numbering we want. There are five options:
    1. Uppercase Roman Numerals
    2. Lowercase Roman Numerals
    3. Numerals
    4. Lowercase Letters
    5. Uppercase Letters

    the start attribute is used to specify the starting type of numbering. (start="3")

    This list will arrange list items like a dictionary.
    Definition List is also known as Description List.
    Definition List works the same as a dictionary works.
    Dictionary is used for describing the term similarly in HTML we use a Definition List or Description List to define a term.

    unordered list 
    
          <ul>
          <li>Pen</li>
          </ul>

    ordered list 
    
          <ol>
          <li>Pen</li>
          </ol>

    Definition list 
    
          <dl>
            <dt>//definition term</dt>
            <dd>//describing term</dd>
            </dl>
  38. HTML Tables
    HTML Tables
    • <table> tag is used to define the start of a table.
    • <table> tag also has its corresponding </table> tag.
    • we can arrange our data in rows and columns of a table.
    • <th> tag is used for heading in a table.
    • For rows, <tr> tag is used.
    • For columns, <td> tag is used
    • NOTE: <td> tag also referred to as data cell.

    
          <table>
        <tr>
        <th>Name</th>
        <th>Age</th>
        </tr>
        <tr>
        <td>Harry</td>
        <td>100</td>
        </tr>
        </table>
  39. HTML Block Elements
    HTML Block Elements
    You already know about tags all those tags have some displaying value i.e. Either they are block-level elements or they are Inline elements.
    Now, let's discuss block-level elements.
    Block-level elements are those elements that start in a new line and take the entire width of the screen.
    Block-level Elements:
    • <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
    • <p>
    • <hr>
    • <address>
    • <article>
    • <aside>
    • <blockquote>
    • <canvas>
    • <dd>
    • <div>
    • <dl>
    • <dt>
    • <fieldset>
    • <figcaption>
    • <figure>
    • <footer>
    • <form>
    • <header>
    • <li>
    • <main>
    • <nav>
    • <noscript>
    • <ol>
    • <ul>
    • <pre>
    • <section>
    • <table>
    • <video>

  40. HTML Inline Elements
    HTML Inline Elements
    Inline Elements don't start on a new line. It only takes the width required to cover the content.
    Inline Elements:
    • <a>
    • <abbr>
    • <acronym>
    • <button>
    • <br>
    • <big>
    • <bdo>
    • <b>
    • <cite>
    • <code>
    • <dfn>
    • <i>
    • <em>
    • <img>
    • <input>
    • <kbd>
    • <label>
    • <map>
    • <object>
    • <output>
    • <tt>
    • <time>
    • <samp>
    • <script>
    • <select>
    • <small>
    • <span>
    • <strong>
    • <sub>
    • <sup>
    • <textarea>