HTML language

We given a information and tutorial of HTML language to help you for learning the web development. So, Read the information carefully and watch the tutorial to better understand for getting a skill and knowledge about the html language.


HTML (Hypertext markup language)

HTML is the standard language which is used to add structure like content, images, inputs, button and many more. HTML includes the elements that defines the structure in the form of tags (< >). Tags are used to add different parts on the webpage.


Tags

Tags are keyword enclosed in angle brackets "< >" which helps to define the content for display.
  • Opening tag (< >) - It is used in the beginning which contains the elements.
  • Closing tag (</>) - It is used in the ending which also contains the elements.
Ex - 
<p>Example to show opening and closing tag.</p>

In this example, <p> is opening tag and </p> is closing tag.  <p> tag is used to add the paragraph as a text.


Basic structure of HTML

Here we given a basic structure of the HTML -

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document Title</title>
</head>
<body>
    <!-- Content-->
</body>
</html>

  • <!DOCTYPE html> - It is the declaration that specifies the HTML version.
  • <html>...</html> - It is the root element that contains the all content on the webpage.
  • <head>...</head> - It is the contains the head part like title of the page, links and meta tags.
  • <meta> - It is used for viewport settings and character set.
  • <title>...<title> - It is used to show the title of the webpage.
  • <body>...</body> - It contains the content that displays the on the webpage.


HTML Tags

HTML contains many tags which are used to create a structure of the webpage but here are the some commonly used tags as below - 

  • Heading - <h1> to <h6> tag for small to high heading form.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

  • Paragraph - <p> tag is used for the text.
<p>This is a paragraph.</p>

  • Lists - <ul> tag used for unorderd list items and <ol> tag used for ordered list items.
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

  • Images - <img> tag is used to add image.
<img src="image.png" alt="Description of the image">

  • Links - <a> anchor tag is used to add links.
<a href="https://example.com">Example link</a>


Attributes

Attributes are the additional information about the elements in the form of value.

  • href - It is used to specify the URL link within it for <a> tag.
<a href="https://example.com">Example Link</a>

  • src - It is used to specify the URL link of the image for <img> tag.
<img src="image.png">

  • alt - It is the alternative text which provides the description for <img> tag.
<img src="image.png" alt="Description of the image">


Forms

Forms are used collect the user data. They includes the inputs, checkboxes, labels, buttons and more as an elements. 

<form>
    <!-- Form elements -->
</form>

Here we are the all form elements of the form as below -

  • Input - It is used to insert the value as name, email, number in the input field by the user.
<input type="text" id="name" name="name">

  • Label - It is used to show the text in forms.
<label for="label_name">Example text</label>

  • Textarea - It is used for multi-line input text.
<textarea id="message" name="message" rows="4" cols="50"></textarea>

  • Radio buttons - It contains multiple options and usee needs to select one of them.
<p>Gender:</p>
<label>
    <input type="radio" name="gender" value="male"> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>

  • Checkboxes - It contains multiple options and user can select one or more.
<p>Hobbies:</p>
<label>
    <input type="checkbox" name="hobbies" value="reading"> Reading
</label>
<label>
    <input type="checkbox" name="hobbies" value="coding"> Coding
</label>

  • Select menu - It is used to select the correct answer from dropdown list.
<label for="language">Language:</label>
<select id="language" name="language">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">Javascript</option>
</select>

  • File input - It is used to upload files by the user.
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file">

  • Button - It can be used as submit button to submit the details of the form.
<button type="submit">Submit</button>


Comments

Comments are used to add some notes as explanation or text about the elements part in short. Comments not displayed on the webpage, it is only for understanding the code.

<!-- This is a comment -->
<p>This is a paragraph.</p>


Example using HTML tags - 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Example</title>
</head>
<body>
    <!-- heading -->
        <h1>Welcome to my website</h1>
        <p>hello coders, Stay connected with us.</p>

    <!-- image -->
        <img src="" alt="Sample Image">

    <!-- list -->
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
        </ul>
        <ol>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ol>

    <!-- Form -->
        <h2>Contact us</h2>
        <form action="/submit-form" method="post">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required><br><br>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required><br><br>

            <label for="message">Message:</label>
            <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>

            <label>Gender:</label>
            <label><input type="radio" name="gender" value="male"> Male</label>
            <label><input type="radio" name="gender" value="female"> Female</label><br><br>

            <label for="country">Country:</label>
            <select id="country" name="country">
                <option value="india">India</option>
                <option value="usa">United States</option>
                <option value="uk">United Kingdom</option>
            </select><br><br>

            <label for="file">Choose a file:</label>
            <input type="file" id="file" name="file"><br><br>

            <button type="submit">Submit</button>
        </form>

</body>
</html>

Output of the example -

Example using html elements


Watch this tutorial to learn html from basic to advanced -

Source - Apna College (Youtube)


Also Check this :-
Compiler to run projects- HTML CSS JS Online Compiler 

If you have any confusion or query, then feel free to ask us on coding community.

Learn more and practice more🚀