Smart Guide
for
COMMON HTML
ELEMENTS & TAGS
Concise guidelines for beginners
Compiled by
NuBari, LE
[email protected]
CONTENTS
CONTENTS.............................................................................. 1
START HERE .......................................................................... 2
WHAT IS HTML?............................................................................. 2
1. <HTML></HTML>: ...................................................................... 2
2. <HEAD></HEAD>:...................................................................... 2
3. <TITLE></TITLE>: ...................................................................... 2
4. <META>: ................................................................................... 3
5. <LINK>: .................................................................................... 3
6. <STYLE></STYLE>: .................................................................... 3
7. <BODY></BODY>: ...................................................................... 3
8. <HEADER></HEADER>: .............................................................. 4
9. <FOOTER></FOOTER>: ............................................................... 4
10. <NAV></NAV>: ....................................................................... 4
11. <H1></H1> TO <H6></H6>:.................................................... 4
12. <P></P>: ............................................................................... 5
13. <A></A>:............................................................................... 5
14. <IMG>: .................................................................................. 5
15. <UL></UL>: ........................................................................... 5
16. <OL></OL>: ........................................................................... 5
17. <LI></LI>: ............................................................................. 5
18. <DIV></DIV>: ......................................................................... 6
19. <SPAN></SPAN>:..................................................................... 6
20. <FORM></FORM>: ................................................................... 6
21. <AUDIO></AUDIO>: ................................................................. 6
22. <VIDEO></VIDEO>: ................................................................. 7
Smart guide for common html elements & tags. | 1
START HERE
What is HTML?
HTML is the short form for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML is the building block for all web pages.
HTML specifies the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content on a page.
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
1. <html></html>: The root element of an HTML document; encloses all
other HTML content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
2. <head></head>: Contains metadata and links to external resources like
CSS or JavaScript.
Example:
<head>
<title>Title of the document</title>
</head>
3. <title></title>: Sets the title of the webpage, visible on the browser tab.
Smart guide for common html elements & tags. | 2
Example:
<title>Title of the document</title>
4. <meta>: Self-closing tag that provides metadata such as character set,
description, and keywords. Example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
5. <link>: Self-closing tag used to link external files like stylesheets.
Example:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
6. <style></style>: Contains internal CSS to style the HTML document.
Example:
<style>
h1 {color:red;}
p {color:blue;}
</style>
7. <body></body>: Contains the visible content of the webpage.
Example:
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
Smart guide for common html elements & tags. | 3
8. <header></header>: Represents a section that introduces content,
often containing headings, logos, or navigation. Example:
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
</header>
9. <footer></footer>: Represents the footer of a document or section,
often containing copyright information or links.
Example:
<footer>
<p>Author: Hege Refsnes</p>
<p><a
href="mailto:[email protected]">[email protected]</a></p>
</footer>
10. <nav></nav>: Used to define a section of the document for navigation
links.
Example:
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
</nav>
11. <h1></h1> to <h6></h6>: Define headings, with `<h1>` being the
most important and `<h6>` the least. Example:
<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>
Smart guide for common html elements & tags. | 4
<h6>This is heading 6</h6>
12. <p></p>: Defines a paragraph of text.
Example:
<p> This is paragraph </p>
13. <a></a>: Creates a hyperlink (anchor) to another page or resource.
Example:
<a href="/html/">HTML</a>
14. <img>: Self-closing tag to embed an image in the document.
Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
15. <ul></ul>: Defines an unordered (bulleted) list.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
16. <ol></ol>: Defines an ordered (numbered) list.
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
17. <li></li>: Defines a list item, used inside <ul> or <ol>.
Example:
<li>Coffee</li>
Smart guide for common html elements & tags. | 5
18. <div></div>: A block-level container for grouping elements, useful for
layout and styling.
Example:
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
19. <span></span>: An inline container for grouping text or elements, often
used for styling specific text. Example:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
20. <form></form>: Defines a form for user input, containing various input
elements like text fields, checkboxes, and buttons. Example:
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
21. <audio></audio>: Embeds an audio file that can be controlled by the
user.
Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Smart guide for common html elements & tags. | 6
22. <video></video>: Embeds a video file with controls like play, pause,
and volume adjustment.
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Smart guide for common html elements & tags. | 7
