Lesser used HTML

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 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>

---

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 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.