practicelaw


Search practiceblawg posts:

Did you know there is more to practicelaw than just forms?  practicelaw is designed to be a repository of resources intended to help your practice.  Similarly, the MSBA’s practiceblawg is a blog for the Association to share with you how the MSBA can help you improve your efficiency and grow your practice.  The MSBA offers members a number of products and services and is always looking for ways to better serve its members and provide greater value.

Got questions, complaints, suggestions, or any thoughts in general?  Let us know: feedback@mnbar.org

An HTML primer for lawyers

by Joe Kaczrowski | Apr 17, 2015

A recent study by the Florida Bar Association found that almost 40% of lawyers plan to update their websites in 2015. Most of today's CMS platforms include a WYSIWYG design interface, meaning you can create and maintain an elegant website without having to speak some "secret" language. However, having some basic fluency in HTML can still be beneficial.

As with any industry web development has its own "language" and acronyms, including three used in the opening paragraph.  CMS stands for "content management system," but it basically refers to the tool you use to update and maintain your webpages.  WYSIWYG is "what you see is what you get," and describes an interface that lets you create pages that will look exactly like how you create them (Microsoft Word is another example here).  Finally, HTML, which stands for hypertext markup language, and is the language used to create webpages.

HTML is a powerful language and can appear hard to read at first glance, but it can be fairly easy to decipher with a little background information. HTML relies on "tags" that tell web browsers how to display your content. With a WYSIWYG interface, these tags are hidden from you and added by the tool behind the scenes.

Tags appear in the HTML code as letters or words wrapped with 'less than' and 'greater than' symbols ("<" and ">").  Tags also generally come in two varieties: opening tags and closing tags, the latter of which also includes a "/" symbol.  (Not to muddy the issue, but there are a few special tags that essentially combine the opening and closing tag with no text in between; a few examples are also included below.)

There are a number of good resources online for those looking for more comprehensive guides or tools.  One such example is W3Schools.com.  Another useful trick is to look at what other pages do.  The code for webpages is public, for the most part, and you can view that code through your browser; most of today's browsers have a "View Source" or similar option, generally accessible from the 'right-click menu'.

Links (<a href=...>)

Most of your CMS tools will automatically build your links for you, and many give you plenty of options on how those links function.  However, it can be helpful to know what to look for and how to tweak it.  Links are wrapped with "<a href>" and "</a>" with the displayed text in between.  These can be links to URLs (webpages) or emails addresses, the latter of which can be identified by the keyword "mailto:".  Even though it's not generally considered a best practice you may want to have the link open in a new window; if your CMS doesn't give you that option in design view, you can add 'target="_blank" ' to the opening tag.
Here are some examples:

  • <a href="mailto:mndocs@mnbar.org">mndocs@mnbar.org</a> (clicking the link opens a new email message addressed to mndocs@mnbar.org)
  • <a target="_blank" href="http://www.mnbar.org">The MSBA's homepage</a> (clicking the link opens the MSBA homepage in a new window)

Paragraphs and Whitespace (<p>, <br/>, &nbsp;)

Another simple tag is the paragraph tag ("<p>" and "</p>").  If the formatting of your page isn't quite right, adding the paragraph tags may help.  Your CMS design view may look like a Word document or a text document; if it's the latter, you can use paragraph tags to give you some more rich text formatting options.  A common use of the paragraph tag is for centering text or images.

  • <p style="text-align: center;">Some text or image</p> (centers the text/image horizontally on the page)

A few related tags are "&nbsp;" (space) and "<br/>" (line break).  Whitespace can sometimes be an issue in HTML, and your CMS may not do exactly what you want or expect.  These two tags can help you control how much whitespace appears on your page and where.

Your CMS should also have buttons for bold and italics in its design view, but if not those tags are "<b>some bold text</b>" and "<em>some italicized text</em>".

Headings (<h1> - <h6>)

You can also add headers to your text.  Your CMS should have an option, but it is fairly easy to find and change your headings in the HTML too.  Header tags are an 'h' followed by a 1-6, with <h1> being the biggest and <h6> being the smallest.  Again, you wrap your text with an opening and closing tag. 

  • <h1>This is the page heading</h1>
  • <h4>This is a smaller heading</h4> (like the in-line headings in this post)

Want to add a divider (line) under a section of text?  Use "<hr/>".

Anchors

A slightly more advanced concept is the use of anchors to allow you to direct people to a specific part of your webpage.  Some CMS tools have a button for this in design view.  If not, you can use "<a name=...>" to create anchors on your page.  You can then hyperlink to that anchor by using the hashtag ("#") followed by the anchor name at the end of your URL.  For a basic example of this, use the 'View Source' feature in your browser on the mndocs FAQ page.

  • <a name="5may15"></a> (creates an anchor called 5may15)
  • www.mywebpage.com#5may15 (will open your page and automatically jump down to the anchor)

Embedding Social Media and Video

Embedding content is another more advanced concept.  Luckily, however, most of these content hosts (YouTube, Twitter, etc.) give you the code so all you have to do is paste it into your webpage (in the HTML editor, not design view).  Most of the time you can paste it in as-is and be done with it; in some cases you may want to change the size of the embedded video.  This is fairly simple to do; if the provided code already includes "height=" and "width=" parameters, then you can just change the values.  If not, you can add those parameters (with values) to the "<iframe>" tag.

  • <iframe width="500" height="300" src="https://www.youtube.com/embed/nq85IDireYg" frameborder="0"></iframe> (embeds the MSBA's mndocs demo from YouTube with dimensions 500x300)

There are many other tags available, and even the few described here may be more than you need.  However, a little background information may help you take your webpages to the next level, so as they said in the Eighties, now you know, and knowing is half the battle.