HTML Basic Tags
<DOCTYPE! html> – A doctype or document type declaration is an instruction that
tells the web browser about the markup language in which the current page is
written. It is not an element or tag. The doctype declaration is not case-
sensitive.
<html> – This tag is used to define the root element of HTML document. This tag
tells the browser that it is an HTML document. It is the second outer container
element that contains all other elements within it.
<head> – This tag is used to define the head portion of the HTML document that
contains information related to the document. Elements within the head tag are not
visible on the front-end of a webpage.
<body> – The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front end.
<!DOCTYPE html>
<html>
<!-- Head Section content -->
<head>
<!-- Page title -->
<title>Basic Web Page</title>
</head>
<!-- Body Section content -->
<body>
<!-- Used to display heading content -->
<h1>Welcome to GeeksforGeeks</h1>
<!-- Used to display paragrapg content -->
<p>A computer science portal for geeks</p>
</body>
</html>
<!DOCTYPE html>
<html>
<!-- head tag -->
<head>
<title>Welcom to Geeksforgeeks</title>
</head>
<!-- Body tag -->
<body>
<h1>HI RDR !!! </h1>
<h2>Geeksforgeeks</h2>
<h3> you are cool </h3>
<p>
A Computer Science Portal for Geeks
</p>
<p>
hye rdr
</p>
</body>
</html>
OUTPUT:-
HI RDR !!!
Geeksforgeeks
you are cool
A Computer Science Portal for Geeks
hye rdr
BUTTON TAG:-
<!DOCTYPE html>
<html>
<body>
<h3>HTML button Tag</h3>
<!-- button tag starts from here -->
<button type="button" onclick="alert('Welcome to GeeksforGeeks')">
Click Here
</button>
<!-- button tag ends here -->
</body>
</html>
CODE TAG:-The code tag in HTML is used to define the piece of computer code.
<!DOCTYPE html>
<html>
<body>
<pre>
<!--code Tag starts here -->
<code>
#include<stdio.h>
int main() {
printf("Hello Geeks");
}
<!--code Tag ENDS here -->
</code>
</pre>
</body>
</html>
DETAILS TAG:-This tag is used to create an interactive widget that the user can
open or close.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<!-- details tag starts here -->
<details>
<summary>GeeksforGeeks</summary>
<p>A computer science portal for geeks</p>
<div>
It is a computer science portal where you
can learn programming.
</div>
<!-- details tag ends here -->
</details>
</body>
</html>
MARK TAG:-The mark tag in HTML is used to define the marked text. It is used to
highlight the part of the text in a paragraph.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<p>
<!-- mark tag -->
<mark>GeeksforGeeks:</mark> It is a
<mark>computer science</mark> portal for geeks
</p>
</body>
</html>
MARQUEE:-The marquee tag in HTML is used to create scrolling text or images on a
webpage. It scrolls either horizontally or vertically.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<p>
<!-- marquee tag -->
</p>
</body>
</html>
OPTGROUP:-This tag is used to create a group of the same category options in a
drop-down list.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<select>
<!-- optgroup tag starts -->
<optgroup label="Programming Languages">
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
</optgroup>
<!-- optgroup tag ends -->
</select>
</body>
</html>
STYLE:- The <style> tag in HTML helps us to modify our text, viewed in the page.
This modification includes changing font size, font family, font color etc. Not
only the texts but also we can change the style of a body or part of a page. Now
let’s look at various attributes of style and what else the tag supports.
Syntax: <tagname style="property:value;">
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<!--CSS properties applied inside
this style tag-->
<style>
body {
background-color: #616A6B;
}
h1 {
font-family: commanders;
background-color: yellow;
}
h2 {
font-family: algerian;
background-color: cyan;
}
#first {
font-family: Castellar;
background-color: green;
color: blue;
}
.second {
text-align: right;
background-color: white;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<h1>Hello GeeksforGeeks.</h1>
<h2>Hello GeeksforGeeks.</h2>
<p id="first">Hello GeeksforGeeks.</p>
<p class="second">Welcome Geeks</p>
</body>
</html>
SUMMARY:- The <summary> tag in HTML is used to define a summary for the <details>
element.
The <summary> element is used along with the <details> element and provides a
summary visible to the user.
When the summary is clicked by the user, the content placed inside the <details>
element becomes visible which was previously hidden.
<!DOCTYPE html>
<html>
<body>
<details>
<!-- html summary tag is used here -->
<summary>GeeksforGeeks.</summary>
<p> It is a portal for geeks.</p>
</details>
</body>
</html>
HTML title Attribute: The title attribute is used to explain an element on hovering
the mouse over it. The behavior differs with various elements but generally, the
value is displayed while loading or hovering the mouse pointer over it.
Example: This example explains the HTML title Attributes to specify the metadata
for the element on hovering the mouse over it.
<html>
<head>
<title>title Attribute</title>
</head>
<body>
<h3 title="Hello GeeksforGeeks">Hover to see the effect</h3>
</body>
</html>
HTML href Attribute: This attribute is used to specify a link to any address. This
attribute is used along with the <a> tag. The link put inside the href attribute
gets linked to the text displayed inside the<a> tag. On clicking on the text we
will be redirected to the link. By default, the link gets opened in the same tag
but by using the target attribute and setting its value to “_blank”, we will be
redirected to another tab or another window based on the browser’s configuration.
Example: This example explains the HTML href Attributes specify the link address of
the file.
<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="https://www.geeksforgeeks.org/">
Click to open in the same tab
</a><br>
<a href="https://www.geeksforgeeks.org/" target="_blank">
Click to open in a different tab
</a>
</body>
</html>
HTML ELEMENTS:- An HTML element is a collection of start and end tags with the
content inserted in between them.
Syntax:
<tagname > Contents... </tagname>
Empty HTML Elements: HTML Elements without any content i.e, that do not print
anything are called Empty elements. Empty HTML elements do not have an ending tag.
For instance. <br>, <hr>, <link>, <input> etc are HTML elements.
HTML Iframes :- The iframe in HTML stands for Inline Frame. The ” iframe ” tag
defines a rectangular region within the document in which the browser can display a
separate document, including scrollbars and borders. An inline frame is used to
embed another document within the current HTML document. The HTML iframe name
attribute is used to specify a reference for an <Iframe> element. The iframe is
basically used to show a webpage inside the current web page. The ‘ src ‘ attribute
is used to specify the URL of the document that occupies the iframe.
Syntax: <iframe src="URL" title="description"></iframe>
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>
<iframe src=
"https://ide.geeksforgeeks.org/index.php"
height="200"
width="400">
</iframe>
</body>
</html>
Accepted Attribute: The following attributes can be used with the <iframe> tag in
HTML.
HTML <iframe> allow Attribute
HTML <iframe> allowfullscreen attribute
HTML <iframe> allowpaymentrequest attribute
HTML <iframe> height attribute
HTML <iframe> width attribute
HTML <iframe> loading attribute
HTML <iframe> scrolling attribute
HTML <iframe> name attribute
HTML <iframe> referrerpolicy attribute
HTML <iframe> sandbox attribute
HTML <iframe> src attribute
HTML <iframe> srcdoc attribute
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>
<p>Click the link text</p>
<iframe
height="300"
width="350"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210910170539/gfg-221x300.png"
name="iframe_a">
</iframe>
<p><a href="https://ide.geeksforgeeks.org/tryit.php"
target="iframe_a">
GeeksforGeeks IDE
</a>
</p>
</body>
</html>
The <dialog> tag is used to specify the dialog box or window. This tag is used to
create a popup dialog and models on a web page. This tag is new in HTML5.
Syntax:
<dialog open> Contents... </dialog>
Attributes: This tag accepts a single attribute open which is used to specify the
dialog element is active and the user can interact with the tag element.
Example:
<!DOCTYPE html>
<html>
<body>
<h1><dialog> tag</h1>
<!--This is an open dialog Tag-->
<dialog open>Welcome to GeeksforGeeks</dialog>
</body>
</html>
