HTML Elements Introduction Prism Multimedia
HTML Elements • HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. • These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them.
<!DOCTYPE html> <html> <head> <title>HTML Introduction</title> </head> <body> <p> HTML elements are the fundamentals of HTML. These elements are defined using HTML tags. </p> </body> </html>
The <!DOCTYPE... > declaration tells the browser which version of HTML the document is using. • The <html> element is the document's root element - it can be thought of as a container that all other tags sit inside (except for the !DOCTYPE declaration).
The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go. • The <p> tag declares a paragraph. This contains the body text.
HTML elements have opening and closing tags, and that the content of the element is placed in between them. • closing tag is slightly different to the opening tag - the closing tag contains a forward slash (/) after the <.
HTML Formatting Tags There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from <h1> for the most important, to <h6> for the least important.
Header Tags in HTML <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
The <strong> Element <p> <strong>Good Thing:</strong> Try to work on this in Notepad. </p>
The <em> Element You can place an emphasis on text by using the <em> element. Example: <p>Try this HTML Code in <em>Notepad</em>! </p>
Line Breaks You can force a line break by using the <br> element. Example: <p>Here is a <br>line break.</p>
Horizontal Rule You can create a paragraph-level thematic break by using the <hr> element. Therefore, this element allows you to separate different topics into logical groups. Example: <html> <head> </head> <body> Here's one topic... <hr> Here's another topic </body> </html>
Unordered List • To create an unordered list, use the <ul> element to define the list, and the <li> element for each list item. Example: <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Ordered List To create an ordered list, use the <ol> element to define the list, and the <li> element for each list item. Example: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>