One thing I am constantly going on about is the over-use of the div
tag. That was an option, back in the bad old days of teh interwebs. In fact, here we go again…
Story Time (gather 'round, you millennial kiddies!)
So, back when the internet was a brand-new thing, the original intent was for colleges and universities to share serious documents: thesis papers, graduate projects, research notes. So the original HTML spec included a lot of simple document formatting stuff: paragraphs, headers, tables. Lists. Not much else.
So, to get creative, early “web designers” were table jockeys. Early WYSIWYG editors for web pages did INSANE things with table layouts, nesting and funky cell splits and stuff, to forcibly position elements around the screen. Basically, given a practical and spartan presentation media, designers tried to pretty it up. And in early browsers, it worked (but if you could see the HTML behind it, your brain would melt).
Then we got DIV elements! And CSS positioning rules. And things were good. -ish. Well, better. With more block-level elements, designers could begin to create more reasonable content, and position things in ways that seemed to make a little sense. Sadly, WYSIWYG editors were still insanely stupid and complex, but those of us who knew better were hand-tooling. (;
Then came the latest iteration, the semantic web It was decided that it would be a great thing to be able to create meaningful content again, rather than a rapidly sinking boatload of div tags all over the darn place. So we were given FAR more robust content-based tags: article
, section
, header
, footer
, nav
, thead
, tbody
and like that. Tags that actually tell you more about their intent.
Not only did that make layouts themselves easier, but it made the HTML code backing the content far more useful. Now screenreaders, for example, can begin to get more intent-based tags (like figure
and figcaption
), and represent them in a meaningful way. Now, when looking at the code, I can see a MUCH smaller gap between designer and developer.
It has been an evolution, and it continues: Read all about it here https://en.wikipedia.org/wiki/HTML – but that DOESN’T include the shiny new HTML6 spec…
End of story time…
So here’s my point. You use div tags, like a LOT. Get out of that habit. For example, looking at your portfolio page, you use the nav
tag, then everything else is a div
. Use an article
to contain the whole thing, then section tags for each section. For example, something like:
<header>
<figure>
<img src='...'>
<figcaption>...</figcaption>
</figure>
<h1>Austin Krzciok</h1>
<h2>Aspiring Web Developer</h2>
<nav id='navbar'>
<ul>
<li class='nav-item'><a href="#welcome-section">Welcome</a></li>
<li class='nav-item'>...</li>
<li class='nav-item'>...</li>
...
</ul>
</nav>
</header>
<article class='portfolio'>
<section id='welcome-section'>
<h3>Welcome</h3>
...
</section>
<section id='project-section'>
<h3>Projects</h3>
...
</section>
<section id='contact-section'>
<h3>Contact me</h3>
...
</section>
</article>
<footer>
...
</footer>
Now, within those, you might find reason to use div
tags. And each of those will present as div tags. But they are far more semantic – they TELL you, in the tag name, their purpose.
That is the biggest comment I think I could give to you, or to anyone completing the web design curriculum. Look through your portfolio, and look at the actual HTML behind the page. Is it something that really distinguishes you from every other graduate of FCC, or any other training program? What can you do to make your sample projects stand out? How can you demonstrate that you are a forward-looking designer/developer?
Best way, IMHO, is by getting familiar with the direction the web is evolving. Get on the semantic web bandwagon.