// Tutorials

Intro to Jekyll - Part 1

Nov 21, 2014

Lesson plan for creating custom layouts with Jekyll

tags we'll use:

<main><main>
<header></header>
<footer></footer>
<nav></nav>
<ul></ul>
<li></li>
<a></a>
<p>

Today we're going to writing a buch of stuff that looks like this:

<someTagNameHere somevalue="something">Blah, blah, blah...</someTagNameHere>

These are HTML Elements

Anatomy of an HTML element:

<a href="index.html" class="nav-link">Home</a>

HTML elements are defined by special sequences of text called tags. Most HTML elements have an opening tag and a closing tag. Opening tags mark where an element begins, and closing tags mark where an element ends.

Elements come in types which are defined by the opening and closing tags. In our example above, in simplest form, our element would look like:

<a></a>

<a> is our opening tag and </a> is our closing tag.

The element's type is 'a'. Just so you know, 'a' actually stands for 'anchor', so it's an anchor element. Anchor element are used to create links to other pages, or other parts of the same page.

'href="index.html"' and 'class="nav-link"' parts are attributes. The go inside the opening tag and are used to define certain ways we want the element to behave.

Just so you know, there are some elements that don't have closing tags. They are just made of one tag and are written like this:

<img src="kitty.gif"/>
<input type="text"/>

TODOS:

Links:

Where and when to use the 'nav' element MDN HTML Element reference