Introduction to HTML
HTML, or Hypertext Markup Language, is the standard language used to create and design documents on the World Wide Web. It structures web content by defining elements such as headings, paragraphs, links, images, and other media. Each HTML document is made up of a series of elements represented by tags, which are enclosed in angle brackets.
For example, a paragraph is defined by the `<p>` tag. HTML is the foundation of web development, providing the essential framework that browsers use to render and display web pages. As a markup language, it does not involve logic or dynamic functionalities, which are handled by languages like JavaScript. Understanding HTML is crucial for anyone looking to develop or maintain websites, as it dictates how content is organized and displayed to users.
HTML Document
An HTML document is a file containing hypertext markup language. HTML code is based on tags, or hidden keyboards, which provides instructions for formatting the document. A tag starts with an angle bracket and the ‘less than’ sign: ‘<’. The tag ends with angle bracket and the ‘greater than’ sign: ‘>’.
for example, to make “hello world” bold, we can use the <b>hello world</b>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Basic Structure of HTML Document
The basic structure of an html document consist of 5 element:
<! DOCTYPE>
<html>
<head>
<title>
<body>
The DOCTYPE Declaration:
This declaration specifies the version of HTML being used in the document. It is not an HTML tag but rather an instruction to the web browser about the version of HTML the page is written in.
For example: <!DOCTYPE html>
The `<html>` Element:
This element serves as the root element of the HTML document. It encapsulates all the content on the page.
Example:
<html>
<!– Content goes here –>
</html>
The `<head>` and `<body>` Elements:
The `<head>` element contains meta-information about the document, such as its title, character encoding, and links to external resources like stylesheets or scripts. The `<body>` element contains the actual content of the document that is displayed in the browser.
For example:
<head>
<!– Meta-information and links to external resources –>
</head>
<body>
<!– Content visible to users –>
</body>
The `<meta>` Element:
This element provides metadata about the HTML document. Common uses include specifying the character encoding, setting the viewport for responsive web design, and providing keywords for search engine optimization (SEO).
For example:
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”Brief description of the page”>
The `<title>` Element:
This element sets the title of the HTML document, which appears in the browser’s title bar or tab. It’s also used by search engines to display the title of the page in search results.
For example:
<title>Page Title</title>
Html tags
They are like keywords which defines that how web browser will format and display the content. With the help of html tags, a web browser can distinguish between an HTML content and a simple content. It contain three main parts: opening tag, content and closing tag.
Important notes:
– All HTML tag must enclosed within <> these brackets.
– Every tag in HTML perform different tasks.
– if you have used an open tag <tag>, then you must use a close tag </tag> (expect some tags).
Syntax: <tag> content</tag>
Types of tags:
Paired Tag:
they are a set of two tags with the same name. in each paired tag set, one is an opening tag <tag>, and other one is closing tag </tag>.
Some examples of Paired tags:
| Opening tags | Closing tags |
| <HTML> | </HTML> |
| <head> | </head> |
| <title> | </title> |
| <table> | </table> |
| <form> | </form> |
| <ul> | </ul> |
| <p> | </p> |
Unpaired tag:
they are single tags with no closing tag. They are also called singular tag and non-container tag.
some example of unpaired tags:
| Open tag |
| <br> |
| <hr> |
| <meta> |
| <input> |
HTML attributes
– Html attributes are special words which provide additional information about the elements or attributes are the modifier of the html elements.
– Each element or tag can have attributes, which defines the behaviour of that element.
– Attributes should always be applied with starts tag.
– The attribute should always be applied with its name and value pair.
– The attributes name and values are case sensitive, and it is recommended by W3C that it should be written in lowercase only.
– you can add multiple attributes in one html element, but need to give space between two attributes.
syntax:
<element attribute_name= “value”>content</element>
General purpose Attributes
There are some attributes, such as id, title, class, style, etc. that you can use on the majority of html elements.
The id Attribute
The id attribute is used to give a unique name or identifier to an element with in a document. Example:
<input type= “text” id= “first name”>
<div id= “container”> some content</div>
<p id= “info text”>this is a paragraph </p>
The class Attribute
To Assigns one or more class names to an element, which can be used to style groups of elements or target them with JavaScript. Example:
<p class=”intro”>This is an introduction paragraph.</p>
<p class=”intro highlight”>This paragraph is highlighted.</p>
The `title` Attribute:
Use to provides additional information about the element. Typically, the information is displayed as a tooltip when the user hovers over the element. Example:
<abbr title=”Hypertext Markup Language”>HTML</abbr>
The `style` Attribute:
Use to adds inline CSS to an element, allowing you to apply styles directly within the HTML. Useful for quick styling or overriding existing styles. However, it’s generally better to use external or internal CSS for maintainability. Example:
<p style=”color: red; font-size: 20px;”>This is a styled paragraph.</p
HTML Comments:
Comments are some text or code written in your code to give an explanation about the code, and not visible to the users. Comments which are used for HTML files are known as HTML comments. The advantages of HTML comments are:
– It is helpful to understand the complex code.
– It is a simple piece of code that ignore by the web browser. i.e, not displayed by the browser.
– It helps the coder and reader to understand the piece of code for especially in complex source code.
Syntax:
<!—Comments here–>
Types of HTML Comments:
The type of comment are given below:
Single-Line Comment:
In HTML, single-line comments are enclosed within `<!–` and `–>`. However, it is typically used for shorter, one-line notes.
Syntax:
`<!– This is a single-line comment –>`
example:
<! DOCTYPE html>
<html>
<! — this is header section –>
<head>
<! — internal CSS –>
<style>
body{
text-align: centre
background color: #fof8FF
font-size: 3-px
color: red
}
</style>
</head>
<! – this is body section, hi — >
<body>
<! – heading tag — >
<h2> hi </h2>
<! – paragraph tag — >
<p> hello everyone </p>
</body>
</html>
Multi-line Comment:
Multi-line comments are also enclosed within `<!–` and `–>`. These comments can span multiple lines, making them useful for longer explanations or temporarily disabling blocks of code.
Syntax:
<!–
This is a multi-line comment.
It can span multiple lines.
–>
Example:
<! DOCTYPE html>
<html>
<head>
<title> HI </title>
</head>
<body>
<! —
this is a multiline comment
— >
</body>
</html>