HTML Basics

To introduce HTML let’s start with definition so,

What is HTML?

HTML stands for Hyper Text Markup Language and it used for creating web pages.
HTML consists of a series of elements and describes the structure of Web page.
HTML elements tell the browser how to display the content
HTML elements are represented by tags and these tells how to display the content.

HTML Document Structure:

An HTML document is a plain text file with the “.html” file extension.
It consists of a series of elements that define the structure and content of the web page.

Below code shows our first HTML document

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title goes here...</title>
   </head>
   <body>
      <h1>TechLearnings Heading</h1>
      <p>TechLearnings Paragraph</p>
   </body>
</html>

Basic Structure:

<!DOCTYPE html>
<html>

<head>
    <title>Page title goes here...</title>
</head>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph</p>
</body>

<div class="tl-list-heading"><span>HTML Tags</span></div>
HTML tags (also called as HTML elements) are surrounded by angle brackets

 <tag_name> Content inside tags... </tag_name>

When HTML pages are rendered on web broswer, browser engine transforms HTML documents and other resources of a web page, into an interactive visual representation on web broswer (or other user's device).

<!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

```
        <!DOCTYPE html> 
```
Declares the document type and version of HTML (HTML5 in this case).
```
 <html> 
```
The root element that contains all other HTML elements.
```
        <head> 
```
Contains meta-information about the document, such as the title.
```
 <title> 
```
Sets the title of the web page, displayed in the browser's title bar or tab.
```
        <body> 
```
Contains the visible content of the web page.

Headings and Paragraphs:

Headings are defined with
```
 <h1> 
```
to
```
 <h6> 
```
,
where
```
 <h1> 
```
is the highest level and
```
 h6
                    
```
is the lowest.
Paragraphs are defined with
```
 <p> 
```
.

Links:

To create a hyperlink, use the <a> (anchor) element.

<a href="https://www.example.com">Go to Example</a>

Images:

To embed an image, use the <img> element.

<img src="image.jpg" alt="Image description">

Lists:

You can create ordered lists ( <ol>) and unordered lists (
<ul>).
List items are defined with <li>.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Forms:

Forms are used for user input and interaction.
Form elements include <form>, <input>,
<textarea>, <select>, and more.

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
</form>

Attributes:

HTML elements can have attributes that provide additional information or settings.
Attributes are specified in the opening tag of an element.

<a href="https://www.example.com" target="_blank">Go to Example</a>

Comments:

You can add comments to your HTML code using . Comments
are not displayed in the browser but can be helpful for documentation.

HTML is Case-Insensitive:

HTML tags and attributes are not case-sensitive, but it's a best practice to use lowercase for tag
names and attribute names to ensure compatibility.

Whitespace:

Extra spaces and line breaks are generally ignored in HTML. Use indentation and formatting for
readability.

Validation:

HTML documents should be well-formed and follow the HTML specification. You can validate your HTML
using online tools or integrated development environments (IDEs).

Tech Learnings

HTML Introduction

HTML Basics

HTML Document Structure:

Basic Structure:

Author: Mahesh

Read More

HTML Tutorial

Recently Added