What is HTML?
HTML Stands for HyperText Markup Language.It is not a programing language, but a Markup Language used to create and structure content on the web. HTML describe the structure of a web page .
- HyperText:it is a text that contains links to other texts
- Markup: symbols or codes injected in a document to outline structure and arrangement
- Language: Form of communicative interaction with grammatical principles
Basic HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Basic HTML Tags
| Tag | Meaning / Description |
|---|---|
<!DOCTYPE html> |
Document type |
<html> |
Root element of an HTML page |
<head> |
Meta information |
<title> |
title tag specifies a title for the webpage |
<body> |
The visibel content in the webpage |
<h1> |
Big heading |
<p> |
Paragraph |
Text Elements
| Tag | Meaning / Description |
|---|---|
<h1> to <h6> |
Headings(from largest to smallest) |
<p> |
Paragraph |
<br> |
Line break |
<hr> |
Horizontal line |
Formatting
| Tag | Meaning / Description |
|---|---|
<b> or <strong> |
Bold text |
<i> or <em> |
Italic text |
<u> |
Underline text |
<mark> |
Highlighted text |
Link and Images
| Tag | Meaning / Description |
|---|---|
<a href="url"> link text </a> |
create a hyperlink |
<img src="image.jpg" alt="description"> |
Embeds an image |
Lists
| Tag | Meaning / Description |
|---|---|
<ul> |
Unordered(bulleted) list |
<ol> |
Ordered(numbered)list |
<li> |
List item |
HTML Attributes
Attributes provide additional information about HTML elements.
- They always specified in the start tag.
- They usually come in name or value pair like:name="value"
- Example
<a href="https://www.example.com">Visit Example</a>
-
Common Attributes:
- id: id Specifies Unique identifier for an element.
- class: Specifies one or more class names
- style: Specifies inline CSS
- src: Specifies the source of embedded content
- href: They specifies URL for links
-
Create your first html webpage
- Open any text editor for example(Notepad, VS Code etc)
- Write your first html code in editor
- Then save the file for example index.html
- Then run the code and open in web browser
HTML Online Editor
<h1>Hello World</h1>
<p>This is a paragraph.</p>
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
document.querySelector('h1').onclick = () => {
alert("Heading clicked!");
};
Uses of HTML
Web Page CreationWith HTML, you can design and create the structure of a website.
Inserting MediaImages, audio, and videos can be placed on webpages.
HyperlinkingHTML also enables you to link different web pages.
Creating FormsLogin, contact and other forms are created using HTML.
Template DesignIt is useful for crafting templates for emails and web applications.
Embedding ContentYou can also embed Google Maps and Youtube videos in your website.
Advantages of HTML
- Easy to Learn and Use
- Beginners can effortlessly master it.
- Works on every browser and OS
- Compatible with every web browser and operating system.
- No financial burdens
- HTML had no fees, costs or licenses associated with it.
- Universal Browser Support
- Chrome, Firefox and Safari among others can run HTML pages.
- Enhances SEO
- HTML in web pages assists in search engine optimization.
- Combines with CSS and JavaScript
- Cross-compatible with other design and interactive technologies.
- Stagnant Features
- HTML web pages don’t possess logic, calculations or any dynamic features.
- Limited Styling
- CSS is required for an attractive web design.
- Lacks Security Features
- Without back-end support or JavaScript, HTML cannot protect information.
- Excessive Coding for Minor Efforts
- Even basic actions can demand an excess of programming logic.
- Broad strokes encompass decision making or computational analysis