HTML stands for Hyper Text Markup Language. At its very core, It is nothing more than tagging "elements"
which the browser (Intranet Explorer, Safari, Firefox, ect.) recognizes and runs.
The first step to learning HTML is to look as the basic code for every document and note the patterns.
An element is a keyword inside < >. It is impossible to make up your own tags (or elements) out of the blue. Predetermined ones must be used. W3 Schools has a comprehensive list of each element, and a thorough description for each one. You should have noticed that there are two of every element. one without a slash (ex: <html>, and one with a slash (ex: </html>). The element without a slash comes first to open the element, and the one with a slash comes second to close it.
Now lets go through this HTML document chronologically. First the <html> tag tells the browser what type of document it is. The <head> tag shows that anything inside it is part of the heading. <title> is the title of the page that appears in the open tab of the browser. The <body> shows that anything inside it is part of the body of the document. Each tag is closed with a slash and the tag name (ex: </html>). This is the format every HTML document should have.
Here are some things we are going to be learning. Hit the submit button to see it in action!
NOTE: You can resize the box to see the text better.
When that code runs, there are a few things to notice. The first is that the <h1> tag is the lergest heading tag, while <h6> is the smallest heading.
This allows the programmer to select the size of heading appropriate for what is needed. Notice the the elements used for the headings were placed inside the <head> tag. This is not because the <h#> tags have to be used inside the <head> tag, but because it organizes the code.
If you do not include a <head> tag, your code will look immature - as if you are learning HTML!
NOTE: While you may put text outside of a <p>, <h1>, <div> etc. tag, it is recomended that you put
text inside a tag. When coding in javascript, or CSS 3, it is very helpful to put text in tags.
Without a tag, you cannot give an element attributes. More on that later.
The <b> tag bolds text, but you should use <strong> instead, because a screen reader will not put emphasis on text bolded with <b>, but it will put emphasis on text
in a <strong> element. The <br> tag indents a line, much like hitting enter while typing in WORD. The tag traditionally read: <br />, however,
everyone uses <br> because it is shorter, and slang. The <a> tag is used for a link. The href="" and target="" are attributes, which will be covered later. A <fieldset>
is simply a border. A <legend> is text written on the border (cool, right?) The <hr> tag makes a horisontal line. It also used to be written as <hr />.
The <div> tag is just a grouping of code. It helps to organize your code, and identify multiple elements at the same time. The <input> element is a bunch of different elements at the same time! It is used for different types of inputs, such as different types of buttons and textboxes. Although there are seperate button and textbox
tags, I use input, because that was how I learned. It is not depreciated, so there will be the same effect whether or not you use <input> or seperate button tags.
The <img> tag is used for images. The AWESOME HTML 5 <video> tag now brings a uniform video standard to the web!!
NOTE: The <script> tag is used to code in javascript. You used to have to type in:
<script language="javascript" type="text/javascript">! Also the <link> tag is used for CSS.
In essence, attributes are what give elements extra content or abilities. Take, for example, the title attribute. hover your mouse over the bolded title. An attribute is put inside a tag. EX: <strong title="wow">. The actual tag is strong, and the attribute is title. Your browser will not load a tag if there is no space in between the tag name and its attributes. Here are some of the most prominent attributes.