Smartguide HTML

Download as pdf or txt
Download as pdf or txt
You are on page 1of 8

Smart Guide

for
COMMON HTML
ELEMENTS & TAGS
Concise guidelines for beginners

Compiled by

NuBari, LE
degodofnet@gmail.com
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:hege@example.com">hege@example.com</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

You might also like