What is HTML?

HTML (Hypertext Markup Language) is a programming language used to build and structure components in a Website. An HTML file contains the structure of the page itself. It is kind of like the structure of the building.

What is HTML

Why Learn HTML?

HTML is the foundation of all web pages. Without HTML, you wouldn’t be able to organize text or add images or videos to your web pages. HTML is the beginning of everything you need to know to create engaging web pages!

HTML Structure

Input: 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
</body>
</html>
  • HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.
  • The document type declaration <!DOCTYPE html> is required as the first line of an HTML document. The doctype declaration is an instruction to the browser about what type of document to expect and which version of HTML is being used, in this case it’s HTML5.
  • The <html> element, the root of an HTML document, should be added after the !DOCTYPE declaration. All content/structure for an HTML document should be contained between the opening and closing <html> tags.
  • The <head> element contains general information about an HTML page that isn’t displayed on the page itself. This information is called metadata and includes things like the title of the HTML document and links to stylesheets.
  • The <title> element contains a text that defines the title of an HTML document. The title is displayed in the browser’s title bar or tab in which the HTML page is displayed. The <title> element can only be contained inside a document’s <head> element.
  • The <body> element represents the content of an HTML document. Content inside <body> tags are rendered on the web browsers. Note: There can be only one <body> element in a document.

Structure of a tag in HTML

HTML Tag

  • An HTML element is defined by a start tag, some content, and an end tag.

HTML tag attributes

Input: 
<element attribute_name="value">content</element>

The tags in the generated HTML all have associated attributes such as class , id is the most common, in addition, each tag will have its own attributes, for example a tag will have href, target, input then type, require, placeholder... Then You need to know these things to use the right way to code well like this

Basic HTML Tags

1. Heading Tag

Input: 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
  • HTML can use six different levels of heading elements. The heading elements are ordered from the highest level <h1> to the lowest level <h6>.
  • The h1 tag is the tag that is often used for the largest title of the website and note that in a web page, there is only a maximum of one h1 tag , because it affects SEO, so if you use more an h1 tag is not good.

2. Paragraph Tag

Input: 
<p> This is a sample paragraph p>
  • The <p> paragraph element contains and displays a block of text.

3. Anchor Tag

Input: 
<a href="https://google.com"> Google </a>

Anchor Tag

  • The <a> anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. The href determines the location the anchor element points to.

4. Image Tag

Input: 
<img src="/image.png" alt="Description">

Image Tag

  • HTML image <img> elements embed images in documents. The src attribute contains the image URL and is mandatory. <img> is an empty element meaning it should not have a closing tag.

5. Br Tag

Input: 
<br>

Br Tag

  • The <br> line break element will create a line break in text and is especially useful where a division of text is required, like in a postal address. The line break element requires only an opening tag and must not have a closing tag.

6. Div Tag

Input: 
<div class="myDiv">
 <h2>This is a heading in a div element</h2>
 <p>This is some text in a div element.</p>
</div>
  • The <div> element is used as a container that divides an HTML document into sections and is short for “division”. <div> elements can contain flow content such as headings, paragraphs, links, images, etc.

7. Span Tag

Input: 
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
  • The <span> element is an inline container for text and can be used to group text for styling purposes. However, as <span> is a generic container to separate pieces of text from a larger body of text, its use should be avoided if a more semantic element is available.

8. Strong Tag

Input: 
<strong>This text is important!</strong>
  • The <strong> element highlights important, serious, or urgent text and browsers will normally render this highlighted text in bold by default.

9. Emphasis Tag

Input: 
<p>You <em>have</em> to hurry up!</p>

<p>We <em>cannot</em> live like this.</p>
  • The <em> emphasis element emphasizes text and browsers will usually italicize the emphasized text by default.

10. Bold, Italic & Underline Tags

Input: 
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>

Bold Italic Underline Tags

11. Big & Small Tags

Input: 
<big> Big </big>
<small> Small </small>

Big Small Tags

12. Hr Tag

Input: 
<hr>

Hr Tag

13. Subscript & Superscript Tag

Input: 
<sub> subscript </sub>
<sup> superscript </sup>

Subscript Superscript Tag

14. Pre Tag

Input: 
<pre> This
is a sample
text.
</pre>

Pre Tag

Layout

1.Page Layout Techniques

using Semantic tags for layout using the Right Tags

<header>
 <main>
 <footer>

header

header

main

main

footer

footer

2.Inside Main Tag

a.Section Tag For a section on your page

<section>
<!DOCTYPE html>
<html>
<body>
<h1>The section element</h1>
<section>
 <h2>WWF History</h2>
 <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
 <h2>WWF's Symbol</h2>
 <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>

Section Tag For a section

b.Article Tag For an article on your page

<article>
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<article>
 <h2>Google Chrome</h2>
 <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
 <h2>Mozilla Firefox</h2>
 <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
 <h2>Microsoft Edge</h2>
 <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</body>
</html>

Article Tag For an article

c.Aside Tag For content aside main content(ads)

<aside>
<!DOCTYPE html>
<html>
<body>
<h1>The aside element</h1>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
 <h4>Epcot Center</h4>
 <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
</body>
</html>

Aside Tag For content aside main content

3.Revisiting Anchor Tag

a.For New Tab

<a href="https://google.com" target="main"> Google </a>

For New Tab

b.For clickable Pic

<a href="https://google.com"> <img src="link"> </a>

For clickable Pic

4.Revisiting Image Tag

a.Set Height

<img src="link" height=50px >

Set Height

b.Set Width

<img src="link" width=50px >

Set Width

5.Div Tag

a.Div is a container used for other HTML elements

b.Block Element (takes full width)

c.List : Div Tags

List : Div Tags
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

List Div Tags

6.Span Tag

a.Span is also a container used for other HTML elements

b.Inline Element (takes width as per size)

c.List : Span Tags

List : Span Tags
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<tt>
<var>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>

List Span Tags

Advanced HTML Tags

1.Ordered and UnOrdered List

Lists are used to represent real life list data.

Type 1 Type 2
unordered ordered

Unordered

<ul>
<li> Apple </li>
<li> Mango </li>
</ul>

Implement

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<header></header>
<main>
 <ul>
 <li>Apple</li>
 <li>Mango</li>
 <li>Litchi</li>
 </ul>
</main>
<footer></footer>
</body>
</html>

Unordered

Unordered Sublist

Implement

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<header></header>
<main>
 <ul>
 <li>Apple</li>
 <li>Mango</li>
 <ul>
 <li>color : yellow</li>
 <li>season : summer /li>
 </ul>
 <li>Litchi</li>
 </ul>
</main>
<footer></footer>
</body>
</html>

Unordered Sublist

Ordered

<ol>
 <li> Apple </li>
 <li> Mango </li>
</ol>

Implement

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<header></header>
<main>
 <ol>
 <li>Apple</li>
 <li>Mango</li>
 <li>Litchi</li>
 </ol>
</main>
<footer></footer>
</body>
</html>

Ordered

Ordered Sublist

Implement

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<header></header>
<main>
 <ol>
 <li>Apple</li>
 <li>Mango</li>
 <ol>
 <li>color : yellow</li>
 <li>season : summer </li>
 </ol>
 <li>Litchi</li>
 </ol>
</main>
<footer></footer>
</body>
</html>

Ordered Sublist

2.Tables in HTML

Tables are used to represent real life table data.

<tr> used to display table row
<td> used to display table data
<th> used to display table header

tr tag

Implement

<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
 border: 1px solid black;
}
</style>
</head>
<body>
<h1>The tr element</h1>
<p>The tr element defines a row in a table:</p>
<table>
 <tr>
 <th>Month</th>
 <th>Savings</th>
 </tr>
 <tr>
 <td>January</td>
 <td>$100</td>
 </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
 </tr>
</table>
</body>
</html>

tr tag

td tag

Implement

<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
 border: 1px solid black;
}
</style>
</head>
<body>
<h1>The td element</h1>
<p>The td element defines a cell in a table:</p>
<table>
 <tr>
 <td>Cell A</td>
 <td>Cell B</td>
 </tr>
 <tr>
 <td>Cell C</td>
 <td>Cell D</td>
 </tr>
</table>
</body>
</html>

td tag

Implement

<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
 border: 1px solid black;
}
</style>
</head>
<body>
<h1>The th element</h1>
<p>The th element defines a header cell in a table:</p>
<table>
 <tr>
 <th>Month</th>
 <th>Savings</th>
 </tr>
 <tr>
 <td>January</td>
 <td>$100</td>
 </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
 </tr>
</table>
</body>
</html>

th tag

Caption in Tables

<caption> Student Data </caption>

Implement

<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
 border: 1px solid black;
}
</style>
</head>
<body>
<h1>The caption element</h1>
<table>
 <caption>Monthly savings</caption>
 <tr>
 <th>Month</th>
 <th>Savings</th>
 </tr>
 <tr>
 <td>January</td>
 <td>$100</td>
 </tr>
 <tr>
 <td>February</td>
 <td>$50</td>
 </tr>
</table>
</body>
</html>

Caption in Tables

thead & tbody & tfoot in Tables

<thead> to wrap table head
<tbody> to wrap table body

Implement

<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
 border: 1px solid black;
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot elements</h1>
<table>
 <thead>
 <tr>
 <th>Month</th>
 <th>Savings</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>January</td>
 <td>$100</td>
 </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td>Sum</td>
 <td>$180</td>
 </tr>
 </tfoot>
</table>
</body>
</html>

thead tbody tfoot in Tables

Colspan attribute in Tables

<th colspan="2" >
 Sum: $180
</th>
<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
 border: 1px solid black;
}
</style>
</head>
<body>
<h1>The td colspan attribute</h1>
<table>
 <tr>
 <th>Month</th>
 <th>Savings</th>
 </tr>
 <tr>
 <td>January</td>
 <td>$100</td>
 </tr>
 <tr>
 <td>February</td>
 <td>$80</td>
 </tr>
 <tr>
 <td colspan="2">Sum: $180</td>
 </tr>
</table>
</body>
</html>

Colspan attribute in Tables

3.Form in HTML

Forms are used to collect data from the user

Eg- sign up/login/help requests/contact me

<form>
form content
</form>

Implement

<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname" value="John"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>

Form in HTML

Action in Form

Action attribute is used to define what action needs to be performed when a form is submitted

<form action="/action.php" >

Form Element : Input

Taking input from user and placeholder means what will be written down already in that blank space

<input type="text" placeholder="Enter Name">

LABEL

Screen reader users (will read out loud the label, when the user is focused on the element) Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the element, it toggles the input (this increases the hit area).

<input type="radio" value="class X" name="class" id="id1">
<label for="id1">
</label>
<input type="radio" value="class X" name="class" id="id2">
<label for="id2">
</label>

Radio Button

Radio buttons let a user select only one of a limited number of choices:

<!DOCTYPE html>
<html>
<body>
<h1>Display Radio Buttons</h1>
<form action="/action_page.php">
 <p>Please select your favorite Web language:</p>
 <input type="radio" id="html" name="fav_language" value="HTML">
 <label for="html">HTML</label><br>
 <input type="radio" id="css" name="fav_language" value="CSS">
 <label for="css">CSS</label><br>
 <input type="radio" id="javascript" name="fav_language" value="JavaScript">
 <label for="javascript">JavaScript</label>
 <br>
 <p>Please select your age:</p>
 <input type="radio" id="age1" name="age" value="30">
 <label for="age1">0 - 30</label><br>
 <input type="radio" id="age2" name="age" value="60">
 <label for="age2">31 - 60</label><br>
 <input type="radio" id="age3" name="age" value="100">
 <label for="age3">61 - 100</label><br><br>
 <input type="submit" value="Submit">
</form>
</body>
</html>

Class & Id

The HTML class attribute is used to specify a class for an HTML element. A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>

Checkbox

Let the user select one or more options of a limited number of choices:

<label for="id1">
 <input type="checkbox" value="class X" name="class" id="id2">
</label>
<label for="id2">
 <input type="checkbox" value="class X" name="class" id="id2">
</label>

Textarea

A multi-line text input control (text area):

<textarea name="feedback" id="feedback" placeholder="Please add Feedback">
</textarea>

Select Tag

The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input.

<select name="city" id="city">
 <option value="Delhi"> Delhi </option>
 <option value="Mumbai"> Delhi </option>
 <option value="Bangalore"> Delhi </option>
</select>

Implement A Proper Form

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
</head>
<h4>Registration Form</h4>
<form action="/action.php">
 <input type="text" placeholder="username" />
 <br />
 <br />
 <input type="password" placeholder="password" />
 <br /><br />
 <h5>Select your class</h5>
 <label for="101">
 <input type="radio" value="class XI" name="class" id="101" />class XI
 </label>
 <br /><br />
 <label for="102">
 <input type="radio" value="class XII" name="class" id="102" />class XII
 </label>
 <br /><br />
 <h5>Select Fav Subjects</h5>
 <label for="math">
 <input type="checkbox" value="math" name="subject" id="101" /> Math
 </label>
 <br /><br />
 <label for="phy">
 <input type="checkbox" value="phy" name="subject" id="102" /> Physics
 </label>
 <br /><br />
 <label for="chem">
 <input type="checkbox" value="chem" name="subject" id="103" /> Chemistry
 </label>
 <br /><br />
 <label for="CS">
 <input type="checkbox" value="CS" name="subject" id="104" /> Computer
 Science
 </label>
 <br /><br />
 Select your city
 <select name="city">
 <option value="Delhi">Delhi</option>
 <option value="Banglore">Banglore</option>
 <option value="Pune">Pune</option>
 <option value="Mumbai">Mumbai</option>
 </select>
 <br /><br />
 <textarea
 name="feedback"
 id="101"
 placeholder="please give your valuable feedback here"
 rows="5"
 ></textarea>
 <br />
 <input type="submit" value="submit" />
</form>
<body></body>
</html>

Implement A Proper Form

4.Video Embed

iframe Tag

website inside website

<iframe src="link">

Implement

<!DOCTYPE html>
<html>
<body>
<iframe
 width="424"
 height="238"
 src="https://www.youtube.com/embed/q933Vpo-Naw"
 title="YouTube video player"
 frameborder="0"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 allowfullscreen
></iframe>
</body>
</html>

Video Tag

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The <video> tag contains one or more tags with different video sources. The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

<video src="myVid.mp4"> My Video </video>

Attributes

  • controls
  • height
  • width
  • loop
  • autoplay

Implement

<!DOCTYPE html>
<html>
<body>
<video width="560" height="315" src="/myVideo.mov" controls> my video
 <!-- <video width="560" height="315" src="/myVideo.mov" autoplay> my video -->
 <!-- <video width="560" height="315" src="/myVideo.mov" loop> my video -->
</video>
</body>
</html>

Create first HTML File

index.html(It is the default name for a website's homepage)

1.Create a folder on your computer for your project. Name the folder Portfolio (or anything you want).

2.Open VS Code.

3.Open the File menu and select Open Folder …. Browse for the folder you created and open it.

Open the File menu and select Open Folder

4 .Right-click below the folder and select New File. Name the file index.html.

Right-click below the folder and select New File

5.Now you have a blank text file named index.html.

You have a blank text file named index