Page |1
HTML-5
Golden Tutorials
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML is not a programing language.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> This is the content... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Some HTML elements have no content (like the <br> element).These
elements are called empty elements. Empty elements do not have an end
tag!
Start tag Element End
content tag
<h1> ………………… </h1>
….
<p> ………………… </p>
….
<br> ………………… …………………
…. ….
<b> ……………………. </b>
<u> ……………………. </u>
HTML TUTORIALS
Page |2
<strong> ……………………. </strong>
HTML Page Structure
<!DOCTYPE html >
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Figure 1: HTML preview
The <!DoCTYPE html> declaration defines that this document is an
HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
The <h1> element defines a large heading
HTML TUTORIALS
Page |3
The <p> element defines a paragraph
Remember :
All the tags will be small not big!
HTML Editors
People use a lot of text editors most of them uses notepad and textedit for
writing notes and for editing even codes too.
For recommendation, download a text editor.
The text editor are :-
Brackets
VS code.com or vscode.dev(online version)
Vim.com
Sublime Text.com
Atom.io
Open the text editor and start writing code and save it as “index.html” or
“.htm”.
HTML Document
Document type is called “<DOCTYPE html>”
Or sometimes like
<Doctype html>
<doctype html>
<Doctype Html>
HTML TUTORIALS
Page |4
Can be written like this and must be written in the html.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings and paragraph
Heading are {1-6} types:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Figure 2 Heading 1-
6
HTML Links
HTML links are defined with the <a> tag:
The link's destination is specified in the href attribute.
<a href="https://www.w3schools.com">This is a link</a>
<a href="https://htmltutorials.com">This is a link</a>
HTML TUTORIALS
Page |5
Figure 3 html links
preview
HTML Image
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14
2">
Tag Description
Figure 4 html
image
<html> Defines the root of an HTML document
HTML TUTORIALS
Page |6
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
The <br> tag defines a line break, and is an empty element without a
closing tag.
HTML Attributes
HTML attributes provide additional information about HTML elements.
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
HTML TUTORIALS
Page |7
HTML Image
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14
2">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size,
and more.
<p style="color:red;">This is a red paragraph.</p>
HTML TUTORIALS
Page |8
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
<p title="I'm a tittle">This is a paragraph.</p>
HTML TUTORIALS
