DEV Community

wasifali
wasifali

Posted on • Updated on

Introduction of HTML

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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:

<h1>My First Heading</h1>
<p>My First paragraph</p>
Enter fullscreen mode Exit fullscreen mode

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

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Enter fullscreen mode Exit fullscreen mode

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

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

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:

<tagname style="property:value;">
Enter fullscreen mode Exit fullscreen mode

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

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
Enter fullscreen mode Exit fullscreen mode

HTML <address> for Contact Information

HTML <cite> for Work Title

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Enter fullscreen mode Exit fullscreen mode

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

<bdo dir="rtl">This text will be written from right to left</bdo>
Enter fullscreen mode Exit fullscreen mode

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->
Enter fullscreen mode Exit fullscreen mode

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three

elements have their background color set with RGB, HEX, and HSL values:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

The following two

elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Example

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

Top comments (0)