The New and Improved HTML

1 Leave a comment on paragraph 1 0 Near the end of the last class, there was a discussion about markup and why we use HTML in web design. I wanted to share a little about what I know then, but decided that a more detailed blog post would be more appropriate. A short comment on it in class wouldn’t scratch the surface. This is a large topic, so what I’m going to lay out is a short history of HTML and a little about how the newest version is being tailored for a more semantic web.

2 Leave a comment on paragraph 2 0 I work as a web developer and use HTML, JavaScript, and plenty of other web-based technologies on a daily basis. Through that and my time in undergrad a few years ago, I learned about the newest form of markup: HTML5.

3 Leave a comment on paragraph 3 0 For those that don’t know, HTML stands for HyperText Markup Language. I like to think of it as the girders or bones that hold a webpage together (the skin of which is the content and styling). On the technological level, HTML acts as a system of tags that tells the browser what to display for the user. Most browsers allow you to actually look at the front-end code. You can do this by right-clicking anywhere on the page and choosing “Inspect,” “Inspect Element,” or “View Source.” You’ll probably see a lot of <div> and <p>. Those are two of the most common tags.

4 Leave a comment on paragraph 4 0 Prior to HTML5, tags were mostly disconnected from what content they were around. For example, the body of an article would be within a <div> (the common divider tag – used to make sections out of the page) and each paragraph would have a <p> around it. However, the header at the top, the navigation bar on the side, the footer at the bottom, and every other aspect of the page would contain <div>’s and <p>’s. Using such nondescript tags put the onus on the content itself to explain what it was.

5 Leave a comment on paragraph 5 0 HTML5 brought a whole new set of tags to design. Instead of <div> to section off a page, you can use <section>; instead of <div> for a header, you can use <header>; the navigation bar is <nav>; an article is <article>; a fragment of code is <code>; and so on. You can see a full list of these tags at the Mozilla Developer Network. Now a tag can roughly explain what’s in the middle of it. Below is a basic example of the difference between the two methods.

6 Leave a comment on paragraph 6 0 HTML4:

7 Leave a comment on paragraph 7 0 <div> Brian’s Website </div>

8 Leave a comment on paragraph 8 0 <div>

<button> Home </button>

<button> Blog </button>

<button> About Me </button>

<button> Contact Me </button>

13 Leave a comment on paragraph 13 0 </div>

14 Leave a comment on paragraph 14 0 <div>

<div>

<p> Hello, welcome to my site. </p>

<p> This is designed with HTML4.1 </p>

</div>

19 Leave a comment on paragraph 19 0 </div>

20 Leave a comment on paragraph 20 0 <div> Created by Brian Hamilton </div>

21 Leave a comment on paragraph 21 0 HTML5:

22 Leave a comment on paragraph 22 0 <header> Brian’s Website </header>

23 Leave a comment on paragraph 23 0 <nav>

<button> Home </button>

<button> Blog </button>

<button> About Me </button>

<button> Contact Me </button>

28 Leave a comment on paragraph 28 0 </nav>

29 Leave a comment on paragraph 29 0 <main>

<article>

<p> Hello, welcome to my site. </p>

<p> This is designed with HTML5 </p>

</article>

34 Leave a comment on paragraph 34 0 </main>

35 Leave a comment on paragraph 35 0 <footer> Created by Brian Hamilton </footer>

36 Leave a comment on paragraph 36 0 The reason behind this change is the move towards the semantic web. The term was first used by Tim Berners-Lee fifteen years ago in an article of Scientific American. In it, he described the semantic web as “an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation.” From just that definition, you can see how prior versions of HTML worked against that idea. The idea is to interconnect the web, allowing for search engines and the like to more easily parse the website.

37 Leave a comment on paragraph 37 0 Unfortunately, I don’t exactly do as I preach. Most of my personal and work-related projects still use <div>. Old habits die hard. That sort of thing is just one of the hurdles a semantic web needs to get over in order to succeed in its mission.

38 Leave a comment on paragraph 38 0 There’s so much more to this and I’d recommend doing some more research on your own about the other benefits of using HTML5 that goes beyond the front-end design.

39 Leave a comment on paragraph 39 0  

40 Leave a comment on paragraph 40 0 Works Cited

41 Leave a comment on paragraph 41 0 “The Semantic Web Made Easy”. World Wide Web Consortium. n.d. https://www.w3.org/RDF/Metalog/docs/sw-easy

This entry was posted in Uncategorized. Bookmark the permalink. Both comments and trackbacks are currently closed.

5 Comments

  1. Claire Balani
    Posted September 19, 2016 at 3:22 am | Permalink

    This is really interesting and made me want to abandon ! My most recent web development class (run by Girl Develop It, a national organization that runs low-cost tech classes) only covered HTML4. Would you recommend that academics starting to learning web development from scratch start with HTML5?

    • Posted September 21, 2016 at 12:36 am | Permalink

      I think that’s the best practice. Generally, it’s always good to start with the most recent iteration of any programming language (with the exception of Python 3 vs Python 2). This stops you from getting stuck in your habits like me and keeps your projects up to date.

      Luckily, your class is still very useful! Making the jump to 5 from 4 shouldn’t be any problem at all.

      • Claire Balani
        Posted September 21, 2016 at 7:05 pm | Permalink

        Thanks for your reply! Now I’m interested on your take on Python 2 vs 3? Is it still ok to start learning Python 2 in 2016? For example, I’ve read (just on the internet) that using the book Learn Python the Hard Way is a no-no in part because the author hasn’t updated his lessons to 3.

        (Coincidentally for anyone interested, Girl Develop It is actually running an HTML5 class: http://www.meetup.com/girldevelopit/events/234180248/)

        • Posted September 22, 2016 at 4:27 pm | Permalink

          You’ll get a few different answers to this. When I first started using Python, Python 3 was the no-no because it wasn’t widely supported by third-party libraries. But that was years ago and we’ve gotten to a point where most support it now. In my opinion, there’s nothing wrong with starting with 2, since there aren’t too many important differences. In fact, most of the big changes you can still do with 2. The only thing to keep in mind is that it’s a legacy now and won’t ever be updated again; you’ll have to move to 3 eventually.

          I seriously recommend Learn Python the Hard Way! He does a good job at moving slowly and explaining concepts clearly (a lot of software developers have a problem with this, for some reason). That’s actually what I used to brush up before the interview for the job I have right now. It will get you started on the path to learning the language. Yes, it will be outdated in some areas, but all that matters for a beginner is getting down the concepts of object-oriented programming. You’re not going to be building out a new operating system that will need years of endless support on the first day.

  2. Posted November 29, 2017 at 11:56 am | Permalink

    wow very nice post . thanks a lot for sharing. good job

Additional comments powered byBackType

  • Archives

  • Welcome to Digital Praxis 2016-2017

    Encouraging students think about the impact advancements in digital technology have on the future of scholarship from the moment they enter the Graduate Center, the Digital Praxis Seminar is a year-long sequence of two three-credit courses that familiarize students with a variety of digital tools and methods through lectures offered by high-profile scholars and technologists, hands-on workshops, and collaborative projects. Students enrolled in the two-course sequence will complete their first year at the GC having been introduced to a broad range of ways to critically evaluate and incorporate digital technologies in their academic research and teaching. In addition, they will have explored a particular area of digital scholarship and/or pedagogy of interest to them, produced a digital project in collaboration with fellow students, and established a digital portfolio that can be used to display their work. The two connected three-credit courses will be offered during the Fall and Spring semesters as MALS classes for master’s students and Interdisciplinary Studies courses for doctoral students.

    The syllabus for the course can be found at cuny.is/dps17.

  • Categories

Skip to toolbar