Introduction To HTML

HTML stands for Hyper Text Markup Language.
HTML was invented by Tim Berners-Lee in 1991.
HTML is used to create web pages and web applications.
Using HTML you can describe the structure of a web page.
You can write HTML code in a normal text editor like notepad and the best part is it is platform-independent.
HTML is supported by almost all browsers.

HTML is a combination of Hypertext and Markup language.

Hypertext – It is the link between the web pages A markup language is the language of the web. They are used to structure and format text documents with the help of symbols and tags.

HTML Element

An HTML element is defined by a start tag and an end tag. In between the tag you have to provide the content.

Syntax

<Open Tag>Content</Close Tag>

Empty Elements

Some HTML elements have no content. They do not have an end tag.

<html>
<head>
    <title>Empty Tag</title>
</head>
<body>
    BR tag breaks the line and inserts the content in next line.
        Hello<br>World
    <hr>Horizontal Rule Tag
</body>
</html>

Output - Empty Elements

Basic Structure Of HTML

The <html> element is the top-level/ root element.

The <body> element represents the content of an HTML document.

<html>
<head>
    <title>
        Title Of The Document
    </title>
</head>
<body>
    Content Of An HTML Document
</body>
</html>

HTML Elements to design the content of a Web Page.

Content Sectioning Elements

Text Content Elements

Inline Text Semantics

Content Sectioning Elements

Using these elements you can organize your content into sections like header, footer, headings, etc.,

Heading Tags

<h1>Heading Element</h1>
    <h2>Heading Element</h2>
    <h3>Heading Element</h3>
    <h4>Heading Element</h4>
    <h5>Heading Element</h5>
    <h6>Heading Element</h6>

Output - Heading Tag

Address Element:

Content enclosed within the address element indicates that it is the contact information of an organization or an individual. The following example shows the usage of both address and time tags.

<body>
    <h3>The meeting is at <time>10.00 AM</time> <br/>Venue is</h3>
    <address>12- Nehru Nagar</address>
    <address>Rajaji Road</address>
    <address>Malleswaram</address>
    <address>Bangalore</address>
</body>

Output - Address and Time Tag

Article Element:

Contents enclosed within the article element indicates that they are an independent part of a document like a newspaper article, a blog entry, or a magazine.

<html>
<head>
    <title>Article</title>
</head>
<body>
    <article class="forecast">
    <h1>Weather forecast for South India</h1>
    <article class="day-forecast">
        <h2>22 November 2022</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>23 November</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>24 November 2022</h2>
        <p>Heavy rain.</p>
    </article>
</article>
</body>
</html>

Output - Article

Text Content Elements

List Element

This element is used to represent an item in a list.
It can be an ordered list or an unordered list.
An ordered list is used to number the contents whereas an unordered list is like a bulleted list.

<body>
  <p>Week Days</p>  
  <ul>
    <li>Sunday</li>
    <ul>
        <li>Grocery Check List</li>
        <li>Tank Refill</li>
    </ul>
    <li>Monday</li>
    <li>Tuesday</li>
    <ul>
        <li>Visit to Temple</li>
    </ul>
    <li>Wednesday</li>
    <li>Thursday</li>
    <ul>
        <li>Purchasing Pooja Items</li>
    </ul>
    <li>Friday</li>
    <li>Saturday</li>
  </ul>
</body>

Output - List (Unordered)

dfn and dd HTML Element:

These elements provide the description, definition, or value for the term. The following example shows the usage of definition and list tags.

<body>
    <p>Physics</p>
    <dl>
        <ol type="A">
            <li>
                <dt>Newtons First Law</dt>
                <dd>The natural behavior of a body is to move in a straight line
                         at constant speed.</dd>
            </li>
            <li>
                <dt>Newtons Second Law</dt>
                <dd>Force is equal to the rate of change of momentum.</dd>
            </li>
            <li>
                <dt>Newtons Third Law</dt>
                <dd>Every action has equal and opposite reaction.</dd>
            </li>
        </ol>
    </dl>
    <p>Computer Science</p>
    <dl>
        <ol>
            <li>
                <dt>Operating System</dt>
                <dd>Software which acts as an interface between the
                   user and the computer</dd>
            </li>
            <li>
                <dt>Software</dt>
                <dd>Set of programs to perform certain task</dd>
            </li>
            <li>
                <dt>Hardware</dt>
                <dd>Peripheral devices and Physical Components</dd>
            </li>
        </ol>
    </dl>
</body>

Output - dfn and list

pre HTML Element:

The content enclosed within this tag will be displayed as it is. In short, it is preformatted text.

<body>
    <h1>Chapters</h1><hr/>
    <p>Chapter No. &nbsp; &nbsp; &nbsp; &nbsp; 1 <br/>
    Chapter No. &nbsp; &nbsp; &nbsp; &nbsp; 2 <br/>
    Chapter No. &nbsp; &nbsp; &nbsp; &nbsp; 3 <br/><br/>    
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        <pre>   Omnis illum facilis possimus qui nesciunt? <br/> Quas eveniet dolore impedit placeat esse.</pre></p>
</body>

Output - Pre Tag

p HTML Element:

If the content should look like a paragraph then use this element.

Browsers automatically add a single blank line before and after each <p> element.

<body>
    <p><h3>This is a Paragraph Tag in H2 size</h3></p>
    <h4><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, cum!</p></h4>
</body>
</html>

Output - Paragraph Tag

I am concluding my article with this.
I will include the remaining tags in the next article.

Thanks for reading my article.

Ash blog