Introduction of HTML
Tags: webdev, css, learning, html
Published: 2024-06-10 12:48:34


## **What is HTML?**
HTML stands for 
Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
## **A Simple HTML Document**
## **Example**
```HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph. </p>

</body>
</html>
```
## **Example Explained**
The `<!DOCTYPE html>` declaration 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 `<body>` element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The `<h1>` element defines a large heading
The `<p>` element defines a paragraph
## **What is an HTML Element?**
An HTML element is defined by a start tag, some content, and an end tag:
`<tagname>` Content goes here... `</tagname>`
The HTML element is everything from the start tag to the end tag:
```HTML
<h1>My First Heading</h1>
<p>My First paragraph</p>
```
## **The href Attribute**
The `<a>`tag defines a hyperlink.
## **Example**
`<a href="https://www.w3schools.com">Visit W3Schools</a>`
## **HTML Headings**
HTML headings are defined with the `<h1>` to `<h6>` tags.
`<h1>` defines the most important heading.` <h6>` defines the least important heading.
## **Example**
```HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
## **HTML Paragraphs**
The HTML `<p>` defines a paragraph
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
## **Example**
```HTML
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
## **The HTML Style Attribute**
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
```HTML
<tagname style="property:value;">
```
## **HTML Formatting Elements**
Formatting elements were designed to display special types of text:
`<b>` - Bold text
`<strong>` - Important text
`<i>` - Italic text
`<em>` - Emphasized text
`<mark>` - Marked text
`<small>` - Smaller text
`<del>` - Deleted text
`<ins>` - Inserted text
`<sub>` - Subscript text
`<sup>` - Superscript text
## **HTML `<blockquote>` for Quotations**
The HTML `<blockquote>` element defines a section that is quoted from another source.
## **HTML `<q>` for Short Quotations**
The HTML `<q>` tag defines a short quotation.
## **HTML `<abbr>` for Abbreviations**
## **Example**
```HTML
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
```
## **HTML `<address>` for Contact Information**
## **HTML `<cite>` for Work Title**
## **Example**
```HTML
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
```
## **HTML `<bdo>` for Bi-Directional Override**
BDO stands for Bi-Directional Override.
The HTML `<bdo>` tag is used to override the current text direction:
## **Example**
```HTML
<bdo dir="rtl">This text will be written from right to left</bdo>
```
## **HTML Comment Tag**
You can add comments to your HTML source by using the following syntax:
```HTML
<!-- Write your comments here -->
```
## **Color Values**
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values:
```HTML
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
```
The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):
```HTML
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
```
## **Example**
```HTML
h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-c
```