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:
2. Add autocomplete to an input without JavaScript
The HTML5 datalist element allows you to add autocomplete values to an input field.
3. Add email validation to a field
The input field below will make the email address required and validate it:
[email protected][^@]+.[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:
5. Turn off autocomplete in an input
This HTML code will turn off a browser’s autocomplete features so you can use your own:
6. Post a form to a new window/tab
The code below will launch a new window when you submit the 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:
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:
1-888-555-55559. Create SMS links
You can also create a link that takes users to their text messaging app:
Send Text Message10. 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:
[email protected]">Email Me11. 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:
Open Google in a new window/tab12. Hide the url of a link
This code will hide the url of the link when it’s hovered over:
Label7 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:
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:
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:
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:
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:
")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.
19. Define the Apple touch icon
You can also define the icon for Apple in the head of your HTML:
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:
Hover your mouse here21. Lorem ipsum paragraph
Here’s a paragraph tag pre-filled with lorem ipsum text to help you test how a page looks with content:
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.
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.
a = 6; b = 9; c = 12; 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:
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:
I have a background.2 template snippets
25. HTML5 template
This code snippet will give you a valid HTML5 page as a starting point for your project:
Untitled 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:
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:
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:
Content
29. Embed a video in an HTML page
Use code like the following to embed a video in HTML:
30. Embed audio in HTML
This code will embed an audio file in an HTML page and allow users to play it:
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.
