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>
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>
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>
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>
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;">
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>
HTML <address> for Contact Information
HTML <cite> for Work Title
Example
<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
<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:
<!-- 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
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)