An HTML page must have .html extension, such as about.html.
It’s a good idea to call a homepage index.html because when we navigate a website, it will look in a root directory for an index.html file to serve in the browser.
<!DOCTYPE html> tells the browser that this is an HTML5 document<html> is 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 on the page but appears in a browser’s tab, and the search result<body> contains the content that will be visible to visitors<!DOCTYPE html>
<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 the <p> tag with its opening and closing tags.
<p>This is a paragraph.</p>
We can use a list of elements to display particular types of text.
<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 on the same line as other content.
Adding CSS or JavaScript into a part of the text can sometimes be useful.
<p>Hello, <span>world</span></p>
<br> tagWe can use the <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 the <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, a link is opened in the current tab. To change this, we can use the 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 has no visual effect on 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 can describe the image to screen readers and search engine bots.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 the file name.
<img src="image.jpg" /> <img src="https://website.com/image.jpg" />
We can use the width and height attributes to define the image size.
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" />
You can use the <a> tag to add links to an image.
<a href="#Images">
<img src="img/cat.jpg" alt="Cat" width="300" />
</a>
<blockquote> tag quotes some reference from another source or website. In the browser, it will indent the text to the right.
We can add the attribute cite to show where we receive this information on this quote from.
By default, browsers apply a margin to the blockquote element. For example, Chrome applies a 40px left and right margin and a 10px top and bottom margin.
<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.
You can add a video source using the src attribute.
<video src="myVideo.mp4"></video>
To show the built-in controls, you can add the controls attribute:
<video src="myVideo.mp4" controls></video>
By default, a video file does not play automatically. You can add the autoplay attribute to play the video automatically. In the example below, the video autoplays only if muted.
<video src="myVideo.mp4" controls autoplay muted></video>
If you set the loop attribute, your video restarts at 0:00. Otherwise, the video stops at the end of the file:
<video src="myVideo.mp4" controls autoplay loop></video>
You can also set a poster image:
<video src="myVideo.mp4" poster="picture.png"></video>
For width and height attributes, you set the space so your video does not change the layout when it’s finally loaded. It is in pixels.
<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 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.