How To Create A Box in HTML?
Last Updated :
20 Jan, 2025
In HTML, you can create a "box" using several techniques, such as using <div> elements and styling them with CSS. These boxes can be used for various purposes, such as creating layouts, buttons, or sections within a webpage.
Method 1. Div Element with CSS
The <div> element is a block-level container in HTML used to group and organize content on a webpage. It doesn't have any default styling or meaning, making it flexible for creating layouts like sections or columns. By using CSS, you can style the <div>, set its size, colors, and margins, and even create complex layouts with tools like Flexbox or CSS Grid.
Syntax:
<div class="box">Content goes here</div>
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="box">This is a box created using a
<div> element.
</div>
</body>
</html>
Output:
Using the div Element with CSSMethod 2. Span Element with CSS
The <span> element is an inline HTML container used to style or group small parts of content, like text. It doesn't affect the layout and is mainly used with CSS to apply specific styles to portions of content within other elements.
Syntax:
<p>This is a <span style="color: red;">red</span> word.</p>
HTML
<html >
<head>
<style>
.box {
width: 300px;
height: 200px;
background-color: lightblue;
border: 2px solid blue;
padding: 20px;
margin: 20px;
position: relative;
}
.highlight {
position: absolute;
bottom: 10px;
left: 10px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<p>This is a box with a <span class="highlight">highlighted text</span> inside it.</p>
</div>
</body>
</html>
Output:
Span Element with cssMethod 3. HTML5 Semantic Elements
HTML5 semantic elements are tags that clearly describe their meaning in both the structure and content of a webpage.
These elements help improve the accessibility, SEO, and readability of a webpage by defining specific sections, such as headers, navigation, and footers. Examples include <header>, <footer>, <article>, <section>, and <nav>.
Syntax:
<section class="styled-section">Section content</section>
HTML
<html>
<head>
<style>
.box {
width: 250px;
padding: 15px;
background-color: green;
border: 1px solid #333;
margin: 20px auto;
}
header, footer {
background-color: #f1f1f1;
padding: 5px;
text-align: center;
}
section {
padding: 10px;
background-color: #fff;
}
article {
padding: 10px;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="box">
<header>
<h1>Box</h1>
</header>
<section>
<p>This is a section inside the box.</p>
</section>
<article>
<p>This is an article inside the box.</p>
</article>
<footer>
<p>© 2025</p>
</footer>
</div>
</body>
</html>
Output:
Semantic elements boxMethod 4. CSS Flexbox and Grid
Flexbox is a layout system in CSS that helps you arrange items in a row or column. It makes it easy to align, distribute space, and control the positioning of elements inside a container, either horizontally or vertically.
CSS Grid is a layout system that allows you to create complex two-dimensional layouts. It lets you control both the rows and columns of the container, making it perfect for building grid-based designs with precise control over positioning.
Syntax:
<div class="flex-container">
<div class="flex-box">Flexbox item 1</div>
<div class="flex-box">Flexbox item 2</div>
</div>
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgrey;
padding: 10px;
}
.flex-box {
width: 100px;
height: 50px;
background-color: coral;
border: 2px solid brown;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="flex-container">
<div class="flex-box">Item 1</div>
<div class="flex-box">Item 2</div>
</div>
</body>
</html>
Output:
Using the CSS Flexbox and Grid
Similar Reads
How to Create a Checkbox in HTML?
The checkbox is the HTML form element that lets users select one or more options from predefined choices. It can often be used when a user selects multiple items in the list. Checkboxes can be checked or unchecked, and they are created using the <input> tag with the type attributes set to the
3 min read
How To Add Border In HTML?
Adding Borders to HTML elements is a common way to enhance the presentation and layout of web pages. Borders can be added to divs, paragraphs, images, and tables to separate or highlight content visually. CSS can provide several properties to customize the borders, such as color, style, and width.Th
5 min read
How to Create Table Border in HTML ?
In HTML, we can represent the data in the tabular format by using the <table> tag. We can customize the table by creating a border with different widths and colors. Below are the approaches to create a Table Border in HTML: Table of Content Using HTML Table Tag AttributesUsing HTML Inline Styl
2 min read
How to Create Table in HTML?
HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def
3 min read
How to create a dialog box or window in HTML ?
In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5. Syntax: <dialog open> Contents... </dialog> Example 1: html <!DOCTYPE html> <html>
1 min read
How to Create Frames in HTML?
Frames in HTML allow you to divide a browser window into multiple sections, where each section can load a different HTML document. This technique was once popular for creating complex layouts, but it is now considered outdated due to several limitations and accessibility issues.What are Frames in HT
2 min read
How to Create a Box Shadow in CSS ?
A box shadow in CSS is a visual effect that adds a shadow to an HTML element, creating a sense of depth and dimension. It is a styling technique commonly used to enhance the visual appearance of elements on a webpage. Below are the approaches to creating a box shadow in CSS: Table of Content Using b
2 min read
How to Add GIF in HTML?
GIFs (Graphics Interchange Format) are the popular image format that supports both animated and static images. Adding the GIFs to the HTML document enhances the visual appeal and the user interaction of the web pages. They are commonly used for loading animations, fun illustrations, or visual explan
3 min read
How to create an inline frame using HTML5 ?
In this article, we will create an inline iframe by using a <iframe> tag in a document. It represents a fixed rectangular area within the document in which the browser can display a separate document along with scroll bars and borders. Inline frames are used to embed another document within th
1 min read
How to Create a Tooltip with only HTML?
A tooltip is a small box that appears when a user hovers over an item on a website or software application. This article discusses the importance of creating simple, accessible tooltips in web design without depending on JavaScript or CSS frameworks. We will use only HTML elements, specifically titl
1 min read