Identifying HTML Elements from Sketch design

Question

Front-End dev here, forgive me if this has already been asked before. When coding HTML/CSS from a sketch design is there a way to identify what kind of html element corresponds to the sketch component?

When I export to HTML using Anima or similar, it makes almost everything a <div> element. Some sketch components are self evident, such as links <a> , <images> , <button> etc. When it comes to text for instance, is there any way to tell if it's a <div> , <span> , <p> element, etc etc? Do I just need to use my judgement in this case?

Any guidance on this would be welcome. Thanks!

Answer 1

A good tool to help you import the sketch design file is Desech Studio. This will create a clean html structure, but most likely if you do it manually, it will be slightly better. Elements are also positioned with css grid, not position absolute.

This is a good place to start, otherwise you have to do it manually by looking at how the content can be split into grids, and create the necessary grids. With experience you get the hang of it.