Understanding basic HTML tags is important while learning HTML. Here are the HTML elements that are used more frequently than others. They are:
HTML documents
All HTML documents must start with a declaration which specifies the document type: <!DOCTYPE html>.
The HTML document begins with <html> and ends with </html>.
The main part of the HTML document is located between <body> and </body>.
Example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>Here is the paragraph.</p>
</body>
</html>HTML headings
The heading elements are used for structuring headings.There are six types of HTML headings starting from <h1> to <h6>.
Example of the HTML headings:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Result
HTML paragraphs
The <p> element is used for separating HTML paragraphs.
Example of the HTML paragraphs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br/> with line break.</p>
</body>
</html>Result
HTML images
The attributes of this tag are:
- the source file (src),
- the alternative text (alt),
- width,
- height.
The <img /> tag is used for inserting HTML images.
Example of the HTML images:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is an image example</h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Result
HTML links
The <a> tag is used for inserting HTML links. You can specify the destination of the link with the help of href attribute.
Example of the HTML links:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Result
HTML buttons
You can specify the HTML buttons with the <button> tag.
Example of the HTML <button> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the HTML <button> tag:</h1>
<p>You can specify the HTML buttons with the button tag:</p>
<button type="button">Button</button>
</body>
</html>HTML lists
HTML lists are specified with the <ul> tag that is used for specifying an unordered list, or with the <ol> tag that is used to create an ordered list, followed by <li> tags.
Example of the HTML lists:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>An unordered list</h2>
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Book</li>
</ul>
<h2>An ordered list</h2>
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Book</li>
</ol>
</body>
</html>HTML horizontal lines
The HTML <hr> tag breaks the page into different parts and with the help of a horizontal line, which runs from left to right edge of the page, creates horizontal margins. This is an empty tag.
Example of the HTML <hr> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Welcome to W3Docs</h1>
<hr>
<p>
Learn to design and build professional website<br>
Learn to design and build professional website
</p>
<p>Learn to design and build a professional website</p>
<hr>
<p>Learn to design and build professional website</p>
<p>Learn to design and build professional website</p>
<p>Learn to design and build professional website</p>
<hr>
</body>
</html>Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.