Portfolio

Carl James Trelfa

HTML

HTML is the main building block of the web - without it there simply would be no web pages.

All the HTML used on this site is valid HTML 5, as verified by the validator from W3C, the group responsible for web standards:

http://validator.w3.org/

The correct <!DOCTYPE> tag was used and all required elements are present and all tags are correctly closed:

HTML 5 Document

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>Carl James Trelfa Portfolio - Home</title>
    </head>
    <body>
        ... content ...
    </body>
</html>

HTML 5 Semantic Elements

I'm using some HTML 5 Semantic Elements in my page, mainly <header>, <article> and <footer>.

So instead of the following code using divs:

Header with Divs

<div class="header">
    <div class="logoHolder">
        <img src="img/portfoliologo.png" alt="Portfolio" />
        <h2>Carl James Trelfa</h2>
    </div>
</div>

it looks like this:

Semantic Header

<header>
    <div class="logoHolder">
        <img src="img/portfoliologo.png" alt="Portfolio" />
        <h2>Carl James Trelfa</h2>
    </div>
</header>

External CSS

I am using an external CSS3 style-sheet - the HTML contains no in-line styling, so it's easy to re-style our site from one place.  The actual HTML only contains the content, along with DIV tags for the layout, keeping it compact as possible.  The CSS actually uses SASS, but more on that in the CSS Section.

Keywords and Description

Additionally, each page has Keywords and Description dynamically added to the HEAD tag for SEO purposes. Search engines should have no problem figuring out what the pages on this site are all about.

Home > Technical Skills > HTML