An HTML page must have .html extension. For example: about.html
It’s a good idea to call a homepage as index.html
because when we navigate to a website, it will look in a root directory for index.html
file to serve in the browser.
<!DOCTYPE html>
tells the browser that this is an HTML5 document<html>
acts as the root of our document and contains our code.<head>
contains essential information about the web page, such as the <title>
element.<title>
is not visible in the page, but appears in a browser’s tab and in search result<body>
contains the content that will be visible to visitors<html>
<head>
<title>Page Title</title>
</head>
<body>
Content
</body>
</html>
HTML includes six levels of headings, which are ranked according to importance.
HTML headings are defined with the <h1>
to <h6>
tags.
<h1>This is the largest headline</h1>
<h2>This is also a large headline</h2>
<h3>This is a slightly smaller headline</h3>
<h4>This is an even smaller headline</h4>
<h5>This is the second-smallest headline</h5>
<h6>This is the smallest headline</h6>
<p>
tagTo create a paragraph, we use <p>
tag with its opening and closing tags.
<p>This is a paragraph.</p>
To display special types of text, we can use a list of elements.
<p><strong> bold text </strong></p>
<p><em> emphasized text </em></p>
<p><small> small text </small></p>
<p><i> italic text </i></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
<span>
tag<span>
separates small pieces of content that are on the same line as other content.
It’s useful to add CSS or JavaScript into a part of text.
<p>Hello, <span>world</span></p>
<br>
tagWe can use <br />
tag to add a line break without starting a new paragraph.
The <br />
tag has no closing tag because it has no content inside it.
<p>
This is <br />
a line break
</p>
To create a horizontal line, we use the <hr />
tag.
You can add links to text or images with <a>
tag.
We use the href attribute (hyperlink reference) to define the link’s destination address:
<a href="#">Read here</a>
The target Attribute
By default, link is opened in the current tab. To change this, we can use target attribute target="_blank"
to open the document in a new window or tab.
<a href="url" target="_blank">link text</a>
The list item element create list items inside:
An ordered list starts with the tag, and each list item is defined by the tag.
Here is an example of an ordered list:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
An unordered list starts with the tag.
<ul>
<li>One Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
Div is a container that divides the page into sections.
Div does not have any visual effect in the webpage but will be useful in CSS.
<div>
<h1>Hello</h1>
<p>Hello World!</p>
</div>
HTML < img />
tag is used to insert an image to a web page. It is a self-closing tag.
Image syntax
<img src="image.jpg" alt="cat image" />
alt
attribute is used to describe the image to screen readers.We can point to external images by including the entire URL of the image, or we can point to images within our site by listing file name.
<img src="image.jpg" /> <img src="https://website.com/image.jpg" />
To define the image size, we can use the width and height attributes.
The value can be specified in pixels or as a percentage:
<img src="cat.jpg" height="150px" width="150px" alt="cat image" />
By default, an image has no borders. We can use the border attribute within the image tag to create a border around the image.
<img src="cat.jpg" height="150px" width="150px" border="1px" alt="cat image" />
To add links to an image, you can use <a>
tag.
<a href="#Images">
<img src="img/cat.jpg" alt="Cat" width="300" />
</a>
<blockquote>
tag is used to quote some reference from another source or website. In the brwoser, it will indent the text to the right.
We can add attribute cite
to show where we receive this information on this quote from.
<blockquote cite="https://www.quote.com">
The best way to get started is to quit talking and begin doing
</blockquote>
HTML also supports displaying videos.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>
Note: The text, “Video not supported” will only be displayed if the browser is unable to load the video.
Attributes provide additional information about an element or a tag, while also modifying them.
<p text-align="center">This text is aligned to center</p>
The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.
Comments are written in HTML using the following syntax:
<!-- Your comment goes here -->
index.html
index.html
must be in the root folder, not a subfolder