by If you’ve ever opened up a plain text file, it looks like something that came off of a typewriter. It’s a static file with no formatting to differentiate a section title, no links to other documents, no proper list formatting, and no other enhancements.
With a Markup Language, we can annotate that document in a way that the computer can interpret, processing the text for display. The idea comes from traditional editing, where someone would markup a page with edits and formatting changes with a colored pencil.
HTML (Hyper Text Markup Language) is one of the most common Markup Languages, but there are a few others. In HTML, we tag chunks of the text content by surrounding it with a formatting instruction.
For this article, we will stick with the basics. We’ll talk about options you often see in a rich text editor on the web. We want you to get you acquainted with how markup works, using HTML as an example.
Workflow
For HTML, the ideal workflow is to edit your file in an editing program, save your changes, then display it in a web browser.
When you create or edit a HTML file, it will probably have the file extension .html at the end of the filename (e.g. index.html). You don’t want to edit this file in a word processor like Word or Google Docs. You need a text editor like Text Edit (mac) or Notepad (Windows).
When we work with these types of files often, we may start looking at using a code editor to allow us some conveniences. Look for a few more details about code editors at the end of this article.
When you have created (or made edits) to your HTML file, you’ll want to open it up in a browser window (Chrome, Safari, Edge, or Firefox). This lets the browser render the markup in your file and display the text content as intended.
Let’s take a brief look at some basic formatting options.
<H1>Tag</H1>
Tags are formatting instructions sandwiched between the greater than and less than symbols. The opening tag looks like this <instruction>, and the closing tag looks like this </instruction>. The end tag has a leading forward slash.
When a browser reads a HTML formatted document, it can interpret these tags, rendering the text between the tags with the instruction in the surrounding tags. Let’s take a look at a few of more common HTML tags.
<html> </html>
We wrap all of our HTML formatted content between these two tags. It’s the start and end of our display content. Inside of the HTML tag we find header information, possibly some declared styles, and the body of the content.
<body> </body>
This tag surrounds all of our visual content displayed in the browser.
<H1> </H1>
Heading elements, used for titles of varying sizes. There are 6 levels of headings, H1 being the largest, and H6 the smallest.
<p> </p>
Paragraph tag, this pair of tags wraps every paragraph.
<b> </b>
Bold tag, any text contained within these tags will be emphasized.
<I> </I>
Italic tag, italicize the text contained within.
<u> </u>
Underline text contained within this tag. Be careful, this can often get confused for a hyperlink to another web page. You might style it to differentiate it.
<LI> </LI>
We have two general types of lists, unordered (bullet) lists, and ordered (numbered) lists. We surround each List Item with the tag <li>Item</li>, then surround the whole list with either <ul>Unordered List</ul> or <ol>Ordered List</ol>.
When you are ready for more HTML, here are a few links to sites with terrific free tutorials and documentation.
- https://www.w3schools.com/
- https://www.codecademy.com/learn/learn-html
- https://www.khanacademy.org/computing/computer-programming/html-css
There are many other HTML tags available to use. It’s good to know how to create these manually. But if you do a lot of this type of work, you want to consider using a code editor to assist with code completion. A code editor will recognize you are typing a HTML tag and complete it for you. A good code editor will also highlight potential problems before you test your markup.
Work more efficiently with a code editor
Instead of having to remember the exact syntax for every markup tag, we have programs to help us autocomplete our markup. They can even flag errors before you try to test them in the browser. Programs like Notepad and Text Edit get the job done. But with a code editor, we can do the job easier.
Here are a couple of code editors to get you going.
- Sublime Text: https://www.sublimetext.com/
- Visual Studio Code: https://code.visualstudio.com/
- Text Mate (mac only): https://macromates.com/
- Notepad++ (windows only): https://notepad-plus-plus.org/
