Basic HTML code

These are all core HTML codes.

Before we start ill describe what some things are:

  • (< >) These are called angle brackets
  • The information within the angle brackets are called "Keywords"
  • ( <Keyword> ) This is called a "Tag"
  • Most tags come in pairs
  • The first tag is called the "start tag" and looks like (<Keyword>)
  • The last tag is called the "end tag" and looks like (</Keyword>)
    • The "end tag" starts with an "angle bracket" (<) and is followed by a "slash" (/) 
      • or "forward slash"as we know typically know it. In this case its just called a slash.
    • The (/) is followed by your "keyword" and ends with the opposite angle bracket (>)
    • NOTE: Use lowercase tags. HTML5 reads any cased tag but other versions do not. 
  • A start tag and an end tag will have content between them.
  • Example: <p>Paragraph</p> 
    • <p> (start tag) Paragraph (content)</p> (end tag)
  • A start tag, content and end tag all together is called an "Element".
  • An element containing an element is called a "Nested Element"

<!DOCTYPE html>
Defines the document type to be HTML in HTML5
  • NOTE: All HTML5 documents need to start with this. This declaration is not case sensitive so you can type whatever confusing set of letters you want in terms of upper and lowercase, as long as it says <!doctype html>
<html> and </html>
This is what the document will begin and end with.

<head> and </head>
This is where "Meta Data" will go.
  • You typically put the title of your page here. 
  • This will not appear within your page because it is "meta data"
  • Meta data means, data about the data.
    • This is information that you can reference to.
    • Information like, title and/or character set. 
More ore information about the <head> and </head> element HERE.

<body> and </body>
Everything that is visible within the document will be between these two tags.

<h1> and </h1>
Heading

More information about headings HERE.
<p> and </p>
Paragraph

More information about paragraphs HERE.

<a> and </a>
HTML Links

More information about HTML links HERE.
<img>
HTML Images

More information about HTML images HERE.

<br>
Line Break

More information about Line Breaks HERE.

<hr>
Defines a change in content.
  • Defines a change in content or a shift in topic. 
  • use <hr> after a paragraph element. 
  • <hr> will place a line between the information above and below it. 
<!-- and -->
HTML Comments

More Information about HTML comments HERE.

NOTE: If you want to view the HTML code of another webpage, right click, select "view page source" or "view source" and another page containing the HTML code will appear. 

Comments

Post a Comment