Snippets are helpful when you’re building a web page and don’t want to reinvent the wheel. These small blocks of code can help speed up your front-end development time by providing you with tried-and-true methods of getting the results you want.
There are somewhere in the neighborhood of 140 HTML tags, depending on whether you check the Mozilla Developer Network or HTML.com. That’s a lot to remember. So, to give you a hand, we’ve listed 30 commonly used HTML code snippets below for when you just can’t recall what you need for your page.
7 HTML snippets for forms
1. Restrict uploads to a specific mime type
The accept attribute was added to the HTML5 specification to allow you to designate which type of files can be uploaded in a form. You can specify which files are allowed with a comma-delimited list. The field below allows gifs, jpegs, and pngs:
<input type="file" name="my_image" accept="image/gif,image/jpeg,image/jpg,image/png">2. Add autocomplete to an input without JavaScript
The HTML5 datalist element allows you to add autocomplete values to an input field.
<input name="frameworks" list="frameworks" /> <datalist id="frameworks"> <option value="React"> <option value="Angular"> <option value="Vue.js"> <option value="Ember.js"> </datalist>3. Add email validation to a field
The input field below will make the email address required and validate it:
<input type="text" title="email_address" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />4. Add Google Places search to a form
The code below will allow a user to enter their address and get directions to the location in the hidden address field:
<form action="http://maps.google.com/maps" method="get" target="_blank"> <label for="saddr">Enter your location</label> <input type="text" name="saddr" /> <input type="hidden" name="daddr" value="1600 Pennsylvania Avenue NW, Washington, DC 20500" /> <input type="submit" value="Get directions" /> </form>5. Turn off autocomplete in an input
This HTML code will turn off a browser’s autocomplete features so you can use your own:
<input name="query" type="text" autocomplete="off"/>6. Post a form to a new window/tab
The code below will launch a new window when you submit the form:
<form action="#" method="post" target="_blank"> ... </form>7. Add a Google search form for your site
This code will add a form to your site that will search only your site in Google:
<form action="http://www.google.com/search" method="get"> <fieldset> <input type="hidden" name="sitesearch" value="yoursite.com" /> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> </fieldset> </form>5 HTML snippets for links
8. Create phone links
Because people might visit your site from a mobile phone, it’s good to link all phone numbers so they can dial the number just by clicking the link. Here’s how you do that:
<a href="tel:1-888-555-5555">1-888-555-5555</a>9. Create SMS links
You can also create a link that takes users to their text messaging app:
<a href="sms:1-888-555-5555">Send Text Message</a>10. Create email links
Since the names for links in HTML don’t follow the same pattern, it can be hard to remember how to create an email link. Here’s how you do that:
<a href="mailto:me@mysite.com">Email Me</a>11. Open a link in a new window/tab
This type of link is handy when you don’t want users to completely leave your site when they click on a link:
<a href="http://google.com" target="_blank">Open Google in a new window/tab</a>12. Hide the url of a link
This code will hide the url of the link when it’s hovered over:
<a href="hiddenurl" target='blank' onMouseOver="self.status='displayed_url'; return true;" onMouseOut="self.status='';">Label</a>7 HTML snippets for the head section
13. Prevent a page from indexing
Sometimes you don’t want your page to show up in Google. Here’s how you stop a search engine from indexing a page:
<meta name="robots" content="noindex, nofollow"> <!-- Just for Google --> <meta name="googlebot" content="noindex, nofollow">14. Load JavaScript asynchronously
If you load the JavaScript on a web page asynchronously, the page will load much quicker. Here’s how you do that:
<script src="https://mysite.com/script.js" async></script>15. Make your page responsive
The following meta tag will tell browsers to render the width of a page at the width of the screen rather than zoom out:
<meta name="viewport" content="width=device-width, initial-scale=1">16. Redirect a page to another
When you add the code below to the head of an HTML page, it’ll redirect to Google after five seconds:
<meta http-equiv="refresh" content="5;url=http://google.com/" />17. JavaScript fallback snippet
The code below will first try to load jQuery from the remote url, and if that fails, will use the local file:
<script src="//code.jquery.com/jquery.min.js"></script> <script>window.jQuery || document.write("<script src='js/jquery.min.js'></script>")</script>18. Define a favicon
If you want to define a favicon for your site, you don’t have to name it favicon and upload it to a specific directory. You can specify it in the head of your HTML.
<link rel="shortcut icon" href="/favicon.ico">19. Define the Apple touch icon
You can also define the icon for Apple in the head of your HTML:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">3 HTML snippets for text
20. Add a tooltip to text
You can use fancy JavaScript to do this, or you can just use HTML like below:
<span title="This is the tooltip.">Hover your mouse here</span>21. Lorem ipsum paragraph
Here’s a paragraph tag pre-filled with lorem ipsum text to help you test how a page looks with content:
<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>22. Preserve the formatting of code
If you want code to look like code instead of being formatted like the rest of your page, surround it with code tags.
<code> a = 6; b = 9; c = 12; </code>2 HTML snippets for images
23. Create a spacer gif without a file
Every now and then, you might need a 1px spacer gif to make a style look right. Here’s how you can do that without adding another image file to your project:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">24. Add a background image to text
You can use HTML like the one below to add a background image to a specific section of your text:
<span style="background-image: url(https://www.mysite.com/Background-Image.jpg); font-size: 20pt">I have a background.</span>2 template snippets
25. HTML5 template
This code snippet will give you a valid HTML5 page as a starting point for your project:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body> </body> </html>26. Table template
Sometimes it’s hard to remember all the tags that go into creating an HTML table. Here’s a template for that:
<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>3 general HTML snippets
27. Add comments to HTML
Comments help you remember why you did something in your code. Here’s how you add a comment to HTML:
<div id="main"> <p>Content</p> </div> <!-- END main -->28. Embed a video in an HTML page
Use code like the following to embed a video in HTML:
<video poster="images/preview.png" width="800" height="600" controls="controls" preload="none"> <source src="media/my_video.mp4" type="video/mp4"></source> </video>29. Embed audio in HTML
This code will embed an audio file in an HTML page and allow users to play it:
<audio controls="controls" preload="none"> <source src="audio/my_music.mp3" type="audio/mpeg"> </audio>Learn more about HTML
Hopefully, the HTML snippets above helped you complete your project and taught you more things you can do with HTML. HTML is a simple language, but it’s very flexible. Some of the things you can do with it are pretty powerful
Reblog: https://www.codecademy.com/resources/blog/29-html-snippets/
المشاركات
