Clarity of Code

• When designing a complex website containing many <div> tags, assigning a unique name to each tag will make it clear what the purpose of the tag is. For instance, you may use four <div> tags for the basic structure of your page - a header, a footer, a main content block and a sidebar. Naming each <div> will allow you to quickly scroll through the code and determine which <div> is which without having to look at each <div>'s content.
  
  

Separating Styling and Content

• Naming each <div> tag allows you to refer to them from within a CSS stylesheet. This, in turn, allows for the separation of styling and content. Although you may style each <div> tag within the HTML document using the "style" attribute, doing so will add clutter to the document and require you to scroll through the entire page every time you want to change something; using a single CSS file, on the other hand, will make it easier to modify your page's layout whenever you want to.
  
  

Dynamic Content Placement

• When using client-side scripting such as JavaScript, you may want to insert code that alters the look of certain page elements or dynamically inserts content in specific locations. The use of named <div> tags is what allows such code to identify the elements to alter and the locations to insert content; even if you have no plans to use this kind of coding when originally designing your website, naming <div> tags immediately will make future implementation simpler.
  
  

Considerations

• The name of each <div> tag must be unique; names must start with a letter and may also include digits, hyphens, colons, periods and underscores. Keep <div> names short and informative; base them on the content of the <div> rather than the current styling, as the styling may change in the future but the content most likely will not. Although <div> names are case-sensitive, and as such you may have a <div> named "familypets" and one named "FamilyPets," the use of similar names for different <div> tags may lead to future confusion.