HTML Tutorial
HTML Basic Elements
Heading tags:
The headings are important to represent the contents on a web page clearly. Here, we are using 6 heading tags to display the headings with different usages. You can check the below example to learn heading tags.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph</p>
<h2>Heading 2</h2>
<p>Paragraph</p>
<h3>Heading 3</h3>
<p>Paragraph</p>
<h4>Heading 4</h4>
<p>Paragraph</p>
<h5>Heading 5</h5>
<p>Paragraph</p>
<h6>Heading 6</h6>
<p>Paragraph</p>
</body>
</html> Output:
Paragraph tags:
Paragraphs are displayed with the use of open <p>, end with </p> tags.
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tags</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html> Output:
HTML Links:
The <a> tag is used to define the HTML Links.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Links:</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<a href="https://codeamend.com/html-introduction/">Specifies the link</a>
</body>
</html> Output:
Note: The href attribute specifies the destination of the link.
HTML images:
The <img> tag is used to define the HTML images.
In this example, the src (source file), alt (alternative text), width and height tags are the attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML images</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<img src="tutorials.jpg" alt="tutorials" width="300" height="100">
</body>
</html> HTML Button:
The <button> tag is used to display the buttons.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<button>Click here</button>
</body>
</html> Output:
HTML Lists:
The <li> tag is used to list the items and it follows the two classified HTML Lists, that is unordered list <ul> and ordered list <ol>
Example
<!DOCTYPE html>
<html>
<head>
<title>Html Lists</title>
</head>
<body>
<h1>Lists Examples</h1>
<ul>
<li>sugar</li>
<li>caramel</li>
<li>salt</li>
</ul>
<ol>
<li>sugar</li>
<li>caramel</li>
<li>salt</li>
</ol>
</body>
</html> Output:
Empty HTML elements:
The empty elements are important to break the contents properly as you want to where.
The <br> is an empty element called line break tag and it doesn’t have the closing tag.
In the HTML5 version, this tag <br /> is used as an empty element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Empty HTML elements</title>
</head>
<body>
<h1>Empty HTML Elements Examples</h1>
<p>Paragraph</p>
<p>Paragraph</p><br>
<p>Paragraph</p>
<button>Click here</button>
</body>
</html> Output:
