Posted on February 20, 2023 by Webfor It really doesn’t matter if you are new to using HTML and CSS or are a master, it is always nice to hear about some tips and tricks. And while you may already be familiar with them, a refresher is always helpful. The Webfor web development team is continually researching new HTML and CSS tips to streamline our development efforts. Here are a few of those unique and useful hacks that I hope can help developers of all levels. 5 HTML Tips and Tricks Here are 5 HTML Tips and Tricks that are helpful when developing websites or making code edits. Lazy Loading Attribute Accept Attribute Spellcheck Attribute Meta Description <figure> tag Lazy Loading Attribute Adding lazy loading attributes on media elements helps identify resources that are not critical and can be loaded when needed. This will enhance page performance by having the media elements load only when the user scrolls to them Accept Attribute Accept attribute allows us to specify which types of files the user can upload. Spellcheck Attribute The spellcheck attribute is used to check for spelling errors in the code, which can be very useful and help prevent errors from typos. Meta Description Adding meta descriptions into the head of the HTML document will have an indirect impact on search engine optimization. Meta description represents the text that appears beneath the site name on search engine result pages. The <figure> tag This can be confusing, but it’s different from the image tag. The image tag is embedded in the HTML document, while the figure tag is used to semantically organize the content of an image in the document. This can also be used to mark up a photo and can contain a <figcaption>. CSS Tips and Tricks Here are 5 Helpful CSS Tips and Tricks that can help streamline your development efforts. :nth-child () & :nth-last-child () Percentages or Viewport Units (Viewport Height / Viewport Width) ::before and ::after pseudo elements Position Absolute Testing Browser Compatibility :nth-child () & :nth-last-child () Using these selectors helps specify a single element in a group of elements that do not have specific classes. Percentages or Viewport Units (Viewport Height / Viewport Width) When defining spaces or element size, it is best practice to use percentages instead of absolute numbers. This helps with the site responsiveness on different size screens. ::before and ::after pseudo elements Allows you to insert content onto a page without it needing to be in the HTML. This content is still part of the element; it has been added to and will receive all the same formatting items. Position Absolute This is great for positioning the elements on your page. It has multiple options like static, sticky, and fixed to name a few. This gives more control over the elements and takes them out of the document’s normal flow. Testing Browser Compatibility Most older versions of Internet Explorer do not support many CSS functionalities. Therefore it is necessary to test the compatibility on real browsers. Some of these tips may seem very simple but can actually have a huge impact. As web developers, we will never know all the tricks for building websites but having a couple is better than none. I hope these are helpful to anyone who may not have known them before and a nice reminder to people who have not used these items recently.