Scribd
Upload
20 views

Smartguide HTML

Html is the first place to begin your web development. This document is smart because the content is simple, skill based, formatted to get you started.

Uploaded by

Lenu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Smartguide HTML

Html is the first place to begin your web development. This document is smart because the content is simple, skill based, formatted to get you started.

Uploaded by

Lenu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like