The div container is a generic block-level element used within HTML (Hypertext Markup Language) to define a division or section within an HTML document. A markup language simply describes the document's content and structure. For example, div containers can define the header or a specific paragraph within a Web page. Surrounding a section of HTML code with div containers formats that section with specific style elements that only apply to that section and not the rest of the HTML code. Embedding a page in div containers makes the code more manageable by grouping the HTML document into smaller sections.
- Skill level:
Other People Are Reading
Open the HTML document for the page you want to embed in div containers. This may be done via your online dashboard, as with WordPress, or through your desktop HTML editing software.
Locate the beginning of the HTML code that you want to group together. This can be any element of the page such as the entire page, header or footer; a paragraph; embedded video; or any other element that is visible on the actual Web page. Place your cursor at the beginning of this line of HTML and press the enter button to create a blank space above the code. Type <div> into this space.
Locate the end of the code for the specific section you want to embed with the <div> tag. Place your cursor at the end of the code and press the enter button to create a blank space below the code. Type </div> in the blank space to close the div tag code. Any code editing done within these tags will pertain only to this section, leaving the rest of your page unchanged.
Tips and warnings
- The div tag also supports specific attributes that affect the appearance of elements within the tags. These attributes include class, dir, id, lang, style, title, xml:lang. Class specifies a class name for an element. Any CSS elements added to your style sheet with that class name will apply only to that class name div tag. Dir specifies the direction of text, id gives a specific element within a div tag a name, while lang and xml:lang define the language displayed for text within an element. Style and title define specific style elements for a div section and give extra information about an element.
- For example, sample text would call out the text within the div tag to be black.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for