Exercise
Taking what we have learned in this chapter, open up your index.html page and have a look through what you have written so far. Let’s group together the code from each section into separate divs. Wrap your div tags around the elements you have created so far into logical groupings based on the section title (forms, images, etc). Grouping together related content is key to keeping your website content organized and easily targeted. Experiment with adding more divs and spans within your new divs around individual elements
To mark the end of this section’s coverage of concepts, we find ourselves looking at element identifiers; this is where web design really comes alive. Element identifiers are how we target elements on our page. They help us to define areas of our page, which in turn allows us to target and style those areas as per our requirements. What you are about to learn is one of the most useful features of HTML and opens up the doors to more exciting possibilities when styling and targeting content.
We use an id identifier to define a unique element in our webpage. Ids are placed on elements where the content is purely unique and only used once across the webpage. For example, a logo would typically be given an id, as there is only one logo on a page, and it is a unique piece of content. Another example might be if you were to have a webpage with a list of products. Each product is unique and therefore could have a unique id relating to its product number to allow us to locate each product easily. Ids are attributes, and as such we assign them in the exact same way we have assigned all of our attributes in the previous chapters, inside the opening tag.
Because ids’ names tend to be quite descriptive in nature – to help us remember exactly what content we are defining – it is common to name ids with a phrase. For example we might want to identify a sidebar that sits on the left of the page by calling it ‘left sidebar’, however, id names cannot have any spaces in them, so as a best practice in web development, we tend to hyphenate the word, replacing the spaces hyphens. Therefore, with in our example ‘left sidebar’, our identifier would become ‘left-sidebar’. Let’s see this in action: