¶ 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