30 HTML Snippets for the Most Frequently Used HTML Tasks

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>

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>

4 general HTML snippets

27. Add a line break to a button

You can put a line break tag in the middle of the text used for a button, or you can use the following HTML to do the same:

<input type=”button” value=”First Line Second Third”>

28. 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 –>

29. 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>

30. 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.

If you want to improve your HTML skills and learn more ways to make it do your bidding, check out Learn HTML. It’s a beginner-level course that’ll teach you all the common HTML tags and how to structure an HTML page.

To explore even more front-end development skills, check out Learn CSS and Learn JavaScript.

HTML & CSS Courses & Tutorials | Codecademy
HTML is the foundation of all web pages. It defines the structure of a page, while CSS defines its style. HTML and CSS are the beginning of everything you need to know to make your first web page! Learn both and start creating amazing websites.
Codecademy

Read More

Total
0
Share