I would like to know if it's a good practice or legal to use non-standard tags in an HTML page for certain custom purposes.

For example:


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
  consequat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu,
  vel pulvinar odio magna suscipit mi.


I want to highlight "consectetur adipiscing elit" as important and "nisi arcu accumsan arcu" as highlighted.

So in the HTML I would put:


  Lorem ipsum dolor sit amet, <important>consectetur adipiscing
  elit</important>. Nullam consequat, felis sit amet suscipit laoreet,
  <highlighted>nisi arcu accumsan arcu</highlighted>, vel pulvinar odio
  magna suscipit mi.


and in the CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}


However, since these are not valid HTML tags, is this ok?

No, this is not a good practice. You should use already semantic, meaningful tags -- perhaps <em> in this case -- and apply CSS styles to achieve your design requirements. 