Introduction To HTML - 01

What is HTML ?

Whenever you are planning to build anything from scratch the first thing you will do is to well -structure it right? HTML does it when you are getting started to build web pages/websites. HTML is the markup that contains all the actual stuff that a web page has. All the text on this page you’re reading right now is inside HTML tags that tell the browser how to order the content on the page.

What is a HTML tag ?

The HTML tag is the combination of <> and tag-name.

// HTML tag :
    <tagname>   

// Opening tag :
    <tagname>

// Closing tag : 
    </tagname>

There are two types of HTML tags :

  1. Opening tags
  2. Closing tags

The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.

What are HTML Elements ?

A HTML element is the combination of the opening tag, some content and the closing tag.

// HTML Element :

    <tagname> some content .. </tagname>

There are some elements that have no content and no closing tag. These elements are called Empty Elements.

//Example 
<br>

The basic structure of HTML 

<!DOCTYPE html>             
<html>
    <head>
        <title>Page's Title</title>
        <link ..... >
        <script>......</script>
    </head>
    <body>
        .
        .
        .
        .
    </body>
</html>
  • The <!DOCTYPE html> tag defines that this document is an HTML5 document.
  • The <html> element is the root element of an HTML page.
  • The <head> element contains meta information about the HTML page.
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <link> element is an empty element, it contains only attributes. It defines the relationship between the current document and an external resource. It is used to link to external style sheets.
  • The <script> element either contains scripting statements or points to an external script file through the src attribute.
  • The <body> element defines the document's body. It is a container that contains all the required tags and information that need to be displayed on the web page.

What are Inline and Block Elements ?

Every HTML element has a default display value. There are two types:

  1. Block
  2. Inline

Block Elements:

A block element always starts on a new line. It always takes up the full width available (i.e.) it stretches out to the left and right as far as it can.

Example: div, nav, heading tags etc.

Inline Elements:

An inline element does not start on a new line. It always takes as much as width it requires.

Example: button, span, input etc.

Different types of HTML Tags :

1) For maintaining the document structure :

  • Heading Tags : <h1> to <h6>

    There are 6 different heading tags.h1 tag has the largest font size whereas the h6 tag has the smallest.

  • Line Break Tag: <br>

    It is used to insert a single line break (ie) it moves to the next line. It is an empty tag which means that it has no end tag.

  • Division Tag : <div> </div>

    It defines a division or a section in an HTML document and any sort of content can be placed inside this tag.

  • Paragraph Tag : <p> </p>

    It defines a paragraph. Plain text can be placed inside this tag.

  • Span Tag:<span> </span>

    It is an inline container used to add inline styles without changing the structure of the document.

  • Horizontal Ruler Tag: <hr>

    This tag is most often displayed as a horizontal rule that is used to separate content in a webpage.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

2) For formatting the text :

  • Bold Element: <b> </b>

    It makes the text in bold.

  • Emphasis Element: <em> </em>

    It is used to emphasize the text and the content inside it is displayed in italic.

  • Code Snippet Element: <code> </code>

    The code element is used to write code snippets. The content inside is displayed in the browser's default monospace font.

  • Abbreviation Element: <abbr> <abbr>

    The abbr element is used to define an abbreviation or an acronym.

  • Italics Element: <i> </i>

    The content inside this element is displayed in italic.

  • Strong Element: <strong> </strong>

    It is used to define text with strong importance and the content inside is displayed in bold.

  • Mark Element : <mark> </mark>

    The mark element is used to mark or highlight the text.

  • Subscript Element: <sub> </sub>

    It is used to define subscript text and the content inside it appears half a character below the normal line. It can also be used for writing formulas.

  • Superscript Element: <sup> </sup>

    It is used to define superscript text and the content inside it appears half a character above the normal line. It can also be used for writing footnotes.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

3) For creating a list :

  • Unordered List : <ul> </ul>

    It is used to list the items in the unordered form (i.e.) the list items will be marked with bullets.It starts with the <ul> tag and each list item inside this tag starts and ends with the<li> tag.

  • Ordered List : <ol> </ol>

    It is used to list the items in the ordered form (i.e.) the list items will be marked with numbers.It starts with the <ol> tag and each list item inside this tag starts and ends with the <li> tag.

  • List Item : <li> </li>

    It defines a list item. It is used inside ordered and unordered lists.

  • Description List : <dl> </dl>

    It is used to list the items along with their description. Description list uses <dt> tag to define an item (also known as term) and <dd> tag to define each term.

  • <dt> </dt> Element :

    It is used to define a term in a description list.

  • <dd> </dd> Element:

    It is used to describe a term in a description list.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

4) For creating a Table :

  • Table : <table> </table>

    It is used to define a table in HTML.

  • Column Heading : <th> </th>

    This tag contains the heading information of a column. The content in the <th> element is bold and centred.

  • Table Row : <tr> </tr>

    It is used to define a row in a table.

  • Table Data : <td> </td>

    It is used to write the data for a particular cell.

  • Caption Tag : <caption> </caption>

    It is used to define a caption for a table.

  • Column Group : <colgroup> </colgroup>

    It is used to group one or more columns in a table for formatting.

  • Column : <col>

    It specifies column properties for each column in a table.

  • Table Head : <thead> </thead>

    It is used to group header content in a table.

  • Table Body : <tbody> </tbody>

    It is used to group the body content in a table.

  • Table Footer : <tfoot> </tfoot>

    It is used to group footer content in a table.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

I hope this article gave you some basic knowledge about what HTML is, basic HTML Tags and how they work. Feel free to put up any queries that you may have.

In my upcoming blogs, I will be covering more about HTML5 tags, attributes and some simple projects.

Also, feel free to put suggestions in the comments section and give a reaction if you enjoyed reading. Connect with me on LinkedIn | Twitter .

27

برچسب ها:

WebdevBeginnersCodenewbieHtml