HTML Terms and Concepts

Part II - Preparation

Part II - Writing the Code

Part IV - Exercises

HTML Definitions

How is a Website Organized

A website is a collection of web pages that all relate to specific content. They can be used for various functions including providing information about a business, an organization, a particular topic, social networking or just for personal use. It is identified with a domain name. The website is then published to a web server. A website has links that navigate the viewer between pages or to other websites. Typically a website has a logo, navigation bar, headers, content, images, footer, links, call-to-actions, and a masthead. The pages are designed with HTML and CSS code, for basic or static websites. Other programming languages are used with more advanced and dynamic websites.

 

What is HTML?

HTML stands for Hypertext Markup Language. It is a standardized system for tagging text files to achieve a certain look/feel to a website on the World Wide Web. HTML assists other programming languages to associate with the website. Languages like JavaScript and Cascading Style Sheets (CSS).

Below are a bunch of HTML terms to get you through the basics to HTML and building a website from scratch.

 

HTML Elements

Represents a section to the document that starts with a tag, then content, then closes with a tag. <h1> is a tag. </h1> is a closing tag for the <h1>tag.

Example:

<h1>This is a heading</h1>

 

HTML Attributes

Represents additional information of HTML elements. Attributes usually are joined with a name and value like, name=”value”.

Example:

<p style=”color:blue;”>I am a blue balloon.</p>

In this case, the attribute is “style” and the value is “color:blue”. Combined this gives us the following paragraph:

I am a blue balloon.

 

Common HTML Terms

Here is a super-simplified version of the code to a web page:

<!DOCTYPE html>
<html lang=”en”>
  <head>
  </head>
  <body>
  </body>
</html>

Every website needs at least certain items. A website needs to be defined as to what it is, what language it is in, a <head> section and a <body> section.

 

<!DOCTYPE html>

Describes the type of document for the browser to expect. In this case, it is an HTML document. The “<>” are brackets to group elements together. Notice the exclamation point after the open bracket. This makes it a declaration, not a tag. Though every web page needs this code, it is not case sensitive. All of the following variations would work.

<!DOCTYPE html> | <!DocType html> | <!Doctype html> | <!doctype html>

 

<html lang=”en”>

This designates that the html document is written in the English language.

 

<!--...-->

Defines a comment within the code. It’s for the person reading the code. The web browser ignores the code. One way designers use this syntax is to comment on what the next part of code represents. Example:

<!-- Here is a comment for me to remember for a later date -->

 

<head>

The <head> tag begins the head section of an HTML document. Visitors to the website can’t see what is in the <head> of the document, though it’s an important part of every web page. The content in between the <head> and </head> tags conveys information to the search engines. Information like the title, keywords, descriptions, location to stylesheets, scripts and more.

 

<title>

Defines the title for the document.

 

<meta>

The <meta> tag goes inside the <head> tag and defines the metadata about that web page. Some of the metadata includes the title, page description, keywords, author of the page, viewport settings and more. Here’s an example of how the <head> tag and <meta> tags would work together:

<head>
<meta charset=”UTF-8”>
<meta name=”title” content=”Title to the Website”>
<meta name=”description” content=”Description of the website”>
<meta name=”keywords” content=”keywords that pertain to website”>
<meta name=”author” content=”author’s name”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
</head>

<meta charset=”UTF-8”>

The UTF-8 is the character encoding for Unicode. It is most widely used and best for browsers to understand it. It’s not something that we need to dive deep into, but to know that it is important that we set the charset.

The last three <meta> tags deal with the website’s responsiveness on the web.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

The viewport <meta> tag sets the visible area of the web page for the user. With users having computers, laptops, tablets, smartphones and such, every screen is a different size. This is important for the web page to be responsive to each device it is being viewed on. Before the idea of responsive web pages came around, the same website needed to be coded twice (at least twice). A web page being viewed on a desktop computer would be way too small to be viewed on a smartphone. A web page that has been coded to be responsive, changes its characteristics based on the device’s screen size it is being viewed on. The initial-scale is set to 1.0 which sets the initial zoom level when the page is first loaded.

<meta name="HandheldFriendly" content="True">

This tag lets mobile browsers know that the page is optimized for use on mobile devices.

<meta name="MobileOptimized" content="320">

This tag sets the mobile screen size to 320px.

There are many more <meta> tags that we could add. Some link to social media accounts. Some link to google page of the author of the website. Some tell the robots to follow or not follow the page. A full list of <meta> tags can be found in Appendix “G”.

NOTE: The <head> tag ends with a </head> tag, but the <meta> tags do not. The </head> tag is called an end tag or closing tag. The <meta> tags do not require an end tag. The tag is considered a “self-closing” tag. Other self-closing tags include the <img> tag (used for images) and the <hr> tag (used to insert a horizontal line).

NOTE: Putting an end tag for a <meta> tag could interrupt the web page causing it not to load properly.

<script>

Defines a client-side script.

<noscript>

Defines alternate content for users that do not support client-side scripts.

<style>

Defines the style information for the document.

<link>

Defines a connection between the document and an external source, mostly to style sheets (CSS).

The <body> Tag and Elements Found Within the <body> Tag

After the <head> tag, comes the <body> tag.

<body>

The <body> tag comes after the declaration and all the coding inside the <head> tag. This is the content section of the website. It is essential that the <body> tag come right after the closing </head> tag. Everything your visitor sees is in the <body> tag. Sometimes scripts may be running in the <head> tag that allows your visitor to see what they see. The <body> is like a house. We put rooms (content or sections) together. We can move furniture (images and text) to different parts to the room or into another room. If we don’t like something, we can easily move it, change it or delete it.. Things we don’t normally change from here are:

Those things are modified from the <style> tag or a stylesheet. We can opt to create a style for text or images in the <head> section using a <style> tag. Or we can create a Cascading Style Sheet (CSS) file. This file is linked to the HTML file with a <link> tag within the <head> section. When we are done with HTML definitions, we will go in depth about CSS terms and how to link them to an HTML file.

<wrapper>

The wrapper element groups everything within the <wrapper> tag together. Wrappers can be used throughout the HTML document to group various elements together.

<div>

The <div> tag defines a section or division in an HTML document. So the <div> defines a section and the “id” or “class” tells us the name for that <div>. The <div> is defined by using the id or class attribute.

<div id>

When using the <div id>, defines an element within the page and that id will only be used one time on the page.

<div class>

A <div class> defines a style to an element where that style may be used more than one time within the page.

<span>

Defines a section to the document. Can be used within paragraphs or even within sentences. The <span> tag is most used to change the style of a portion of an element.

<h1> to <h6>

The <h1> tag is the top heading or title to the page. It is important that every page have an <h1> tag. It is also important for each paragraph under the <h1> tag to reference the words within the <h1> tag. Tags <h2> through <h6> are subheadings going down in hierarchy from <h2> to <h6>. Each one is a subheading of the previous one. Web browsers automatically implement some characteristics to these tags. However we can override the characteristics and implement our own via their respective CSS attributes.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

<p>

Defines a paragraph.

<br>

Inserts a single line break.

<hr>

Creates a horizontal line from current position to the right margin.

<b>

Makes the text within the tag bold. Using the <strong> tag has the same affect.

<em>

Will place emphasis on important text. The <i> tag will italicize the text within the tag.

<blockquote>

Defines a block of text that is a direct quotation. To be used when a separate paragraph is identified as the quotation.

There are obviously a ton more HTML terms to learn. The above terms will give a newbie, layman the basics to HTML so that he/she could get through in building a web page.


Next - HTML Concept: Images