Is div still a div?
Milos Protic

Milos Protic @proticm

About: I'm a passionate tech guy

Location:
Novi Sad
Joined:
Oct 21, 2018

Is div still a div?

Publish Date: Sep 16 '19
8 10

Is it just me, or does anyone else dislike the fact that we are close to the point where div is not a div anymore? What are your thoughts about where web development is heading?

Comments 10 total

  • Lucas H.
    Lucas H.Sep 16, 2019

    I don't understand the question. Some context?

    • Milos Protic
      Milos ProticSep 16, 2019

      The context would be JSX, and it's popularity. Developers write something that looks like HTML, but it's not HTML.

  • anpos231
    anpos231Sep 16, 2019

    Div is still div :P
    If you misuse div then you are not doing your work properly.

    • wowrodney
      wowrodneySep 16, 2019

      I agree. I have not done much with react, so can't way in there, but custom elements have been around for a while. As long as we as designers and devs still build contextual and well crafted code all should be fine. :)

    • Mike Austin
      Mike AustinMay 29, 2020

      divs and spans are out–they're too low level. I prefer React Native for Web, which feels more like developing for iOS or Android, the JSX feeling more like programmable XML. Sure, there are divs and spans (and h*), underneath, but those are the implementation details.

  • 🦄 Sebastiano
    🦄 SebastianoSep 16, 2019

    In case we're talking about JSX

    For me it's absolutely fascinating how things evolve. What you wrote about is an example of how something animate arises from inanimate things. Earlier, some "dead" elements such as the aforementioned div were available to developers. These days the community has decided that we use reactive components to build the application.

    Just in case someone has a boring Monday 😅

    // 😉 Place me different places in your app and I promise to work
    // ❤ I'm fascinating inside
    // 🔨It's super easy to move me around your application structure
    // ...
    <MenuBar/>
    
    // 👋 Click one of the buttons that I `render()` to make me fly away from you
    <Dragon/>
    <Dragon/>
    
    // There are different species of course 😊
    // 🔥 My buttons are red
    <FireDragon/>
    
    // 💪 Every my button is disabled by default and you cannot change it...
    <DarkDragon/>
    
    // 🤗 You can put elements in me and I will make them more wonderful
    // 💾 I save myself (my state) in `localStorage` and in the clouds (aws) when you accidentally close the application
    <AwesomeNotes>
        <h1>My awesome adventure</h1>
        <div>Lorem ipsum</div>
        <textarea>Lorem ipsum</textarea>
        <p>Note created {timestamp} in {location}</p>
    </AwesomeNotes>
    
    <MagicPanel rules={[dragonsAllowed: false]}>
        <RichMenuItem/>
        <RichMenuItem/>
        <RichMenuItem/>
        {/* Ooppsss... 😂 */}
        <DarkDragon/>
    </MagicPanel>
    

    I know it is a bit abstract answer but it was supposed to be 😸.

    • Milos Protic
      Milos ProticSep 16, 2019

      Yes, we are talking about JSX :)

      Do note that div is just an example element, the title is an abstract assumption that we no longer write normal good old HTML.

      I mean, since React team introduced the JSX (as far as I know), our components do contain the word div but contextually it is not. It gets compiled to JavaScript that creates the div. So basically we have an extra step comparing to the old ways of doing things. I cannot decide whether this (everything is JavaScript) is good or bad, considering that it's really powerful and useful for templating.

      • Azizi Yazit
        Azizi YazitSep 18, 2019

        We should use semantic HTML over div like Article, Nav, Header, Section and many more. Its super hard to debug JSX when everything is just a div.

  • Abhinav Kulshreshtha
    Abhinav KulshreshthaNov 2, 2019

    div is still a div.
    When you need an article, use article. When you need a section, use section. But when you just need a block container to arrange common stuff, for UI purposes, when a grouping elements does not need to convey semantic message. Use div.

Add comment