HTML Doctype
All HTML Document must start with <!DOCTYPE html>
element
The Doctype appears at the top of the HTML page and is only once and not case sensitive.
It helps the browser to load the correct html version.
For HTML5 the doctype declaration is <!DOCTYPE html>
<!DOCTYPE html>
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1,p {
font-family: arial, sans-serif;
background-color: #e7e9eb;
padding:10px;
}
</style>
<title>HTML DOCTYPE Example</title>
</head>
<body>
<h1>!DOCTYPE Example.</h1>
<p>!DOCTYPE html, declaration represents the html5 document type. It does not dispaly anything but helps to load the proper html engine.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
HTML Heading
Heading is the title for a section or a paragraph or a page, and carry the short description of the contents.
Heading starts from <H1>
to <H6>
element, where <H1>
the biggest and <H6>
is the smallest in size.
Defines text headings in different formats.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.heading {
font-family: arial, sans-serif;
background-color: #e7e9eb;
padding:10px;
font-size:20pt;
}
</style>
<title>HTML Heading Example</title>
</head>
<body>
<p class="heading">HTML Heading Example.</p>
<h1>This is Heading H1</h1>
<h2>This is Heading H2</h2>
<h3>This is Heading H3</h3>
<h4>This is Heading H4</h4>
<h5>This is Heading H5</h5>
<h6>This is Heading H6</h6>
<p>Note: Elements from h1 to h6 represent headings for sections at six levels. H1 is the highest level and h6 is the lowest level</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
HTML Paragraph
Paragraph is created by <p>
</p>
element.
A separate section of text with intervals before and after a paragraph.
A paragraph describe something in full details and can be used multiple times.
Example
<h1>Heading for pagaraph one</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat</p>
<h1>Heading for pagaraph two</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
<p class="note">Note: Paragraph is a block level element.</p>
Click on the "Try it Now" button to see how it works.
HTML Hyperlinks
Hyperlink is created by <a>
tag. See the example below a link open in a new tab or window.
Creates a link (hyperlink) to another page.
<p><a href="https://www.google.com" target="_parent">Go to google</a> to search more about hyperlinks.</p>
<p><a href="https://www.w3context.com" target="_blank">Go to w3context</a> to search more about
hyperlinks.</p>
hyperlink can be internal or external.
Example
<p><a href="https://www.google.com" target="_blank">Go to google</a> to search more about hyperlinks.</p>
Click on the "Try it Now" button to see how it works.
HTML Images
HTML images are defined by the <img>
tag.
The <img>
tag does not hold the images to itself but rather refers to a link to the source image.
<img src="puppy.jpg" alt="Friendly dog" width="105" height="143">
<img src="puppy.jpg" alt="Nice dog" width="150" height="200">
In <img>
tag src
attribute is used as the source url for the image, width
and height
are used to set the image size, and alt
is used for alternative text if the image cannot be found for any reason.
Click on the "Try it Now" button to see how it works.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Try sample code
Copy each file contents and paste it to your project, run and see the final output when everything is correct.