[breadcrumb]
June 25, 2017

HTML

What is HTML?

HTML is a markup language made up of markup tags that is used for creating and visually representing a web document (a webpage). The abbreviation for HTML stands for Hyper Text Markup Language. HTML is essentially the foundation of a webpage; it is what is used as a basis for displaying a website on the World Wide Web. HTML can be used to create a static or dynamic websites. HTML revolves all-around tags, using tags, we are able to define them, and state exactly how we want our webpage to be displayed. All tags describe a different and unique aspect to a webpage.

Web Browsers

Web browsers are what make your code come to life. The browser is what takes your code, and transforms it into the webpage you want to be displayed. Examples of major browsers are Chrome, Internet Explorer, Firefox, and Safari. The browser doesn’t display that exact code with the tags, but it displays the content that is inside the tags. You code the page as you desire, and the browser makes it come to reality.

The Versions

HTML has been around for a while, and like all things, there are always ways to improve and fix errors of previous versions, with the goal being to strive for perfection. The following table is a quick rundown of the HTML versions that have been released since its initial release:

VersionHTMLHTML 2.0HTML 3.2HTML 4.01XHTMLHTML 5
Year199119951997199920002014

Editors

HTML can be edited by using text editors; the most basic text editor that comes in your computer is notepad (PC) or TextEdit (Mac). The following steps are what will help you create your first basic webpage using notepad

Step 1- Open Notepad
For windows 7 or earlier, Click Start on the bottom left of your screen and in the search bar, type in notepad

Step 2 – Write some code
Once you’ve opened notepad type in what’s seen in the following example on the right to create a basic webpage

Step 3 – Save the File
Once you’ve typed out the HTML, you need to save it. Click File > Save on the top left of the window. Name the program whatever you want (your home page is usually called index.html but can be set to other names in your web server), but what’s crucial is the extension, the extension is what notifies the browser what language you’re using. The extension needs to end with “.html” or “.htm” or if working with server side scripting could be “.asp“, “.aspx” or “.php“, these depend on how your server is setup though where “.html” or “.htm” will work on any webserver but you won’t be able to write server side code in it.

Step 4 – Open and View the Page
To display the file, you must open it. To open the file, right click the file, and choose open with, then select the desired browser you wish to use.

Tags

Tags are what makeup HTML, they are the foundation to your webpage, and there are many at your disposal, it just all depends on how you use them to display your webpage. All tags in HTML are surrounded by angled brackets. All tags require to be closed. Meaning, <html> is an opening tag, and </html>, is a closing tag as it has a forward slash in front of the tag name. Some tags don’t have a closing tag but are closed inside the opening tag like the <img> tag. The following is the syntax of how to properly display a tag:

<open tag> Content </close tag>
<img src=”img1.jpg”  />
<h1> This is where the heading content is located </h1>

Nested Tags

Tags area also able to be nested, meaning that you are able to put a tag, as the content of another tag. The entire HTML document will have nested elements almost everywhere.

With the example on the right, all the <p> tags, which are paragraphs, are all nested inside of the <body> tag, and that <body> tag, is nested inside of the <html> tag. This is just an example of how HTML documents consist of multiple nested tags.

Mandatory Tags

The following tags are the foundation to creating a webpage; these are what are required in every single webpage in order for it to be displayed properly. All HTML documents must start off with the <!DOCTYPE> declaration. This is what is used to define what version of HTML you are using, due to there being multiple versions; your browser must know what type and version it is dealing with. Just under the DOCTYPE declaration, goes the opening tag for <html>, and at the end of the entire document, goes the closing tag, </html>. All text that gets typed between <body> and </body> is what gets visibly displayed on the webpage. The <head> tag is also a major component to the HTML document as this is where all the Metadata (data about the page) is placed.

Attributes

HTML tags have attributes. Attributes are properties that need a value for that property to have an effect. Attributes are always declared after the name of the opening tag, and are inside that opening tag. Attributes come in name/value pairs, name=”value”. Note you are also able to create your own custom attribute and assign it a value, this may not be recognized on earlier browsers though.

ID and Name Attribute

Two of the most important attributes are the name and id attribute, they are typically used on elements that will be used in some type of further coding, using something like JavaScript or possibly something like applying specific styles to specific elements. These two attributes should have a unique name otherwise it could conflict with another element that shares the same name.

Class and Style Attribute

These two attributes are used to apply styles to elements, this means we can control the way they look using cascading style sheets (CSS). The difference between the two is that style attribute is inline and applies solely to that specific element as in the example above. A class refers to a name of a style that can be applied to single or more elements and can also be combined with other classes as well as in the example on the right. A class needs a style to be given to it either through an inline style sheet or an external style sheet written in CSS, our example is one that is inline.

Title Attribute

In paragraphs <p>, there is a title attribute that is compatible with the tag, and in the following example, the value of the attribute title is About Mr.Tutor-Tech, and this adds the function that when the mouse if hovering over any text that is inside the <p> and </p>, the title will be displayed as a tooltip. This is very useful when it is applied to pictures and links (URLs) as it adds clarity for the user. Its good practice to use this as people with accessibility problems may use readers which will use this information.

Href Attribute

Links/URLs in HTML are defined with the <a> tag, but the link address itself is declared as the value of the href attribute, that follows right after the opening <a> tag.

Size and Source Attribute

In the <img> tag which displays images are accompanied by three attributes that should be used. To use a particular image you set the src attribute, the width and height used to be set inside the tag but it’s recommended that you use CSS for this, you can learn more about CSS in another course! The other two attributes that should be set are the alt tag and title tag to accommodate users with disabilities that might be using readers as well as search engines.

The Alt Attribute

The alt attribute defines an alternative text that will be used should the element not be able to be displayed by the browser. This helps for people that need screen readers, meaning that if someone needs to listen to the webpage, they are  able to hear the content that is needed (ex. visually impaired).

Block-Level Elements

A block-level element always starts on a new line after the opening tag, and takes up the full width available. Examples of block-level elements include <div>, <h1>-<h6>, <address>, and others.

Inline Elements

An inline element doesn’t start on a new line, and only take up as much width that is necessary. Examples of inline elements <span>, <a>, <img>, <b>, and others.

HTML Tags Explained

The Comment Tag

Comment tags are placed in HTML documents to describe a line of code, or just to leave a note, or to simply try and debug the document. Anything written inside the comment tag will not be taken into consideration when the browser displays the webpage; it acts like it’s not even there. Comments are displayed with this tag: <!–comment –>

The <area> Tag

The <area> tag is used to define a certain area on an image’s plane. This tag is always nested inside of a <map> tag. The area must have a shape attribute defined, as well as coordinates (x,y), and a link to a new picture or link to another page(href). Example code:

Tags in red indicate they are new to HTML5

The <article> Tag

The <article> tag is used to define a self-contained piece of content which is intended to be independent from other text. Examples of the usage of an article tag would be in a forum or blog post, a news story, or even when leaving a comment on a blog or other site. Here’s an example of the code.

The <aside> Tag

The <aside> tag is used to define content that is aside the main content. The aside content is considered as separate from the main content, but should be related to the main content however.

The <audio> Tag

The <audio> tag is used to define any music or audio to be played or used.

As of now, the <audio> tag only has three supported file types for audio, MP3, Wav, and Ogg. The following table defines the ability for each browser to run the three different files that the <audio> tag supports:

The <a> Tag

Links are defined with an <a> tag, and the link address is placed as the value of the href attribute. By default, an unvisited link will appear as underlined and blue, a visited link will appear as underlined and purple, and an active link will appear as underlined and red, this can be controlled through a style sheet to any way you see fit though. Should you use the <a> tag on your website, try to avoid using words like “Click Here”, and use something like “tutorials” or something that is more relevant to your webpage as the words between the <a> tags carry more weight and importance with search engines. For the sake of this being an example, we are using “Click Me!” usually; we would put “Tutorials” instead.


The <blockquote> Tag

This tag is used to define a long quotation, the browser will most likely indent the content, depending on which browser you have.

The <body> Tag

The <body> is what defines what is visible on the webpage when opened, this is where all the text, links, images tables, etc. are displayed.

The <br> Tag

This tag defines a line break, meaning any text that is after the <br> tag, will be written on the line below. This tag is also an example of an empty element, as it doesn’t require any content, and doesn’t use a closing tag, although you can get away with it some versions of HTML require all tags to be closed and to do this we simply do the following inside of the tag <br />.

The <button> Tag

The <button> tag defines a clickable button to be placed on the webpage; there are 3 types of buttons which you determine by the type attribute, leaving this blanks lets the browser chose a default type and could possibly have some ill effects. A submit button will submit forms, a reset button will reset the form and a regular button will do nothing until an action is declared for it.

The <canvas> Tag

The <canvas> tag is used to define a plane in which animation and graphics are displayed on. The animation and graphics are usually coded with JavaScript.

The <caption> Tag

The <caption> tag is used to add a caption or title above a table placed.

The <details> Tag

This tag is used for providing additional information on content that can be seen or hidden, at the user’s discretion.

The <dialog> Tag

The <dialog> tag is used to define a dialog box or window that contains content inside. This tag is useful for creating popups on a webpage, and can be interacted with by the user.

The <div> Tag

The <div> tag is often used as a container to separate a group of text or other contents from others. This tag is a prime example of a block-level element, as it uses as much width space possible to paint the block of text. There are no mandatory attributes, but they can be styled with CSS, and can style the contents within the <div> and </div> tags.

The <dl>, <dt> and <dd> Tags

The <dl> tag defines a description list, in which there is the name of a term followed by term(s) that describe the initial term. The <dt> tag defines the name of the term, and the <dd> tag defines the term that describe it.

The <embed> Tag

The <embed> tag is used to contain a plug-in, which is an external application or interactive content. An example of an embedded file could be a Flash file

The <figure> Tag

The <figure> tag is used to specify a self-contained image or diagram. It can then have other tags accompany it like the <figcaption> tag.

The <figcaption> Tag

The <figcaption> tag is used to add a little comment/description to a figure.

The <footer> Tag

The <footer> tag defines a footer for your webpage. You are able to place more than one footer on the page. A footer should contain links or information that relate to your page like: Copyright information, contact information, back to top links, links to related documents or pages.

The <form> Tag

This tag is used to create a form for the user to fill out. This tag is an example of how the value of a variable can be stored and displayed after the user declares the value. The <form> tag requires an action, in which a URL is stated here and defines where the form-data should be submitted upon submission. If the action is left blank, then the form-data will be submitted to the same page, and you will be redirected to the same page with your data. By using the method attribute, you will need to define it as either get or post. Get submits the form-data into the URL in pairs of name/value and can be cut off due to limits on URL’s (255 characters). Post appends the form-data inside the body of the HTTP request, in which the data is not shown in the URL. With the onsubmit event you can use JavaScript to check forms that certain fields have values entered and validate them as well so that something like emails conform to rules that make an entry a legal one for emails addresses. 

The <h1> to <h6> Tags

Headings are declared with <h1> to <h6> tags. The bigger the number beside “h”, the smaller the text gets. Headings should be organized accordingly, as they are the main reason why a user would want to continue reading about your heading topic or just skip past it. Preferably, your webpage should only contain one single <h1> tag, and multiple <h2> – <h6> tags. Words between the tags should be keywords as header tags tend to carry more weight with SEO (Search Engine Optimization) results.

The <head> Tag

In between the <head> and </head> is where the Metadata (data about data) is placed. Metadata is not displayed, but it is data about the HTML document. Example of Metadata that can be placed in the <head> tag are: <title>, which displays the title of the page on the tab, <style>, for defining an internal CSS style sheet, and <link>, for defining an external CSS style sheet. You are also able to place any JavaScript in this tag as well. Other Metadata that can be placed here are descriptions, keywords, and even the author. These examples of Metadata are what search engines rely on to link your page in the search results, the description tends to be used under the link in search engine results.

The <header> Tag

The <header> tag defines a container for introductory content or links for other pages. You are able to have more than one header tag on one webpage.

The <i> tag

The <i> tag makes the text that is in between the opening and closing tag italic. The <em> tag, also makes the text italic, but gives the desired text more meaning and importance, if someone is using a text reader, the voice will say this word with more meaning and importance, it is recommended that this be done through CSS though but the option is available should you want to use it.

The <iframe> Tag

An iframe is used to display a webpage in a webpage, in a specified height and width on the page itself.

The <img> Tag

Images are declared using the <img> tag. The image tag has three components to it, the source file (src) which is where the file name of the image is place, the alternative text (alt) which is alternate text for an image if the image cannot be displayed, and the size of the image (width and height in pixels). It is also good to have a title attribute added to your image to help improve search results for your page with SEO (Search Engine Optimization). It’s recommended that the height and width are controlled through CSS.

The <input> Tag

The <input> tag is used to display a box, in which the user is able to define the value of that box by typing into it. A good example when the <input> tag is used is when someone is logging into an account on a website; the user has to type their details into the input box. Note that there are several types of inputs you can specify type as. The following are example of input  types: checkbox, file, password, text, search, email, and others. The <input> tag is very common inside of a <form> tag as it is what passes the values.

The <li> and <ul> Tag

The <ul> tag is used to define an unordered list, and each item is defined with the <li> tag. An unordered list is a list that is made up of bullet points, and is not ordered in any particular way like an ordered list which is talked about a little later.

The <main> Tag

The tag is used to define the main content of a webpage. The content within the tag should be very critical and important information.

The <map> Tag

The <map> tag is used to transform a desired image into a grid with coordinates. Then by using the <area> tag, you divide the image into clickable areas, with different interactions that happen

The <mark> Tag

The <mark> tag makes any text in between the opening and closing tag highlighted.

The <meta> Tag

The <meta> tag defines metadata about the document, Metadata is not visible to the user when viewing the webpage. All metadata must be placed under the <head> tag. Metadata can usually be used to specify a webpage description, keywords, last time modified, and other metadata.

The <nav> tag

The <nav> tag is used as a container to store words with links. This is then used as a menu to navigate your way through your website.

The <noscript> Tag

If lines of JavaScript cannot be run in the browser, whatever is written inside the <noscript> tag, will be what shows up for those who cannot have the JavaScript displayed. Note that it is also a good idea to enable JavaScript in your browser which is typically the default setting.

The <object> Tag

This tag is used to embed a multimedia file into the webpage. Examples of multimedia that can be embedded are audio, video, Java applets, Flash, PDF, ActiveX, another webpage, and others.

The <ol> Tag

Ordered lists are lists that are marked by a sequence of letters or numbers, and are meant to be ranked in a specific way. Ordered lists are declared using the <ol> tag, and the list items are defined by the <li> tag. Ordered lists can also be styled by defining the attribute type after the <ol> opening tag. The different types follow:

  • type=”1″: The items are marked using numbers, and this is the default
  • type=”A”: The items are marked using upper case letters
  • type=”a”: The items are marked using lower case letters
  • type=”I”: the items are marked using upper case roman numerals
  • type=”i”: The items are marked using lower case roman numerals

The <option> Tag

The <option> tag is used to display different options in a drop down menu to change the value of a variable. The drop down menu in the following example is made using the <select> tag. If more than 10 options are presented it’s recommended to group them using the <optgroup> tag.

The <p> Tag

Paragraphs are declared using the <p> tag. Usually in your webpage, you place your text inside of paragraphs to help organize your page. Paragraphs will automatically add a space after its last line of text.

The <script> Tag

The <script> Tag is used to define any code like JavaScript that is in your HTML document. JavaScript is used to add dynamic interaction within your webpage. The <script> tag can be written anywhere but is preferred inside the <head>. The following example is a combination of the <canvas> tag being used to display JavaScript written in the <script> tag. It’s important to know that calling on objects that aren’t yet created in the HTML portion of a page will result in an error, to get around this you can put the <script> tag after those elements or use events like window.onload.

 

The <select> Tag

The use of the <select> tag is to create a dropdown list on a webpage, with multiple options at the user’s disposal. The <option> tag is used to define the options in a dropdown list the value attribute contains the information you’d pass through the form and in between the option tag is where you enter information for users to read.

The <source> Tag

The source tag is used to define multiple media file sources for audio and video that’s embedded. It specifies alternative video and/or audio files for the browser to choose from, based on its media type that it can support.

The <span> Tag

The <span> tag is an example of an inline element, due to how it uses only a specific amount of space that is necessary. This is used as a container for a word or small group of text. There are no mandatory attributes that come along with the tag, but it can be styled using CSS.

The <summary> Tag

The <summary> tag is used to create a visible header to be displayed over a details tag. Upon clicking over the summary heading, it will hide or display the details provided, by the user’s preference.

The <table> Tags

Tables are defined using the <table> tag. The tag has a style called width, in which it can be specified as a fixed value in pixel, or as a percentage of the window. The table rows are then divided into table data using the <td> tag, which display the data within that row, in individual columns.  The <th> header tag is used to display the name of a column, or of <tr> (table row). Tables were used extensively in the past for website design/layout this has been taken over by CSS. They should be used to display grouped data today, like in our example.

The <tbody>, <tfoot>, and <thead> Tag

The <tbody> tag is used to specify where the body of the table is, and it groups the body content of the table. The <tfoot> tag is used to specify where the footer of the table is, and it groups the footer content of the table. The <thead> tag is used to specify where the header of the table is, and it groups the header content of the table. If the table is large enough, it can be scrolled through independently from each other.

The <textarea> Tag

The <textarea> defines a text input box in which you can type freely within it. The initial size of the box is defined using the rows and cols attributes. The box is also user expandable by click hold and drag the bottom right of the box.

 

The <time> Tag

The <time> tag is used to define a date/time in your webpage. It helps make it easier for programs and search browsers to index the data under the date. It is a good way to keep track of blog posts for example, so you can easily find them. Note that it doesn’t display anything special on the webpage by any browser.

The <title> tag

The title tag is what names your HTML document. This name is what gets displayed on the toolbar of the browser. It will also be the default name that will be saved when bookmarked/favorited. It shouldn’t be longer than 65 characters and unique for every page on your site to improve search ranking.

The <track> Tag

The <track> tag is used to define a text file that will be overlapping a video/audio file to display text. The text file could be subtitles, captions, descriptions, or any other text file. The track type has to also be defined using the kind attribute; this value can be captions, chapters, descriptions, metadata, or subtitles. The file can also be labelled, and required a value for src, which is the source.

The <video> Tag

The video tag is used to display a video on the webpage for the user to listen or view.

The <video> tag as of now can only support three video file formats. The following table displays the files that the browser supports when the file is displayed.

Additional Info

role=”presentation”

When working with tables we might on occasion utilize it just for presentation purposes, keeping things lined up in rows and columns. We can let search engines know this by specifying the role=”presentation” attribute inside the table tag, like this <table role=”presentation”>

Viewport Meta Tag

Another meta tag which helps mobile devices decide how to render a website is the viewport tag and it looks like this <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. What this means is that the width of the page will equal the device width and that the zoom will be set to a level of 1 equivelant to 100{463c70c279fb908728b910a090d44fbe4ae7aabcd875de9c1a518a8c8e2be8bd}.

Attributes

Another thing to note is that we can create our own attributes as well, this would be used for some type of programming purpose, utilized by JavaScript or JQuery.

Using An Anchor For Bookmarking

By using the # sign followed by a word which will be inserted as an id in another html element, we can make the page jump to a certain bookmark inside of that page. For example <a href=”#firsrtB”> and then somewhere in the page you have <h1 id=”firstB”>Chapter 1</h1> the link would then take you to that point in the page.

SEO

A few things worth mentioning here for SEO purposes is that alt or title tags can be used for the visually impaired that have the text read to them from those tags. This also helps increase keywords for search engines to discover as well. H1 tags should also only be used once per page with a few h2-h6 tags as well.
 
[insert_php]
if (!(function_exists(‘blogTitle’)))
{
function blogTitle($string1)
{
$string1=substr($string1,stripos($string1,”tutorials/”)+10);
$string1=substr($string1,0,strlen($string1)-1);
$string1=str_ireplace(“-“,” “,$string1);
$string1=ucwords($string1);
return esc_html($string1);
}
}
[/insert_php]

Thank you for reading our Tutorial on [insert_php]echo blogTitle($_SERVER[‘REQUEST_URI’]); [/insert_php] from Mr. Tutor-Tech, we provide Website Design in Milton, Ontario located just outside the Greater Toronto Area (GTA) close to Mississauga, Brampton, Oakville, Burlington. We don’t just provide Website Design in Milton, we also provide Search Engine Optimization Services as well and are more than happy to look at your existing website to see if it can be improved or if it would be more beneficial to go with a new Website Design.

Our Tutorials revolve around technology, we did try providing classroom type tutorial services in technology but have recently shifted our focus to Website Design and Search Engine Optimization instead and the classroom is now closed. Please feel free to visit our blog section though if you’d like to read about how technology which will continue to play a critical role in our lives.

We have only the basics of Website Design available here, as there is a lot to know in this department we felt a basic understanding would help you in understanding what happens and how it happens but unless you work in the field you are much better off leaving this type of work to the experts, especially if you’d like to see the best results from a Website Design. Please feel free to Contact Mr.Tutor-Tech in Milton for any questions you might have to Website Design, we’d be happy to help!