HYPER TEXT
MARKUP
LANGUAGE
INTRO
HTML stands for Hyper Text Markup Language. It's the
standard markup language for creating web pages.
Hyper: In computing, "hyper" is a prefix used to indicate links
between information.
Text: Refers to the written or displayed content. In the case of HTML,
this content could be anything from plain text to images and
multimedia.
Markup: In the context of HTML, "markup" refers to the process of
adding special notations or tags to a document to provide information
about the structure of the document.
!DOCTYPE
It is a declaration that specifies the document type and
version of HTML being used in a web page.
It helps browsers render the content correctly.
HTML TAG
The <html> tag is the root element of an HTML document.
It serves as a container for all the content and elements of a
webpage.
Everything inside the <html> tag is part of the HTML document.
HEAD TAG
Metadata Storage: Contains meta-information about the
webpage (e.g., charset, description)
Page Title: <title> sets the title shown on the browser tab.
External Resources: Links stylesheets (<link>) and scripts
(<script>).
Viewport Settings: Manages responsive design (<meta
name="viewport">)
META TAG
The <meta> tag provides additional information about the web
page, such as the author, description, and keywords.
It is located within the <head> section of the HTML document.
Provides a brief description of the page, often used by search engines
in search results.
It is an integral part of HTML document structure and is used to
enhance the document's functionality, visibility, and compatibility.
<meta charset="UTF-8">
BODY TAG
The <body> tag is a fundamental part of an HTML document,
containing all the content that is visible to users in the browser,
such as text, images, videos, forms, and buttons.
It serves as the main container for a webpage's content and
layout, including structural elements like headers, footers, and
sections
TYPES OF TAGS IN
HTML:
1. Open Tags (Container Tags)
Definition: Tags that require both an opening tag and a closing
tag.
Syntax: <tagname>content</tagname>
Examples:
<p>: Paragraph. Example: <p>This is a paragraph.</p>
<h1> to <h6>: Headings. Example: <h1>Heading</h1>
<div>: Division/Container. Example: <div>Content</div>
<a>: Hyperlink. Example: <a href="[Link]">Click Here</a>
2. Self-Closing Tags (Void Tags)
Definition: Tags that do not have a closing tag and are written
as a single tag.
Syntax: <tagname /> (or just <tagname> in HTML5).
Examples:
<br>: Line break. Example: <br>
<img>: Image. Example: <img src="[Link]" alt="Image">
<meta>: Metadata. Example: <meta charset="UTF-8">
<link>: Links external resources. Example: <link
rel="stylesheet" href="[Link]">
IMP TAGS
Heading Tags:
<h1> to <h6>: Define headings of different levels (largest to
smallest).
Example: <h1>Main Heading</h1>
Paragraph:
<p>: Defines a paragraph.
Example: <p>This is a paragraph.</p>
Text Formatting:
<b>: Bold text.
<i>: Italicized text.
<u>: Underlined text.
<strong>: Strong (important) text.
<em>: Emphasized text.
<mark>: Highlighted text.
Lists:
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
Links and Media:
<a>: Creates hyperlinks.
<img>: Embeds images.
<video>: Embeds video content.
<audio>: Embeds audio content.
Tables:
<table>: Creates a table.
<tr>: Table row.
<td>: Table cell.
<th>: Table header cell.
Forms:
<form>: Creates a form.
<input>: Input field (text, checkbox, radio, etc.).
<textarea>: Multi-line text input.
<button>: Creates a button.
<label>: Labels form elements.
Structural Tags:
<div>: Defines a block-level container.
<span>: Defines an inline container.
SEMANTIC HTML
Semantic HTML is a coding style. It is the use of HTML markup to
reinforce the semantics or meaning of the content.
<article>, <navbar>, <footer>
HTML5
DOCTYPE: Simplified declaration
Structure: Enhanced for both content structuring and
web applications.
Audio and Video tags
Semantic tags
THANK YOU