HTML 5 Programming and Web development/HTML 5 Elements

HTML Tags In HTML, tags are used to create elements of a web page. Examples of elements are paragraphs and headings. Tags are surrounded by angle brackets, like this: <tag> An example of an HTML 5 tag is h1.This tag creates a heading element and it is written like this. <h1>Hello world!</h1> h1 is the highest-level heading in HTML. Think of it like a headline for a news story. There are two types of tags. The first, like you've seen here, starts with <h1> and ends with </h1>. These markers show where the heading begins and ends. In the same way, a paragraph is marked at the beginning with <p> and at the end with </p>. The second type of tag is self-closing; that is, it does not have a second tag marking its end. Some examples of self-closing tags are <br/> (line break), <hr/> (horizontal rule), <input/> (element that accepts user input), and <meta/> (an element that contains information about the web page itself). While the ending slash (/) on a self-closing tag is optional, it is considered a best practice to include them. HTML Elements An HTML element is an object in a web page. Some examples are images, paragraphs, headings, and videos. They start with a start tag and end with an end tag. HTML 5 has different kinds of elements that we will learn about throughout this course. How to write an HTML Element To write an HTML Element we first write the start tags<title>. Then we write the content of the element: My first HTML Page.Then we write the end tag. </title>. When you put it together you have an HTML element. <title>My first HTML 5 page</title> Nested Elements The content of an HTML element can be another element. This is called "nesting". For example: <head> <title>My first HTML tag</title> </head> Note: New line characters are ignored in HTML 5. <b> This is Multiline Text. </b> This code would actually render like this: This is Multiline Text. To achieve multi-line we actually use the line break tag <br/>. List of HTML 5 Elements Note this is just a short list of elements: <p> <input> <table> <body> <header> <nav> <article> Example of a well formed HTML document about:blank <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Title</title> </head> <body> <p>This is a normal Text</p> <p><b>This Is Bold text</b></p> </body> </html> The <!doctype html> is not an HTML tag, so it has no closing tag or terminating slash. It is a Document Type Definition which we will learn about subsequently.