This gives the browser instructions on how to control the page's dimensions and scaling. The The
|
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
</head>
<body>
<p>All meta information goes inside the head section.</p>
</body>
</html>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://itupto.com/uploads/images/2023-09-18-06-52-50-1_kx-imo7oddybajkxhlvarg.png" alt="Chania" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</body>
</html>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://itupto.com/uploads/images/2023-09-18-06-52-50-1_kx-imo7oddybajkxhlvarg.png" alt="Chania" width="460" height="345">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</body>
</html>
What is HTML - The Head Element | HTML - The Head Element |
How to create The HTML <head> Element | HTML - The Head Element |
How to create The HTML <title> Element in <Head> | HTML - The Head Element |
How to create The HTML <style> Element in <head> | HTML - The Head Element |
How to create The HTML <link> Element in <head> | HTML - The Head Element |
How to create The HTML <meta> Element in Head | HTML - The Head Element |
What is The HTML Viewport in Head | HTML - The Head Element |
How to use HTML Viewport in Head | HTML - The Head Element |
How to create The HTML <script> Element in head | HTML - The Head Element |
How to create The HTML <base> Element in head | HTML - The Head Element |
Full Example of HTML Viewport in Head | HTML - The Head Element |
Example with Viewport | HTML - The Head Element |
Example without Viewport | HTML - The Head Element |
Read Full: | HTML - The Head Element |
Category: | Web Tutorial |
Sub Category: | HTML - The Head Element |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 6 |
Ref on: | View |