7 Alternatives To The Div Tag In HTML - DEV Community
Có thể bạn quan tâm
DEV Community
FollowA space to discuss and keep up software development and manage your software career
Future
FollowNews and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.
Open Forem
FollowA general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here
Gamers Forem
FollowAn inclusive community for gaming enthusiasts
Music Forem
FollowFrom composing and gigging to gear, hot music takes, and everything in between.
Vibe Coding Forem
FollowDiscussing AI software development, and showing off what we're building.
Popcorn Movies and TV
FollowMovie and TV enthusiasm, criticism and everything in-between.
DUMB DEV Community
FollowMemes and software development shitposting
Design Community
FollowWeb design, graphic design and everything in-between
Security Forem
FollowYour central hub for all things security. From ethical hacking and CTFs to GRC and career development, for beginners and pros alike
Golf Forem
FollowA community of golfers and golfing enthusiasts
Crypto Forem
FollowA collaborative community for all things Crypto—from Bitcoin to protocol development and DeFi to NFTs and market analysis.
Forem Core
FollowDiscussing the core forem open source software project — features, bugs, performance, self-hosting.
Parenting
FollowA place for parents to the share the joys, challenges, and wisdom that come from raising kids. We're here for them and for each other.
Maker Forem
FollowA community for makers, hobbyists, and professionals to discuss Arduino, Raspberry Pi, 3D printing, and much more.
HMPL.js Forem
FollowFor developers using HMPL.js to build fast, lightweight web apps. A space to share projects, ask questions, and discuss server-driven templating
Dropdown menu Dropdown menu
Add reaction 
Like 
Unicorn 
Exploding Head 
Raised Hands 
Fire Jump to Comments Save Boost More... Copy link Copy link Copied to Clipboard Share to X Share to LinkedIn Share to Facebook Share to Mastodon Share Post via... Report Abuse In the early stages of learning how to structure an HTML document, it’s not uncommon to end up with what some developers call “div soup.” Need a content section your homepage? Wrap in a div! Building a sidebar? Div it up! Three column layout? Div, div, div!
There isn’t anything functionally wrong with writing HTML this way. Browsers will still be able to render your markup and display your content to users. The primary issue with heavy use of <div> tags is that they lack semantic meaning. Writing Semantic HTML gives your markup meaning to web browsers and screen readers, can help with SEO, makes it easier to debug code, and more.
According to the W3C:
“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.”
Ok, so what are these “more appropriate elements” that the W3C mentions? When HTML5 was released in 2014, it introduced some new section and grouping elements that web developers could use to enhance the semantic meaning of their markup.
Let’s explore a few of the more semantic alternatives to the <div> tag.
The Main Element
The main element indicates to browsers and screen readers which portion of your markup contains the main section of content on a given page. This can help with keyboard command access, zooming on mobile browsers, and more. It should be used only once per page.
<!-- other content --> <main role="main"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </main> <!-- other content --> Enter fullscreen mode Exit fullscreen modeThe Section Element
The section element is used to group content by theme and represents a section of a document or application. Sections can have their own header and footer elements, and there can be multiple section elements used on a single page.
<!-- other content --> <main role="main"> <section id="skateboards-intro"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </section> <section id="skateboards-history"> <h1>History of Skateboards</h1> <p>Skateboarding was born in the late 1940s or early 1950s.</p> </section> </main> <!-- other content --> Enter fullscreen mode Exit fullscreen modeThe Aside Element
aside elements are mainly used to represent part of a page containing related content to a given section. Asides are typically used as sidebars.
<!-- other content --> <main role="main"> <section id="skateboards-intro"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </section> <section id="skateboards-history"> <h1>History of Skateboards</h1> <p>Skateboarding was born in the late 1940s or early 1950s.</p> <aside id="timeline"> <p>1940s: Lorem Ipsum</p> <p>1950s: Lorem Ipsum</p> <p>1960s: Lorem Ipsum</p> </aside> </section> </main> <!-- other content --> Enter fullscreen mode Exit fullscreen modeThe Article Element
The article element can be used for portions of content that could stand on their own. Blog posts, newspaper articles, and user comments are some possible use cases the the article element.
<!-- other content --> <main role="main"> <section id="skateboards-intro"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </section> <section id="skateboards-history"> <h1>History of Skateboards</h1> <p>Skateboarding was born in the late 1940s or early 1950s.</p> <aside id="timeline"> <p>1940s: Lorem Ipsum</p> <p>1950s: Lorem Ipsum</p> <p>1960s: Lorem Ipsum</p> </aside> </section> <article class="blog-posts"> <header> <h2>Why I Love Skateboarding</h2> <p>By Tony Hawk</p> </header> <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p> </article> </main> <!-- other content --> Enter fullscreen mode Exit fullscreen modeThe Blockquote Element
The blockquote element represents content that is being quoted from an external source (a person, document, newspaper, case study, etc.). It is often accompanied by an internal <footer> element to attribute the quote to its source.
<!-- other content --> <main role="main"> <section id="skateboards-intro"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </section> <section id="skateboards-history"> <h1>History of Skateboards</h1> <p>Skateboarding was born in the late 1940s or early 1950s.</p> <aside id="timeline"> <p>1940s: Lorem Ipsum</p> <p>1950s: Lorem Ipsum</p> <p>1960s: Lorem Ipsum</p> </aside> </section> <article class="blog-posts"> <header> <h2>Why I Love Skateboarding</h2> <p>By Tony Hawk</p> </header> <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p> </article> <blockquote cite="http://www.tonyhawkshreds.com"> "Skateboarding is life. The rest is just details." <footer>- Tony Hawk</footer> </blockquote> </main> <!-- other content --> Enter fullscreen mode Exit fullscreen modeThe Nav Element
As the name implies, nav elements represent the navigation section of a document. The nav element should include the primary navigation links for a give page, application, etc.
<!-- other content --> <nav id="main-navigation"> <ul> <li><a href="#skateboards-intro"></a>Introduction to Skateboards</li> <li><a href="#skateboards-history"></a>History of Skateboards</li> </ul> </nav> <main role="main"> <section id="skateboards-intro"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </section> <section id="skateboards-history"> <h1>History of Skateboards</h1> <p>Skateboarding was born in the late 1940s or early 1950s.</p> <aside id="timeline"> <p>1940s: Lorem Ipsum</p> <p>1950s: Lorem Ipsum</p> <p>1960s: Lorem Ipsum</p> </aside> </section> <article class="blog-posts"> <header> <h2>Why I Love Skateboarding</h2> <p>By Tony Hawk</p> </header> <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p> </article> <blockquote cite="http://www.tonyhawkshreds.com"> "Skateboarding is life. The rest is just details." <footer>- Tony Hawk</footer> </blockquote> </main> <!-- other content --> Enter fullscreen mode Exit fullscreen modeThe Footer Element
The footer element represents the “footer” section of a document or section. In many websites, the footer element will contain contact and copyright information, a brief “about” blurb, social media logos and links, etc.
<!-- other content --> <nav id="main-navigation"> <ul> <li><a href="#skateboards-intro"></a>Introduction to Skateboards</li> <li><a href="#skateboards-history"></a>History of Skateboards</li> </ul> </nav> <main role="main"> <section id="skateboards-intro"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around.</p> </section> <section id="skateboards-history"> <h1>History of Skateboards</h1> <p>Skateboarding was born in the late 1940s or early 1950s.</p> <aside id="timeline"> <p>1940s: Lorem Ipsum</p> <p>1950s: Lorem Ipsum</p> <p>1960s: Lorem Ipsum</p> </aside> </section> <article class="blog-posts"> <header> <h2>Why I Love Skateboarding</h2> <p>By Tony Hawk</p> </header> <p>Skateboarding is the best! I love doing gnarly tricks 🤘</p> </article> <blockquote cite="http://www.tonyhawkshreds.com"> "Skateboarding is life. The rest is just details." <footer>- Tony Hawk</footer> </blockquote> </main> <footer> <p>© 2019 Skateboards, Inc.</p> <a href="https://twitter.com/@skateboards">Twitter Profile</a> <a href="https://www.facebook.com/Skateboards">Facebook Page</a> </footer> <!-- other content --> Enter fullscreen mode Exit fullscreen modeNow that we know about some semantically optimized alternatives to the div element, how do we know when to use each of them? And when (if ever) is it ok to still use div elements in our markup? HTML5 Doctor has a really handy flowchart to help answer that question:
Thanks for reading! If you’re interested in learning more about the fundamentals of HTML, CSS, and JavaScript, follow my Medium publication, Web Dev Basics. Ready to write some code? Sweet! Sign up for course and learn the basics of web development.
Create template Templates let you quickly answer FAQs or store snippets for re-use.
Submit Preview Dismiss Collapse Expand
lorenz1989 lorenz1989 
lorenz1989 Follow Digital Marketing, Content Writer, Blogger. - Location California
- Work Content Writer
- Joined Dec 14, 2022
- Copy link
- Hide
The suggestion below is from ChatGPT and was requested by me.
malzeri83 malzeri83 
malzeri83 Follow Greetings from north Italy! For any communication or just mutual following you are welcome at my Twitter! - Location Bergamo, Italy
- Work Technology projects
- Joined May 21, 2022
- Copy link
- Hide
The last question about browsers support. div is acknowledged everywhere and by everything. Anyway thanks for useful post!
Collapse Expand
Fenix Fenix 
Fenix Follow Building in Public | FLOSS ~ Copyleft heart ~@~ a.k.a. 'Don Hugo ;-) ' - Location Fediverse | Cyberspace
- Joined Feb 26, 2021
- Copy link
- Hide
Thanks for sharing, Zac
Some comments may only be visible to logged-in visitors. Sign in to view all comments.
Code of Conduct • Report abuseAre you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
Zac Heisey Follow I build things on the interwebs · Passionate about #vanillaJavaScript, #nonprofits, #teaching, #travel & #JAMstack✌️ - Education Nebraska Wesleyan University
- Joined Aug 7, 2017
We're a place where coders share, stay up-to-date and grow their careers.
Log in Create account Từ khóa » Html5 Alternative To Div
-
7 Alternatives To The
HTML Tag | By Zac Heisey - MediumSemantic HTML Guide – 10 Alternatives To Using Divs
What To Use Instead Of Div Elements In HTML5 - Stack Overflow
HTML5 Semantics: New Elements To Replace Div - MonsterPost
10 Alternatives To The Div HTML Tag - Soft CodeOn
7 Alternatives To The
HTML Tag - The Tech Platform9 Alternatives To The Div Tag To Improve Your HTML - YouTube