A helpful way to think about learning HTML is to consider it as extending one’s existing vocabulary. Coding is simply a different way to present information, using this ‘new’ vocabulary. Much in the same way as learning a new word or phrase, once someone learns to recognize a tag (a new word in this analogy) or a new character, they can then teach themselves how to put it together in ways they find useful in expressing what they intend to communicate.
Basic HTML Characters and Common Character Combinations
| < | Open bracket, some kind of tag is being formed |
| > | Close bracket, a tag is complete |
| </ | Start of a closing tag |
| <(label)> | Opening tag, the label will let you know what it is and what it is meant to do |
| </(label)> | Closing tag, each tag must be closed, the label will you you know which tag is being closed |
| ; | Typically used to separate a list of attributes |
| = or : | Typically used to set the value for an attribute, It’s important to know when to use which of theses characters |
Basic HTML Tags
***Each tag must be closed with very few exceptions***
| <html> | The official start to an HTML page |
| <head> | Useful place to store settings and information which can be used in the document, not visible on the page |
| <title> | Adds a title to the browser window | <meta> | Useful place to store descriptive information about this page which helps search engines make this appear in search results, this is not visible on the page |
| <style> | Place to store style and formatting information, a flexible tag used in the <head> but can operate as an attribute within a <span> or <div> |
| <body> | Marks the start the actual content visible on the page |
| <script> | Identifies a portion code meant to handle a variety of tasks, such as javascript, typically found in the header tag |
| <p> | Identifies text meant to be treated as a paragraph |
| <img> | Identifies the use of an image, one of the most commonly used tags which does not need to be closed |
| <a> | Identifies the use of a link to something |
| <div> | Highly useful way to separate and organize content on the page; highly customizable |
| <table> | Commonly used on older sites to layout the page; not as common in current techniques, still useful for a table of information with columns |
| <span> | Useful in formatting text if cannot be reached through a <div> tag |
| <br> | Used to put text on the next line without additional space; one of the most commonly used tags which does not need to be closed |
Useful terms
| Relative path – a typically shorter link path for files and images to link to, or made use of. It is based on reaching that file relative to the file you may be currently looking at. |
| Absolute path – once a file or website is on the web, an absolute path can be used to find it from anywhere n the world. Absolute paths usually start with “http://” or “https://” (for files typically stored in a more secure location.) |
| Cascading Style Sheets (CSS) – compiling all the styles you intend to use into the header or a seperate document (.css file) so you can use and reuse those styles with that code getting entangled witht he actual content. |