HTML Comprehensive doc

HTML
What is HTML?
HTML stands for HyperText Markup Language. It is a markup language that defines the structure of
your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts
of the content to make it appear a certain way, or act a certain way. (Mozilla definition)
This is an anatomy HTML element
1. Opening Tag: Imagine the opening tag like the beginning of a story. It's like saying, "Hey,
something special is about to start here!" In your example, the opening tag is, where "p" stands
for paragraph. This tag tells the computer that a paragraph is starting.
2. Closing Tag: Now, think of the closing tag as the end of that story. It's like saying, "Alright,
we're done with this part." In your example, the closing tag is </p>. The forward slash "/"
before the "p" indicates that the paragraph is ending.
3. Content: The content is what goes inside the tags. It's the actual text or information you want to
include. In your example, the content is just regular text. So, if the opening tag is like saying
"start," the content is the actual message or story you want to tell.
4. Element: When you put the opening tag, closing tag, and the content together, you create an
element. It's like a complete package. In your example, the whole thing <p>Text goes
here</p> is the paragraph element.
Types of elements
1: Nesting elements
Imagine you have a sentence about your grumpy cat. Now, you want to highlight the word "very" to
show just how grumpy your cat is. In computer language (HTML), you use something called elements.
The opening tag <strong> is like saying "Make this part important," and the closing tag
</strong> is like saying "Okay, we're done emphasizing." So, you wrap the word "very" with
<strong> tags to make it stand out:
<p>My cat is <strong>very</strong> grumpy.</p>
But here's the important part: when you start with a tag, you need to finish with the same type of tag.
So, if you opened with <p> (paragraph) first, you close it with </p> last. In the same way, if you open
<strong> it first, you close it </strong> last. It's like opening and closing doors – open one before
you close it!
Now, the wrong way would be like this:
<p>My cat is <strong>very grumpy.</p></strong>
This is like opening the door to the room and then trying to close the whole house – it doesn't work! So,
always open and close in the right order.
2: Void Elements:
Now, some elements are like one-way streets – you can only go in one direction. Imagine the <img>
tag as a magic frame that shows a picture. It doesn't have a closing tag because it's like a window – you
don't need to close it because there's no inside or outside; it just shows the picture.
<img src="images/firefox-icon.png" alt="My test image" />
So, when you see an <img> tag, it's like saying "put a picture here," and you don't need to worry about
opening or closing it. It's a special kind of element called a "void element" because it doesn't have the
inside/outside concept like other elements.
The document heading

What is the Head Tag? The head tag in HTML is like the boss of the document. It contains special
tags that tell the computer important information about the document. It's always written before the
body tag, which is like the main content of the document.
<!DOCTYPE html>
<html>
<head>

</head>

</html>
1. Elements Inside the Head Tag: Inside the head tag, we have different tags that do specific
jobs. They are like helpers for the boss.
 <title>: This tag decides the title of the page that shows up in the browser tab.
 <script>: This tag is used to add JavaScript to the page to make it interactive.
 <noscript>: This tag helps when scripts (like JavaScript) are turned off in the
browser.
 <link>: This tag is for connecting to external resources, like stylesheets (CSS).
 <style>: This tag allows us to add styles directly into the document.
 <meta>: This tag provides important information about the document, like character
encoding and description.
2. Nesting and Placement: The head tag is like a folder, and inside it, we can have these different
tags doing their jobs. We need to make sure they are placed and closed properly, like putting
things in the right drawers.
3. Special Tags in Detail:
 <script>: It brings in JavaScript. We can put it in the head or at the bottom of the
page for better performance.
<script src="file.js"></script>
<noscript>: This one helps when scripts are turned off. For example, it can change styles if scripts
are disabled.
<noscript>
<style>
.no-script-alert {
display: block;
}
</style>
</noscript>
<link>: It connects to external resources, like stylesheets. Also, it can link to other things like RSS
feeds or favicons.
<link href="file.css" rel="stylesheet">
<style>: This one adds styles directly into the document.

<style>
.some-css {}
</style>
<meta>: It provides important information like character encoding, author, and description for search
engines.
<meta charset="utf-8">
<meta name="author" content="Chris Mills" />
<meta name="description" content="The MDN Web Docs Learning Area...">
Setting the Language: We can also set the primary language of the document using the lang attribute
in the opening HTML tag.
<html lang="en-US">

</html>
The document body

The Document Body: Where the Fun Happens!
The document body is like the main part of a webpage – it's where all the exciting stuff goes! Imagine
it as the stage where the actors perform in a play. Here's a simple way to understand it:
1. Opening and Closing Tags:
 Just like the head has a <head> tag, the body has a <body> tag.
 The <body> tag shows where all the action begins, and it has a friend – the </body>
tag – which says where it all ends.
<html>
<head>

</head>
<body>


</body>
</html>
2. Content:
 The content is like the story of your webpage – text, images, videos, and everything you
want people to see.
 You can have paragraphs (<p>), headings (<h1>, <h2>, ...), images (<img>), and
more inside the body.
htmlCopy code<body>
<h1>Welcome to My Awesome Website!</h1>
<p>This is a cool place where you can learn and have fun!</p>
<img src="smiley-face.jpg" alt="Smiley Face">

</body>
3. Nesting Elements:
 Just like nesting dolls, you can put elements inside other elements in the body. This is
called nesting.
 For example, you can have a paragraph inside a div (<div>) or a list (<ul>) inside
another list item (<li>).
<body>
<div>
<p>This is a paragraph inside a div. How cool!</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
4. Links:
 Links (<a> tags) are like magical doors that take you to other places on the internet. You
can use them to connect your webpage to other web pages.
<body>
<p>Check out this amazing <a href="https://example.com">website</a>!</p>
</body>
HTML tags
What's a Tag?
 Think of HTML tags as instructions that tell the web browser how to structure and display
content on a webpage.
 Tags are like labels you put on different parts of your content to give them meaning.
Opening and Closing Tags:
 Most tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>).
 The opening tag marks where an element begins, and the closing tag marks where it ends.
<p>This is a paragraph.</p>
Examples of HTML tags

1. Paragraph Tag (<p>):
 Defines a paragraph of text.
 Block element: Takes up the full width and starts on a new line.
 Cannot be nested within another <p>.
<p>This is a paragraph of text.</p>
2. Span Tag (<span>):

 Inline tag: Used within a paragraph to create a section that can be targeted with CSS.
 Can contain any inline elements like text or other inline tags.
<p>A part of the text <span>and here another part</span></p>
3. Line Break Tag (<br>):

 Represents a line break.
 Inline element: Doesn't need a closing tag.
 Used inside a paragraph (<p>) to create a new line without additional spacing.
<p>Some text<br>A new line</p>
4. Heading Tags (<h1> to <h6>):

 Create different levels of headings.
 Block elements: Each heading takes up the full width.
 Organized from most important (<h1>) to least important (<h6>).
 Important for SEO; browser default rendering makes <h1> bigger.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Another Level</h3>
5. Strong Tag (<strong>):

 Marks the text inside as strong.
 Semantic hint, not just visual.
 Browsers make the text bold by default.
<p>This text is <strong>strong</strong>.</p>
6. Emphasis Tag (<em>):

 Marks the text inside as emphasized.
 Semantic hint, not just visual.
 Browsers make the text italic by default.
<p>This text is <em>emphasized</em>.</p>
7. Blockquote Tag (<blockquote>):

 Useful for inserting citations in text.
 Browsers apply default margin (e.g., Chrome: 40px left/right, 10px top/bottom).
<blockquote>This is a quote or citation.</blockquote>
8. Horizontal Rule Tag (<hr>):

 Adds a horizontal line to the page.
 Useful for separating sections.
<p>Some text above<hr>Some text below</p>
9. Code Tag (<code>) and Preformatted Tag (<pre>):

 Code tag is useful for showing code; browsers give it a monospaced font.
 Pre tag is often used to wrap code; prevents whitespace collapsing and makes it a block
element.
<pre>
<code>
const greeting = "Hello, World!";
console.log(greeting);
</code>
</pre>
10. Lists: Unordered (<ul>), Ordered (<ol>), Definition (<dl>):

 Unordered lists use <ul> with list items <li>.
 Ordered lists use <ol> with list items <li>.

 Definition lists use <dl>, <dt> for terms, and <dd> for definitions.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>


<ol>
<li>First</li>
<li>Second</li>
</ol>


<dl>
<dt>Flavio</dt>
<dd>The name</dd>
<dt>Copes</dt>
<dd>The surname</dd>
</dl>
11. Presentational Tags:

 Tags with presentational purposes include <mark>, <ins>, <del>, <sup>, <sub>,
<small>, <i>, <b>.
 The visual rendering of some of these tags is affected by default browser styling.
Remember, the semantic meaning is crucial in choosing tags; for example, the difference
between <b> and <strong>, or <i> and <em>. Semantic tags provide meaning,
while presentational tags are more about styling. Keep experimenting and building!
<p>Text with <mark>highlighted</mark> part.</p>
<p><ins>Inserted</ins> and <del>deleted</del> text.</p>
<p>Text in <sup>superscript</sup> and <sub>subscript</sub>.</p>
<p><small>Small text</small> and <i>italicized</i> text.</p>
<p><b>Bold text</b> and <i>italic text</i>.</p>
HTML links
In HTML, links are created using the <a> (anchor) element. The anchor element is versatile and allows
you to create links to various destinations, such as other web pages, files, or specific sections within a
page. Here's a breakdown of the key aspects related to HTML links:
Basic Link Structure:
The basic syntax for creating a link in HTML is as follows:
<a href="URL">Link Text</a>
 The href attribute specifies the destination URL (Uniform Resource Locator).
 The text between the opening <a> and closing </a> tags is the visible link text.
Examples:
1. External Link:
<a href="https://www.example.com">Visit Example.com</a>
2. Internal Link (to another page in the same website):

<a href="/about">About Us</a>
3. Link to an Email Address:

<a href="mailto:[email protected]">Send us an email</a>
Additional Attributes:
1. Target Attribute:
The target attribute specifies where to open the linked document. Common values include _blank
(opens in a new tab or window) and _self (opens in the same tab or window).
<a href="https://www.example.com" target="_blank">Visit Example.com in a new
tab</a>
2. Title Attribute:
The title attribute provides additional information about the link, which is often displayed as a
tooltip when the user hovers over the link.
<a href="https://www.example.com" title="Go to Example.com">Visit Example.com</a>
Linking to Sections within a Page (Internal Linking):

You can create links to specific sections within the same page by using the id attribute and the #
symbol.
Example:
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2 Content</h2>
Linking to Files:
You can use relative or absolute paths to link to files such as images, documents, or other web pages.
Example:
<a href="documents/example.pdf">Download PDF</a>
Linking to Phone Numbers:

For mobile users, you can create links that initiate a phone call.
Example:
<a href="tel:+123456789">Call us at +1 (234) 567-89</a>
Best Practices:
 Provide descriptive and meaningful link text for accessibility.
 Ensure that links are easily distinguishable from regular text.
 Test links to ensure they work correctly.
Container tags
HTML provides several container tags that can hold an unspecified set of other tags. Each container tag
serves a specific purpose, and it's important to understand when to use each one. Let's explore these
container tags with code examples:
article Tag:
The <article> tag is used to identify content that can be independent from other things on a page,
such as a blog post or a list of links.
<div>
<article>
<h2>A blog post</h2>
<a href="#">Read more</a>
</article>
<article>
<h2>Another blog post</h2>
<a href="#">Read more</a>
</article>
</div>
<article>
<h2>A blog post</h2>
<p>Here is the content...</p>
</article>
section Tag:
The <section> tag represents a section of a document, with each section having a heading tag (h1-
h6) and the section body.
<section>
<h2>A section of the page</h2>
<p>...</p>
<img src="image.jpg" alt="Description">
</section>
div Tag:
The <div> tag is a generic container element that is often used when existing tags are not suitable. It
can be styled using CSS by adding a class or id attribute.
<div>
...
</div>
Tags Related to Page Structure:

nav Tag:
The <nav> tag is used to define the page navigation, often containing an <ul> or <ol> list.
<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>
aside Tag:
The <aside> tag is used for content related to the main content, like a quote or a sidebar.
<div>
<p>some text..</p>
<aside>
<p>A quote..</p>
</aside>
<p>other text...</p>
</div>
header Tag:
The <header> tag represents the introduction of a page, containing headings, taglines, or images.
<article>
<header>
<h1>Article title</h1>
</header>
...
</article>
main Tag:
The <main> tag represents the main part of a page.
<body>
....
<main>
<p>....</p>
</main>
</body>
footer Tag:
The <footer> tag is used for the footer of an article or the page.
<article>
....
<footer>
<p>Footer notes..</p>
</footer>
</article>
Forms
Forms are a crucial component for user interaction in web applications. They allow users to input data,
which is then sent to a server when the form is submitted. Here's a comprehensive overview of HTML
form elements and their usage:
Methords: Get, and Post
 Get-Passes content in a plain text.
 Post-Passes content when encrypted.
Action – where the data is being submitted to.
Creating a Form:
A form is initiated using the <form> tag:
<form>

</form>
Specifying Submission Method:

By default, forms use the GET method, but it's often recommended to use POST for submitting
sensitive data:
<form method="POST">
</form>
Setting Form Action (URL):

Specify the URL where the form data should be sent using the action attribute:
<form action="/new-contact" method="POST">
</form>
Form Controls Overview:

Input Field:
The <input> tag is versatile and can behave differently based on the type attribute:
<input type="text" name="username" placeholder="Your username">
<input type="email" name="email" placeholder="Your email">
<input type="password" name="password" placeholder="Your password">
<input type="number" name="age" placeholder="Your age" min="18" max="110" step="5">
<input type="hidden" name="some-hidden-field" value="some-value">
<input type="number" name="age" value="18">
<input type="submit" value="Click me">
<input type="reset">
<input type="button" value="Click me">
<input type="file" name="secret-documents" accept="image/*">
<input type="button" value="Click me">
<input type="radio" name="color" value="yellow" checked>
<input type="checkbox" name="color" value="yellow" checked>
<input type="date" name="birthday">
<input type="time" name="time-to-pickup">
<input type="month" name="choose-release-month">
<input type="week" name="choose-week">
<input type="datetime-local" name="date-and-time">
<input type="color" name="car-color" value="#000000">
<input type="range" name="age" min="0" max="100" value="30" step="10">
<input type="tel" name="telephone-number" pattern="[0-9]{3}-[0-9]{8}">
<input type="url" name="website" pattern="https://.*">
<textarea rows="20" cols="10" name="article"></textarea>
<select name="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
Radio Buttons:
<input type="radio" name="color" value="yellow" checked>
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">
Checkboxes:
<input type="checkbox" name="color" value="yellow" checked>
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">
Date and Time:

htmlCopy code<input type="date" name="birthday">
<input type="time" name="time-to-pickup">
<input type="month" name="choose-release-month">
<input type="week" name="choose-week">
<input type="datetime-local" name="date-and-time">
Color Picker:
<input type="color" name="car-color" value="#000000">
Range:
<input type="range" name="age" min="0" max="100" value="30" step="10">
Telephone:
<input type="tel" name="telephone-number" pattern="[0-9]{3}-[0-9]{8}">
URL:
<input type="url" name="website" pattern="https://.*">
Textarea:
<textarea rows="20" cols="10" name="article"></textarea>
Select Dropdown:
</select>
Grouping Options:
<optgroup label="Primary">
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Others">
<option value="green">Green</option>
<option value="pink">Pink</option>
</optgroup>
</select>
Tables
Tables are essential in web development, and though they were once a primary tool for building
layouts, today they are predominantly used for presenting data. Let's delve into the key components of
creating tables in HTML:
Basic Table Structure:
You initiate a table using the <table> tag:
<table>

</table>
Rows and Columns:
Rows are added using the <tr> tag and columns are defined inside a row using <th> for headers and
<td> for data:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
</tr>
<tr>
</tr>
</table>
Styling the Table:

Adding some CSS styling can enhance the visual representation of the table:
th, td {
padding: 10px;
border: 1px solid #333;
}
Spanning Columns and Rows:

Use colspan and rowspan attributes to make a cell span multiple columns or rows:
<td colspan="2">Row 1 Columns 1-2</td>
<td colspan="3">Row 2 Columns 1-3</td>
<td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
Row Headings:
You can add row headings using <th> inside a row that's not the first row of the table:
<th>Row 1</th>
<th>Row 2</th>
Organizing the Table:

For larger tables, use <thead>, <tbody>, and <tfoot> tags to clearly define different sections:
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>

</tbody>
<tfoot>
<tr>
<td>Footer of Col 1</td>
<td>Footer of Col 2</td>
</tr>
</tfoot>
Table Caption:
Include a <caption> tag immediately after the opening <table> tag to describe the table:
<table>
<caption>Dogs age</caption>

</table>
Multi-media
Images:
1. Image Tag:
 Use the <img> tag to embed images in HTML.
<img src="image.jpg" alt="Description">
2. Attributes:
 src: Specifies the image source (URL or file path).
 alt: Provides alternative text for accessibility.
3. Responsive Images:
 Use the width attribute or CSS to make images responsive.
<img src="image.jpg" alt="Description" style="max-width: 100%;">
Videos:
1. Video Tag:
 Utilize the <video> tag to embed videos.
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
2. Attributes:
 controls: Adds video controls (play, pause, volume, etc.).
 width and height: Set dimensions.

3. Multiple Sources:
 Include multiple <source> elements for different video formats.
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Iframes:
1. Iframe Tag:
 Use the <iframe> tag to embed external content, such as other web pages or
documents.
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"
allowfullscreen></iframe>
2. Attributes:
 src: Specifies the source URL.
 width and height: Set the dimensions.
 frameborder: Controls whether a border is displayed around the iframe.
 allowfullscreen: Enables fullscreen mode for videos.
3. Embedding Maps:
 For embedding maps (Google Maps, for example):
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!..." width="600"
height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
4. YouTube Video:
 Embed a YouTube video using an iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>
Audio:
1. Audio Tag:
 Use the <audio> tag to embed audio files.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
2. Attributes:
 controls: Adds audio controls.
 autoplay: Starts playing automatically.

3. Multiple Sources:
 Similar to videos, provide multiple sources for different audio formats.
SVG (Scalable Vector Graphics):
1. SVG Tag:
 Use the <svg> tag to embed SVG graphics.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
2. Attributes:
 width and height: Set the dimensions.
 Various SVG elements like <circle>, <rect>, <path> for different shapes.
3. Inline SVG:
 SVG can be included inline within HTML or as an external file.

HTML Comprehensive doc

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

HTML Comprehensive doc

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Comprehensive doc

Uploaded by

Copyright:

Available Formats

HTML

The document heading

<style>: This one adds styles directly into the document.

The document body

Examples of HTML tags

2. Span Tag (<span>):

3. Line Break Tag (<br>):

4. Heading Tags (<h1> to <h6>):

 Important for SEO; browser default rendering makes <h1> bigger.

5. Strong Tag (<strong>):

6. Emphasis Tag (<em>):

7. Blockquote Tag (<blockquote>):

8. Horizontal Rule Tag (<hr>):

9. Code Tag (<code>) and Preformatted Tag (<pre>):

10. Lists: Unordered (<ul>), Ordered (<ol>), Definition (<dl>):

 Ordered lists use <ol> with list items <li>.

11. Presentational Tags:

2. Internal Link (to another page in the same website):

3. Link to an Email Address:

Linking to Sections within a Page (Internal Linking):

<h2 id="section2">Section 2 Content</h2>

Linking to Phone Numbers:

Tags Related to Page Structure:

Specifying Submission Method:

Setting Form Action (URL):

Form Controls Overview:

<textarea rows="20" cols="10" name="article"></textarea>

Date and Time:

Styling the Table:

Spanning Columns and Rows:

Organizing the Table:

 alt: Provides alternative text for accessibility.

 width and height: Set dimensions.

 width and height: Set the dimensions.

 frameborder: Controls whether a border is displayed around the iframe.

 allowfullscreen: Enables fullscreen mode for videos.

 autoplay: Starts playing automatically.

You might also like