HTML is a markup language. A markup language is a language that it's text is "marked-up" like annotation, that way, a document of a markup language contains distict parts. Inorder to transfer web documents to all computers, we need a language undrstood by all computers. As such there are rules for HTML. Any text, must be encapsulated by closing and opening tags. All tags, with small exceptions, most be opened and closed.For example, the skeleton of a HTML document, such as this one you're reading looks like this:

Watch this 1 minute video to undrstand how tags work. Below, we will explore parts and piaces of a HTML documents such as the one given above.

The w3c website highly stressis that this at the top of any html document. Why? Because it notifies browsers that this is a html document and it oughto be interpreted according to the rules of the markup language.

Websites have two audiances: humans and spiders(crawlers) +bots+computers. Although the head is visible little to humans, it’s important for the other audience. The best thing you can do for them is make a good title. Title is what appears in the search engine and at the top of your tap for any page..

This is a characterset mete tag( a mete tag is a tag that especifies the characetr of the rest of the content). In this case, it specifies teh type of the language you're using. . If you’re using other language then English, be sure to be using the correct character set but in english, it wouldb be <meta charset="utf-8">. This one of the veiw tags in HTML that is not closed. This tag goes within the head tags.

The body tag of a html document contains everythign that the user sees. All the text, you're reading, except the navigation which sometimes goes in a header tag, goes within the body tag.

When you read a blog, you notice it contains a title which you read. Any essay contains a title. Therefore, HTML documents contain a header. There is six header tags that are inorder of decending sizes. The biggest title is <h1></h1> and the smallest is <h6>

This Is an Example of h1

This replaces the ubiquitous <font> tag from html4, which doesn’t work now. It's aparagraph tag and we use to encapsulate it with paragraphs.

Unordered-list, use li for elements of the list; <ol> is ordered-listed. Lists can be indexed. In that case, make a firm friendship with indents. For example, here is an unordered list with three elements:

• air
• water
• food

his is what I'm using to define the terms. It's called a term definition list. It's helpfull in FAQs(Frequently asked auestions) and question answer blogs as well. For example, consider the following term and it's definition:

Here is he syntax:

This is tge anchor tag, or the link tag. The Anchor tag. Format: <a href=””>Click label</a>. If no file name is in the url, it’s assumed to be the index. To open in another tab, inside the opening tag, add target=”_blank”>

Aye, there is the rub. For in this tag lies complexity. First in it's most basic way, it's form looks like:

Think of it like a tree diagram. After the table opening tag, the first indenting level is the rows(<tr>). Then, the 2nd indenting level is the table data. Each row can have multiple data. Oky! Then how do you do something like say where you have one cell spanning multiple columns.

Simply, to that cell, you add after td colspan="#". Look at the source code to the table above as example by right clicking it and then choocing inspect element. Also, it can be done the otherway. For example, you can add to a cell after dt that rowspan="#". For table data(td) in row 1, you can replace the td with th to indicate that they're table headers. The colgroup tag allows you to style a numver of columns together. Inside it, in col tag, add span="3" to dinciate the number of columns from left to apply the style to. In addition, you can rub around the th tags with thead tag, the tr with tbody and the foot(as in sum or totals) with tfoot tag. phew!

>Here, we enter the sematics(study of meaning) of html. The strong tag puts a text in bold whilst telling the bots-spriders-crawlers that this text is important. To human it makes a thing just the sameway putting the text around <b> would; however, the meain difference between the two is that text in strong is considered important in bot world.

he div tag is a general purpose tag. You can use it basicly for anything. By adding it to a class(this is css ignore if you don't know what that is for now, focus on html5), or an ID, you will be able to manipulate and tailor it according to your needs.

This replaces previous partial role of div as "header" in html5. Everypage, almost, contains a header section, which portrays what the page is about, and what it's called. It helps with SEO(search engine obtimaization). The bots+crawlers+spiders know what is in the header.

It's what it sounds line, navigation. It imbodies major links that users might need to navigate through in the website. Ordinarily, the nav is put inside the header, however, on such cases where the website has multiple navigations, or other anomalies, it is placed elsewhere.

In the words of teacher, Barrio Jucanya, "this is where the rubber meats the road." The real content, as in article, is done in here. With styling of the width and display of "table" it would be placed an appropriate place in the site(If you don't know this, this is css, ignroe it for now and focus on HTML).

The footer element goes at the bottom of the page and contains all the information, that is missing elsehwere in the site. Footer, article, nav and header are almost essentiel elements of any website.

The aside element is for anything that is not necesserily related to the main point of the page, things like advertisemt.

Also, part of semantic html. Slightly more weighed by a search engine then a div, because it has a sematic(meaning), the div can be used for other then main content things.

The space created by this tag is useed to load the image from another file. This element doesn't have a closing tag, but to suplly the name-path of the image you want uplouded(assuming it's in the same folder), put scr="name-path of image file" inside the opening tag. To help people with impaired vission, or otherwise just have an explanation text, put also inside the opening tag alt="explanation". Put it together, it should looklike soemthing like this: <img scr="image's saved name" alt="description text">. The source url(src) for the image doesn't have to be from your device(relative path), it can be an absolute path(a url from the internet somewhere else)

Quite intrestingly, you can link an image, that means you can make it so that when you click in it, it takes you to a link. To do so, you simply put the image tag inside an anchor tag. Now, what is this map name=.. thing? Well, more intrestingly, you can make diffrenet parts of your image take you different places. For example, the rightside of this image takes you to w3 website, while the left side takes you to google. Try it and look at the source code.

Here is the syntax that amde this work:

I did couple of things to make this happen: (A) I put it usemap = "name" inside the image tag to declare that I will make a map. (B) I opened a map tag (with name="your declared name in image-tag" inside it). (c) And finnaly, inside the map, I specified to area tags that are rectangles. Inside the two area tags, I especify the shape of the parts as rectangles. The coords thing inside these two areas especifies there location. First, know that "0,0" location is the top-left of the image. So, I started the first area from 0,0, then the following number, x, from 0 to that x, the last fourth number is from zero to that especified y, in this case, 200. Phew! If you don't get it, look it up, I know I did very bad job of explaining, sorry! Hopefully, it gives a starting point.

To get information from users, you need a form that users need to fill out. It starts with the simple form element

The form is the container for the "inputs", things like enter-username, that gather information from the user. Within the opening and closing tag of a form, we put as many inputs as we want. There are however, many types off inputs:

1. text, a one line entry. Here is its syntax: <input type="text" name="the_name" size="20", value=""> and here is how a text input type looks like: . The name attribute is the name for the variable that stores the information for this particular input. So, later, when a programmer wants to process it, the programmer recalls the name of the variable. You can call the variable wharever you want.
2. email. Here is its syntax: <input type="email" name="the_emailname" size="20", value=""> and here is how it looks like: .
3. age. Here is its syntax: <input type="age" name="age" size="20", value=""> and here is how it looks like: .
4. number. Here is its syntax: <input type="number" name="number" size="20", value=""> and here is how it looks like: . The difference between it and text is that the browser checks this is a number.
5. radio. Used for one choice input. Here is its syntax:
   drive<input type="radio" name="commute_method" size="20", value="drive">
   walk<input type="radio" name="commute_method" size="20", value="walk">
   pike<input type="radio" name="commute_method" size="20", value="pike"> and here is how it looks like:
   drive.
   walk.
   pike .
   Notice, you can only select one of these options and not two, that is how a radio-input-type differes from checkbox type, which i descrive next. Aslong as a group of radio boxes have the same name, you can only select one at a time.. Also notice, to put their respective commute type next to radio buttons, I simply put the word "drive" or "pike" next to the input.
6. checkbox. It's imply either checked by the user(true) or not cheked by the user(false). In contrast to previous radio inputs, you can select multiple chekboxes. Here is their syntax: <input type="checkbox" name= "partime" value="partime">
   <input type="checkbox" name= "full-time" value="part-time">
   and here is how they look: partime full-time
7. country. It's, INTRESTINGLY, used for getting a country input from the user. This is how it's done: <select name="country">
   <option value="none selected">please select below </option>
   <option value="Afghanistan">Afghanistan</option> <select>
   You can obviosly add more countries and better yet, make the options something other then country, like ethnicity. Here is how it looks like:
   
   please select below
   Afghanistan
   
8. textarea. If you want to gather a large amount of text, what you need is text area. Here is how it's done: <textarea name="comment" rows="4" maxlength="200" colls="70"><textarea>
   Here is how it will render in browser:
   
   
9. hidden. We can also collect information that the user didn't supply such as device information. that is done by hidden input type. <input type="hidden" name="device_width" value="">
10. Submit. This, obviosly, goes at the bottom of the form after all otehr inputs. When user is done supplying the information though the other inputs, he/she clicks submit to send the row data to the "Servers" where the data gets processed.
    

This is how you display appreviations in html. It gives usefull information to Searhc-engines, browsers and translation systems. Take for example, the apreviation US. If you're using chrome, notice this is underlined. If you however over it, it should tell you what it stands for.

The address tag wrapped around the email doesn't do anything display wise(Exept to tialisize what is in it or eprhaps to add breaks, by some browsers before and after). For example, this is how you might use this to link your email, or physical address:

Here is the syntax of the above address display:

This tag is used embed other objects to our html page, objects like video, audio and even other html pages. Below, I use this element to embed the frontpage of this page:

This is how you embed audio in your pages. Look at this audio:

Here is its syntax:

This is a way to supply only the last part of sources to a hyperlink. For example, you can put in the head:
<base href="www.youtube.com/channels/">
and then when you later want to link a channel to your page, you don't need to type the intire url, you can just type:
<a href="The name of the channel">
Many times, it can be cumbersome and hard to read a html code that contains a very long url. Therefore, the base tag helps minimize this by allowing you to write only the last part of a url if many url's have the same base.

Stands for biderectional Isolation. It's used when the direction of the text supplyed by the user, as in username, is not known. It could be arabic(which is from right to left as opposed to english), therefore to be explecit about that ignorance, we put the username around bdi tag. For more informaiton in w3c click here

ands for bidirectional ovveride. If you wrap this tag around anytext it would change it's direction to your specification. For example this:
<bdo dir="rtl">Hey, how r you!<bdo> results in in left to write:
Hey, how r you!
In contrast, a dir of ltr results in a left to right text.

It's used to quote mla/apa block quotes. Wrapping text around block quotes would cutted form the rest of the text in porpaply formatted block. You can put inside the opening tag cite="the website you're citing". For example

We send information through computers using wires that represent 1s and 0s. Computers need a way to manipulate those 1s and 0s, so that they can eventually do more complicated operations like calculating the 50th digit of \piπpi. Computers use logic gates to transform the 1s and 0s from input wires. A logic gate accepts inputs and then outputs a result based on their state.

the canvas tag is a container that is used to draw graphics or make games via scripting language, such as javascript.

Placed just after the opening tag of the table, the caption tags opening and closing tags contain teh title of the table. It's autamaticly centered.

The cite tag defines the title of a work. As such, it italisises what it's opening and closing tags encompass.

Just used to contain a piece of code. With CSS, it can be usefull!

the command tag is used to hold used to hold events that the user can invoke. With the onclick emthod, it can be usefull with javascript.

When you want a user to select from a list of things, you use the datalist tag. For example, if I want people to select from a list of oeprating systems, this is it's syntax:

A text wrapped around a del opening and closing tag is considered to be deleted one, and as a result is striken_-line through. Conversely, a text wrapped around ins tag is considered to be the new one. For ex:
I commute through driving public transportation..
Look at the source code of the example.

Together with summary tag this is really cool tag. When you're reading, you click one of the drag downs and it opens to for an explanation, right? But how? consider the following example.

Mouse over this term: machine-language* You sea, this term is italicised and it's definition is given whenn you you hover your mouse over it because I used the dfn tag. This is it's syntax:
<dfn title="The definiton goes here">the term goes here</dfn>

em stands for emphasize and whenever a text is contained in opening and closing tags of em, it's italisised.

the embed tag is used to embed other things that require plugins. Things like web pages. for example I embedded the front page of this website here

This is it's syntax: <embed src="source Of the page or other pluggin">

the feildset tags groups related elements together by putting a good looking box around them. Take this form for example:

Images and other figures come up with a caption, we can put the image tag and it's caption inside a figure tag as in:
<figure>
        <img src="source">
        <figcaption>put the caption of the image or figure here<figcaption>
<figure>

Basicly the object tag explaine dpreviously, except that iframe tag has a slightly different syntax. for example, instead of data parameter, it has an src parameter. This is how it looks like: <iframe src="the path of the html document to append"><iframe.

Here is the power that the iframe tag gives you:It allows you to append pdf. You can also append word docx in it, but it won't show up. It will just be downloaded to your bc as soon as you loud the html page containing it. Cool stuff!

If you want to tell a user press a certain key, for example control+e, to do soemthing, you would put the key around kbd tags. Notice how the key contol + e changed font.

???

Labels are joined with radio boxes to use them. Consider the following radio boxe and label: Freewil This si marely done by putting a label tag near the radio tag. Here is the syntax:
<label for="operating System">Freewil</label>
<input type="radio" name="operatings">

The link tag, putted in the head of the document is used to link a html document to a cascading stle sheet(CSS) document. the word cascading cna mean arrangement. Here is it's syntax:
<link rel="stylesheet" type="text/css" href="the path to the css document">

The mark element highlights something like this.
to mark the word something, here is the syntax I used:
<mark>something<>

the menu tag is currently only supported by firefox in mainstream browsers. However, it's intended fo context menus or toolbars. In firefox, a user must right click to view the menu. Here is more information about the menu tag

The meter element is used to portray a certain measurement. For example, here below I use it to show you the amount of cars that are electric in the U.S
**
The meter tag has atributes: value(the percent you want to show), min(the starting point which should be zero) and max(which I suggest 10). Put together, here is the syntax:
<meter value="0.2" min="0" max="10"></meter>

Sometimes, when a user disables scripts in their browser, or the browser doesn't support it, we don't want our program, which was written in scripting language like javascript, to haphazardly crush. We want to handle the exception(also known as error handling) that the browser can't run scripts by pritning alternate text. So, the text you put inside the no script tags will show up as an alternative. Try disabling javascript in your broser and see if you could get the noscript text as an alternative.

This tag is used to group certain options that are similar in html tags. As an example, observe the following select options:
english French Chinse Arabic
notice how there groups of the options. This is done by grouping related options by the optgroup tag. Here is the syntax:
<select>
<optgroup label="Some Westren Languages">
<option value="English">english</option>
<option value="French">French</option>
</optgroup>
<optgroup label="some eastren languages">
<option value="Chinese">Chinse</option>
<option value="Arabic">Arabic</option>
</optgroup>
</select>

this is a cool input type that it gets it's own tag definiton although not a tag. If I wanted u to tell me how much u abhor greediness, I would give u a range to select, as in:

Obviosly, I used javascript to output your set level of greediness to the page; if u want the whole thing, look at the source code. However, in pure html, the range input type is always between 0 and 100. To put it in your page, here is the syntax:
<input type="range">

The output elemen is used to to present the output of culculations. The output tag has three attributes:

• for: this contains the ID's of the elements that went into culculation, separted by spaces.
• form: takes the ID of the form that owns this output. This way you can put the output tag outside of a form.
• name: The name of the tag

The param tag is used to output to pass paramteter(attributes) to the object tag, which we explained earleir in the object tag. For example, here is how we can set the height and width attribute of an imbedded page:

The q tag defines a quoatation. Wrapping text around q tag puts the text outamaticly in quotation marks.

Some languages, such as chinese, Kurian and Arabic have what is known as ruby annotations. These help with those characters. For more informaion on how to use them, read here

The s does the function of the del tag which was explained previosly in this page. It strikes a line through a text, like this.

The samp tag defines a computer output. It changes the font of that given sample out put to memic computers output.

The section tag sets a aprt a section of the document.

This tag defines small text for other less important text, such as copyright sign.

This tag is used to supply the path of an attached audio or video. You can suplly multiple sources so that the browser deosn't haphazardly crush if it doesn't support one of them. For example, look at the audio tag in this page.

Pretty much like div, this tag is used when other semantics are not appropriate. For example, You may use it to style a certain part of the html./p>

Alhtough it can be changed with CSS, the strong tag bolds a text.