Basic HTML Examples
There may be some tags used in this section that you’re not familiat with. Do not worry, these will be explained in coming
tutorials.
HTML Pages
HTML Pages, also called documents must start with a document type decleration like
<!DOCTYPE html>
The HTML page starts and then ends with the
<html> </html> tags.
As menioned before, the visible elements of the page are between the
<body> </body> opening and closing tags.
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
HTML Headings
HTML headings are created using the <h1></h1> down to the <h6></h6> tags. Each decreasing in size and importance.
|
1 2 3 4 5 6 |
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> |
HTML Paragraphs
Paragraphs in HTML are defined with the <p></p> tags.
|
1 2 |
<p>This is your first paragraph.</p> <p>This is your second paragraph.</p> |
HTML Links
HTML links, also known as anchor tags are primarily used to link to another page. The links destination is specified within the href attribute. Attributes are used to provide extra information and sometimes instruction about HTML elements.
|
1 |
<a href="http://jbsoftware.co.uk">Click Here</a> |
HTML Images
HTML Images are defined using the <img> tag. This is one of the rarer tags in HTML that doesnt need a closing tag.
Images in HTML use a few attributes, which should be used as standard practice. src;, which is the image source. alt, Which is the alternative text, often used for accessibility purposes. width and height.
|
1 |
<img src="jbsoftware.jpg" alt="jbsoftware.co.uk" width="125" height="125"> |
HTML Buttons
Buttons are defined using the <button> </button> tags.
|
1 |
<button>Click me</button> |
HTML Lists
HTML has 2 standard types of lists. Ordered and unordered. Ordered lists are numerical and unordered are bullet points. Below are 2 examples, <ul> for an unordered list and <ol> for an ordered list. List items are defined with <li> </li> tags.
|
1 2 3 4 5 |
<ul> <li>Josh</li> <li>Aron</li> <li>Jarrad</li> </ul> |
|
1 2 3 4 5 |
<ol> <li>First</li> <li>Second</li> <li>Third</li> </ol> |
