Digital Vocabulary 101 - HTML

HTML stands for "Hypertext Markup Language." HTML is the standard language used to create web pages. It defines the structure of a web page and the styling to a lesser and lesser degree as CSS and JavaScript are better tools for that task.

The HTML of a web page lives as a document file on the server where the web page is hosted. If you wanted to see or change the HTML of a web page, you would access it through the content management system (CMS), if the web page has one, or by file transfer protocol (FTP) allowing you to access the host server and download the file.

"Hypertext" refers to the links on an HTML web page. "Markup language" refers to the way tags are used to define the web page layout. Browsers do not display the HTML tags, but use them to interpret the content structure and hierarchy of the page.

Some commonly used tags are:

<head>	The head tag denotes the head section and encloses important information that supports the web page.
<body>	The body tag denotes the body section and encloses the content that visitors to a web page can see.
<h1>	The h1 tag encloses content at the top of the hierarchy defined by the author.
<title>	The title tag contains the title of the web page.
<p>	Use this to indicate a new paragraph.
<i>	Use this to add italic styling to text on a web page.
<b>	Use this to add bolded styling to text on a web page.
<a>	Anchor - Use this to send viewers to a specific place on your web page.
<ul> & <li>	Use these to indicate unordered list and list items.
<blockquote>	Use this tag to specify a section that is quoted from another source.
<img>	Use this to indicate images on the web page.
<div>	Use this to indicate a division on the web page.

Below is an example of HTML used to define a simple web page with a title and a single paragraph of text.

<!doctype html> <html> <head> <title>creative-intelligence.lmgresults/com/blog/Digital Vocabulary 101 - HTML</title> </head> <body> <p>Paragraph copy is placed between the start (no forward slash) and end tags (forward slash) for paragraphs indicated by the lower case 'p'.</p> </body> </html>

The first line defines what type of content the document contains. "<!doctype html>" means the web page is written in HTML. Well-formatted HTML web pages include <html>, <head>, and <body> tags, as seen as in the example above. The page title, metadata, and links to referenced files are placed between the <head> start and </head> end tag. The contents of the web page the visitor sees belong between the <body> start and </body> end tag.

HTML allows images and other objects, such as interactive forms, to be embedded into the web page and viewed by the visitor. Programs written in a scripting language such as JavaScript that affect the behavior and content of web pages can also be embedded using HTML. JavaScript can do all kinds of things with just a few lines of code.

JavaScript can make HTML disappear.

The technology to build more advanced and interactive websites is always evolving, but HTML has become cleaner and simpler. If you compare an HTML page written today with the same page written a few years ago, the newer page would probably contain less code. Today's HTML utilizes cascading style sheets and/or JavaScript to execute nearly all the components of a page. A site built with comprehensive CSS that executes the intended design will have little need for styling executed using HTML.

HTML documents have a systematic structure. The various components of the web page such as copy headings, white space, images, columns, bullets, and so on are created with HTML elements that are compiled using HTML tags and sometimes additional tag markup called attributes.

An element consists of the opening tag <p> and closing </p> and the text content of the element, if any exists, is placed between these tags. Tags can also enclose more layers of tag markup between the start and end, including a mixture of tags and text. In this manner, nested or child elements are created. Bulleted lists and tables provide examples of this element structure.

List Example:

<ul>

This bullet was created using the <li></li> tag (a nested or child element).

To start this unordered list, <ul> was applied.

To end this unordered list, </ul> needs to be applied.

</ul>

Table Example:

<table> This tag dictates that columns and rows be created.

<tbody>

<tr> This tag will start the first row.
<th>Firstname</th> This tag will create the heading for the first column.
<th>Lastname</th> This tag will create the heading for the second column.
<th>Age</th> This tag will create the heading for the third column.
</tr>This tag will end the first row.
<tr>
<td>First name in second row</td>
<td>Last name in second row</td>
<td>Age in second row</td>
</tr>
<tr> This tag will start the third row.
<td>First name in third row</td>
<td>Last name in third row</td>
<td>Age in third row</td>
</tr>

</tbody>

</table> This tag ends the table tag and completes the parent element.

First Name	Last Name	Age
Jack	Hill	95
Jill	Hill	90

A start tag may also include attributes within the tag. Attributes apply more layers of structure within the HTML element. Here is an example of a tag with an attribute.

The table will span the entire width available to it on the web page.

Some tags, such as the line break <br>, do not allow additional content, either text, additional tags, or attributes. These tags require only a start tag and do not use an end tag because many tags, particularly the end tag for a very commonly used element such as <p> for paragraph, are optional. An HTML browser can infer the closure for the end of an element from the context and the structural rules defined by the HTML standard.

HTML, like all languages, has nuances, but when starting out one does not need to understand and master every aspect of HTML to begin putting it to work. There are many sites available to look up specific HTML tags as you need them. It is good to have an understanding around what HTML does when working with developers to create digital marketing assets.