Skip to content

HTML Basics

Jump to bottom
ggrillone edited this page Oct 17, 2012 · 5 revisions

What is HTML?

  • HTML is a front-end web development language
  • It allows you to structure the layout of content
  • Consists of different elements
  • Current version is HTML5

Basic HTML page structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="container">

    <header>
       <nav>
       </nav>
    </header>

    <div class="main-content">
    </div>
    
    <footer>
    </footer>
  </div>
</body>
</html>
```

* Every html page is required to have a DOCTYPE, html tag, head tag, and body tag
* Inside the body <body></body> is where you put all content that will be visual to the users
* Inside the head <head></head> tag is where you can add a Title to your page and put links to external stylesheets and javascript files
* The HTML DOM (Document Object Model) is the standard of manipulating the layout and content on a web page
* If your coming from and Object-Oriented Programming background, you can think of each element in an html page as an object; each tag i.e. `<div></div>` and every piece of text. In html, everything on the web page is an object


## IDs and Classes
* Each html element (in-between the body tags) i.e. `<div></div>` can be assigned a class (or multiple classes) and/or an ID, like so:
`<div id="my-div" class="class-one class-two">Some text...</div>`
* **IDs** must be unique, and you cannot use the same ID for multiple elements
* **Classes** do not have to be unique, and multiple elements can have the same class name
* When you learn about javascript and css, you will see that you can use IDs and Classes to reference the elements

## Some basic HTML elements
* `<!-- everything in here is a comment -->` how to add comments to an HTML page
* `<br/>` this is called a break tag and is used move anything after it to the next line on the page
* `<div></div>` a div tag is used as a container to hold other elements inside of it
* `<h1></h1>` heading tags, these make text in between them much bigger and bolder, the smaller the number i.e. h1, the larger the text. Goes form h1 to h6
* `<header></header>` a new HTML5 element, inside you can define the header of your web page. it can also be used to contain heading tags (above). This tag does not actually do anything except hold other elements. There are several other elements that server this same purpose (to hold other elements). They are important to learn, because they help improve the readability of your code. Because if a different coder is skimming through code, they will know the purpose of everything that is in between the header tag
* `<nav></nav>` another new HTML5 tag, similar to the header tag, except it is meant to hold and elements that are meant for navigation
* `<a href="google.com">Google link</a>` this creates a link to bring a user to a different page
* `<button type="button">Click the button</button>` creates a button that the user can click, there are different types of buttons you can use
* `<input type="text">` this creates an input box that user can type into, there are different types, i.e. password will replace any text with dots
* See more HTML elements: http://www.w3schools.com/tags/default.asp
Clone this wiki locally