Lesser used HTML

Alexa Anderson
5 min readAug 12, 2016

--

After spending the last year and a half working with ERB, React, handlebars, and various other ways to avoid the raw HTML grind, I’ve gone back to basics to sharpen my tool set.

To start, I worked through Shay Howe’s HTML & CSS Course 101. It took a while (hence the delay in posting), but while working through it with a fine tooth comb, I came across some information that I had forgotten about as well as picked up some new stuff. I’ll go over some of the highlights.

  • To open a link in a new window, set target attribute to “_blank”.
<a href="www.medium.com/@PopularDemand" target="_blank">My blog</a>
  • HTML automatically adds whitespace between adjacent inline/inline-block elements. To remove that whitespace, add a comment after the closing tag of the first element and before the opening tag of the next.
<section style="display: inline;">
First Element
</section><!--
Protip: Use this comment to explain the next section--><section style="display: inline;">
Second Element
</section>
  • Adding audio files.

I have never put much thought in embedding audio files into any of my sites because I want people to actually visit and enjoy them. Though I can see a game app as a decent use case.

Audio tags can take a few attributes: autoplay (autoplays the track), loop (loops the track), controls (displays playback controls to the user), and preload (loads in track data.) The tag can also take a src attribute, but because not all file formats are supported by each browser, it’s recommended to provide separate <source> tags with different file formats. The browser will check each tag until it finds one that works or gets to the default at the end.

<audio controls loop>
<source src="sickbeats.ogg" type="audio/ogg">
<source src="sickbeats.mp3" type="audio/mpeg">
<source src="sickbeats.wav" type="audio/wav">
Please <a href="sickbeats.mp3" download>download</a> the audio file.
</audio>
  • Descriptions Lists. Just when I thought the world of lists were limited to ordered and unordered.

Description lists are used for… listing descriptions of things. Is this at all useful? Maybe if you have a lot of terms to work through. I suppose maybe.

<dl>
<dt>Lingo</dt> <!-- description term -->
<dd> <!-- description -->
The vocabulary or jargon of a particular subject or group of people.
</dd>
<dt>Slang</dt>
<dd>a type of language that consists of words and phrases that are regarded as very informal.</dd>
</dl>
  • Forms are still highly customizable.

I’ll never stop learning about forms. The only new takeaway I got from this reading is the “disabled” attribute. This is applied to an element within a form and disallows the information within the element to be sent to the server (the input area will be grayed out). If you disable a fieldset, all elements within the fieldset will be disabled.

<label>
Kudos
<input type="text" name="kudos">
</label>
<label>
Complaints
<input type="text" name="complaints" disabled>
</label>
WHERE ALL THE FUN HAPPENS

Honestly, I learned a lot about CSS/CSS3, but I’ll limit my examples to 5 to mirror the HTML section.

  • Inline elements do not accept top and bottom margins. Top and bottom padding on inline elements may blend into surrounding elements.

In short…

display: inline-block;
  • Box-sizing. (I literally jumped for joy when I learned this.)

The box-sizing property allows you to declare whether the border/padding should be included in the declared width/height. True story: My first ever programming rage-quit came after I couldn’t get three divs (width: 33.3%; border: 2px solid black;) to float next to each other on a single line. I now know the reason:

The box-sizing property default to ‘content-box’ which means any width I give the element describes only the content; margin, border, and padding will be additional to the content, thereby making the FULL element’s display larger than I intuited.

The other options for box-sizing are ‘padding-box’ (includes any padding within width/height of element, but shrinks the content to accommodate) and ‘border-box’ (includes border and padding within width/height declaration.) Notes: Margin is never included. Browser prefixes are required.

div {
width: 33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
  • Clearfixing

Because floated elements leave the normal flow of a page, contain floats in a parent element that is in the normal flow of the document. Then clear the :before and :after pseudoelements of the parent to render the floats nice and contained. Shay Howe included some other code hacks to make sure this works on older browsers, so I will just copy his code. In this example, the parent element is “.group”.

.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
  • Shorthand declarations

CSS sugar.

/* Margin and Padding */
margin: 10px; /* all four sides */
margin: 10px 20px; /* top/bottom left/right */
margin: 11px 5px 10px 20px; /* top right bottom left */
/* font: font-style font-variant font-weight font-size/line-height font-family */
font: normal small-caps 400 14px/22px "Open Sans", sans-serif;
/* backgorund: color image position repeat */
background: #c1c1c1 url('background-image.png') 20px 10px no-repeat;

There are more.

  • Table cell borders and spacing

Table cell borders stacking on top of one another have always bugged me. Shay Howe has fixed that.

The ‘border-collapse’ property declares how to display table borders. When set to ‘collapse’, borders that touch default to only displaying the border of the <td> element. Coool. The other option is ‘separate’ which is the default.

If the border-collapse is ‘separate’, we can then declare how far apart the cells should be from one another with ‘border-spacing’

.condensed-table {
border-collapse: collapse;
}
.spread-table {
border-collapse: separate;
border-spacing: 5px 10px; /* horizontal spacing vertical spacing */
}

</>

Those were the main takeaways, though I’m sure if I were to go through it again in a year, I’ll learn some more new stuff. While my immediate plan is to continue on with React, templating, etc for my active projects, I will be going through Shay’s HTML & CSS Advanced Course in the future. His explanations and project based approach are exceptional.

That’s all from me for now.

Happy coding.

--

--