HTML
Beginner To Advance Tutorial
What Is HTML
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
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 elements are represented by tags
HTML tags label pieces of content such as "heading",
"paragraph", "table",
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explanation
The <!DOCTYPE html> declaration defines this document to be
HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the
document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Documents
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends
with </html>.
The visible part of the HTML document is
between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Documents
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends
with </html>.
The visible part of the HTML document is
between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Heading
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraph
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Link
HTML Link are defined with the <a> tag:
Example
<a href="[Link] is a link</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are provided as attributes:
Example
<img src="[Link]" alt="[Link]" width="104" height="142">
HTML Button
HTML buttons are defined with the <button> tag:
Example
<button>Click me</button>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list
items):
Example
<ul>
<li>Coffee</li>
</ul>
<ol>
<li>Coffee</li>
</ol>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list
items):
Example
<ul>
<li>Coffee</li>
</ul>
<ol>
<li>Coffee</li>
</ol>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Href Attributes
HTML links are defined with the <a> tag. The link address is
specified in the href attribute:
Example
<a href="[Link] is a link</a>
Width Height Attributes
HTML images also have width and height attributes, which
specifies the width and height of the image:
Example
<img src="img_girl.jpg" width="500" height="600">
HTML Responsive Web Design
Responsive Web Design is about using HTML and CSS to
automatically resize, hide, shrink, or enlarge, a website, to
make it look good on all devices (desktops, tablets, and
phones):
