Html Reference
Starting Elements
| <!DOCTYPE html> | <!DOCTYPE html> goes above the opening <html> tag and tells the browser that this page is html5 webpage. There is a different doctype for every version of html and xhtml. I am just using the html 5 doctype so it is the only one I have listed here. Html5 is considered the latest version of html. |
| <html></html> | Beginning and end of a web page. This tells the browser when the web page starts and when it ends which means this tag is the first and last tag on the web page besides the doctype tag which goes right above the opening html tag. |
| <head></head> | These tags go right after the opening <html> tag. The head section is not viewable in the browser. It contains meta information and the title. You can also put css styling in the head section. Javascript can go in the head section and links to external files like your external style sheet will go in the head section. |
| <title></title> | These tags go in between the 2 head tags. The title appears in the tab at the top of page. Like if you have 2 windows open in the same browser, you click the tab to move from one page to another. That is the tab that is where the text will appear that you put in the <title></title> tags. |
| <body></body> | The body tags go after the closing </head> tag. The closing </body> tag will be right before the closing </html> tag. All the content that appears in the browser go in between the <body></body> tags. |
Meta Tags
| Page Description | <meta name="description" content="Describe your page here."> In 155 characters or less, describe your page as you would want it to appear in a search engine listing. This tag goes in the head section. I have mine right under the title. This tag is not required but you are free to use it. It is a good idea to use this meta tag to describe your page. |
| Page Author | <meta name="author" content="your name here" /> This is a place for your name or the author of the website. This tag is not required but you can use it if you want to. |
| Page Keywords | <meta name="keywords" content="html,CSS,html5,css3" /> This was used in the early days for keywords that search engines will use to log your site but search engines no longer use the keywords so you do not have to use it but you can put it there if you want to. |
| Robots meta tag | <meta name="robots" content="noindex, nofollow"> noindex means to do not index this site and nofollow means do not follow the links on this page.You can use just one of them or both. |
| charset | <meta charset="UTF-8"> Tells the browser that you are using the utf-8 character set. Is not required for page to work. |
| Viewport | <meta name="viewport" content="width=device-width, initial-scale=1.0">
This helps the page fit to the size of your screen and should be on all your pages. width=device-width tells the webpage to follow the width of the device and initial-scale=1.0 sets the zoom level when page is loaded. |
Html links
| Link | <a href="anotherpage.html">Another Page</a> This is a link to another page. You usually see them a blue color and after you click them, they turn another color which you will find information on under the css and how to menus. This is a inline element which flows with the flow of text. With css you can make it a block element. After the href= you put the name of the page you want to open. If the page is in the same folder, you can just type anotherpage.html. But if the page was somewhere else on the internet, you would have to type the whole address like http://www.mywebpage.com. In between the two a tags, you put the name that you want to appear on the web page that people will click. |
| Open in a new page | <a href="anotherpage.html" target="_blank">Another Page</a> Add target="_blank" to make the page open in a new window. |
| Jump Links | This is when you are at the bottom of the page and there is a link that says "go to top". You can creat jumps around the page all you want. Put this at the bottom of the page, <a href="#top">Go to Top</a> perhaps right before the footer. This is what the user will click to get to the top of the page. Then put this at the top of the page right under the body tag <a id="top"></a> This is where you will go when you click the link at the bottom of the page. |
| Link to your external css style sheet | <link href="mystylesheet.css" rel="stylesheet" type="text/css"> This is a link you put in the head section of your html sheet that makes the link to your external style sheet. This has to be there for your external style sheet to work. In the example above, the style sheet is named mystylesheet.css. That is the part you need to change to the name of your style sheet. It is usually put under the title and before the closing head tag. |
Html Layout Elements
| <div></div> | Block element used for laying out sections of your webpage. See div layout under the How To menu. An id selector <div id="footer'> is used for styling the div. See selectors under the css and the How To menus. |
| <div id="wrapper"> </div> | This is used when you want to control the width of a web page. The opening div goes right after the opening body tag and the closing div tag goes right before the closing body tag. Instead of putting all your content in the body section, you put all your content in the <div id="wrapper"></div> section. |
| <h1></h1> to <h6></h6> | These are your heading tags. h1 being the most important and h6 the least important. It is important to use these correctly. H1 would be your most important heading like web site name at the top. h2 the next important. h3 a category and h4 subcategories of h3 section. |
| <p></p> | Paragragh tag. Use it for paragraphs. |
| <header></header> | Html5 semantic layout tag. This tag is used to make the header which is at the top of the page and stretches all the way across it. |
| <nav></nav> | Html5 semantic layout tag. Used for navigation menu. |
| <article></article> | Html5 semantic layout tag. Used for main content area. |
| <footer></footer> | Html5 semantic layout tag. Used for the footer at bottom of page. |
| <aside></aside> | Html5 semantic layout tag. Used for a box placed in the article section or beside article section. |
| <section></section> | Html5 semantic layout tag. Used for a section such as a subsection of a bigger topic. |
| <!-- Comment --> | Comments you can make that does not appear on web page. Great for programmers notes. |
HTML Lists
| <ul></ul> | This is a unordered list. This tag starts and ends the list. It will have a little circle (bullet) at the front of each list item. You can change the circle to another shape with css. |
| <ol></ol> | This is a orderedlist. This tag starts and ends the list. Each list item will be numbered starting at number 1. You can change the one to roman numerals with css. |
| <li></li> | This is a list item. This starts and ends each list item. Each list item will have a bullet or number before it. |
| <dl></dl> | This is a description list. This starts and ends the list. Use the <dt></dt> and <dd></dd> tags with this tag. This makes a list that looks like a word with a definition after it. |
| <dt></dt> | This is a definition term in a <dl></dl> type list. This would be the word you want to define. |
| <dd></dd> | This is the description or definition of the word in the <dt></dt> tag. |
Html Formatting Text
| <b></b> | Putting these tags around text will make it displayed in bold. |
| <strong></strong> | Put these tags around text to show it has importance.They are displayed in bold. |
| <i></i> | Using this tag makes text look like italic text. |
| <em></em> | This indicates emphasized text and is displayed in italic. |
| <mark></mark> | Highlites text. |
| <del></del> | This strikes a line through a |
| <ins></ins> | Underlines text indicating text that has been inserted. |
| <pre></pre> | Pre formatted text. This is to make text appear as it is written on the page. |
| <q></q> | Put a quote in these tags. |
| <small></small> | Use these tags for smaller text. |
| <sub></sub> | These tags make text subscripted |
| <sup></sup> | These tags make text superscripted |
| <p></p> | The Paragraph tag is a block element. It will start on a new line. You put a block of text in these tags.You can style the whole paragraph with CSS. |
HTML for Images
-
<img src="greencar.jpg" alt="Picture of a green car">
img is the image tag. src is a attribute and the name of the picture file goes here. alt is required and you put a brief description of the picture here so that people who cannot see the picture get a brief description of it.
If the picture file is in the same folder as the html file, you can refer to the picture by its name(greencar.jpg).
<img src="greencar.jpg" alt="Picture of a green car">
If it is in a seperate folder but the folder is in the same folder as the html file, you can refer to it like this: pics/greencar.jpg.
<img src="pics/greencar.jpg" alt="Picture of a green car">
Some people like putting there pictures in a seperate folder. Make a folder called pics inside the folder where the html files are. On your webpages make references to them like I wrote them here.
If the pic is on another site, you will need to use the full URL like this:
<img src="http://www.mywebsite.com/greencar.jpg" alt="Picture of a green car">
You can use the .jpg , .gif and .png file extensions for pictures in html. Also, A picture is inline element. Meaning the picture will flow with the flow of text. The picture is the same as a word or letter and will come one behind the other going horizontally across the page. Meaning only one line of text will be beside the picture. The next line will start under the picture. You can float the image with css so you can put many lines of text beside it.You can specify width and height with the width and height attributes.You can also specify width and height with CSS.
<img src="greencar.jpg" alt="Picture of a green car" width="60px" height="60px">
Html for Tables
| <table></table> | First and last tag in a html table. |
| <tr></tr> | First and last tag in each row in the table |
| <th></th> | Table header cell. Bold and centered by default. Used at top of column or left of row to define what is in the column or row. First and last tag in a header cell. Creates one cell. |
| <td></td> | Table Data cell. Regular text and left aligned by default. First and last tag of each cell in a table. You either use the <th></th> tags or the <td></td> tags for each cell in a table. Each row of cells will be in between a set of <tr></tr> Table row tags. All the table rows will be in between a set of <table></table> table tags. |
| <caption></caption> | Table caption appears right above the table to give the table a name. Like the line above this table that says "List of HTML tags for tables".The caption <caption></caption> tags go in between the first <table> tag and the first <tr> tag. |
| <td rowspan="2"></td> | This makes a cell span more than one row. The number is how many rows to span. |
| <td colspan="2"></td> | This makes a cell span more than one column. The number is how many columns to span. |