Tags for Styling

Use <div> and <span> for styling

Once our UI is laid out with semantic tags, providing a holder for each element, the next step is to actually style those views. In a subsequent chapter, we’ll talk about CSS, but to make the point about <div> and <span>, let’s create a design problem we can’t solve by styling the existing semantic tags. Our widget show page is just a semantic markup right now. Suppose our designer wants the rating section to look like the mockup below:

When we try to style the view, we’ll eventually hit a wall preventing us from completely achieving this design without adding more tags. Let’s see that in action. First, because we have a new element, we need to add that using a semantic tag before styling. We’ll use a <p> tag at the bottom of the existing <section>: