Skip to content

html_snippets.md

Latest commit

 

History

History
93 lines (75 loc) · 1.72 KB

html_snippets.md

File metadata and controls

93 lines (75 loc) · 1.72 KB

HTML

HTML Template structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Link to an external CSS file

<link rel="stylesheet" href="styles.css">

Link to an external JavaScript file

<script src="script.js"></script>

Meta description

<meta name="description" content="Page description here">

Meta keywords

<meta name="keywords" content="keyword1, keyword2, keyword3">

Favicon

<link rel="icon" href="favicon.ico" type="image/x-icon">

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML comment

<!-- This is a comment -->

Google Maps

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3223..."> </iframe>

CSS style

<p style="color: blue; font-size: 18px;">Styled Text</p>

Script tags

<script> // JavaScript code here </script>

HTML5 canvas

<canvas id="myCanvas" width="200" height="100"></canvas>

Audio and Video embeds

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Font awesome icons

html <i class="fa fa-heart"></i>

Facebook share button

<div class="fb-share-button" data-href="URL_TO_SHARE" data-layout="button"></div>

Twitter / X share button

<a href="https://twitter.com/share" class="twitter-share-button" data-url="URL_TO_SHARE" data-text="Tweet Text">Tweet</a>