What are semantic tags, and why should I use them?
Semantic tags are HTML tags that can be used in place of more generic non-semantic elements to improve readability and clarity of code. for example, instead of having a web page with only <div> and <span> tags, you could add a <header> tag to your page to indicate a section that will probably go at the top of the page. Or you could use a <form> or an <article> tag to contain such elements on your page. Semantic tags may not affect the look of the page when it is rendered, but It makes your code easier to navigate--either for yourself, collaborators, teachers, tutors or successors.
How can I create several elements on a page that will be styled in the same way, but are separate elements?
This can be done by giving all the desired elements in your html document a class, as shown below. <p class = "myParagraph"></p> All elements with the class name myParagraph--regardless of whether or not they are <p> tags will take on the same styling. If you wish to style all elements of the same type on the page(ex.all your <h1>) you need not add a class, you can simply style the element. keep in mind that class styling will override element styling, and ID styling will override class styling. IDs should only be given to one item on the page, and should only be used to target that single element.
How can I create a responsive web-page or app that is attractive and functional across multiple devices(desktop, laptop, tablet, mobile, etc)?
Media Queries are a good way to do this. For each device size, you can create different media queries that specify changes in styling for each size device. In addition to media queries, you can use flexbox to ensure that the content of your page flows and changes as the size of the window does, and when specifying the size of an element use units such as em or percentages which are relative and dynamic rather than static like px.