{"id":55,"date":"2022-03-19T09:26:47","date_gmt":"2022-03-19T09:26:47","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&p=55"},"modified":"2022-03-19T09:36:16","modified_gmt":"2022-03-19T09:36:16","slug":"html-elements","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-elements\/","title":{"rendered":"HTML – Elements"},"content":{"rendered":"\n

An HTML document is made up of HTML elements. These elements are what web designers use to design their web pages. In turn, web browsers use the HTML elements to layout and render the web pages.<\/p>\n\n\n\n

An element in HTML usually consists of an opening or start tag, a closing or end tag, and content inserted between them.<\/p>\n\n\n\n

Some elements have no content and are made up of a start tag only. These elements are called empty elements or void elements.<\/p>\n\n\n\n

The start tag may contain attributes as we will be seeing in the next chapter.<\/p>\n\n\n\n

The format of an element is:<\/p>\n\n\n\n

<tagname>Content goes here...<\/tagname><\/code><\/pre>\n\n\n\n
Notice the end tag has a forward slash. Here is an example of a complete tag.<\/p>\n\n\n\n
<h1>This is a heading<\/h1><\/code><\/pre>\n\n\n\n
Let’s break it down:<\/p>\n\n\n\n
Start Tag<\/strong><\/td>Content<\/strong><\/td>End Tag<\/strong><\/td><\/tr>
<h1><\/code><\/td>This is the heading content.<\/td><\/h1><\/code><\/td><\/tr>
<p><\/code><\/td>This is paragraph content.<\/td><\/p><\/code><\/td><\/tr>
<br><\/code><\/td><\/td><\/td><\/tr>
<hr><\/code><\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Nesting HTML Elements<\/h2>\n\n\n\n
HTML elements with start and end tags can be nested. That is, they can contain other elements as the element content.<\/p>\n\n\n\n
In practice, all HTML documents contain nested elements.<\/p>\n\n\n\n
In this example, the head<\/code> and body<\/code> elements are nested in the html<\/code> element. The title<\/code> element is nested in the head<\/code> element while h1<\/code> and p<\/code> elements are nested in the body<\/code> element.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n   <head>\n      <title>This is document title<\/title>\n   <\/head>\t\n   <body>\n      <h1>A Simple heading<\/h1>\n      <p>Hello World paragraph!<\/p>\n   <\/body>\t\n<\/html><\/code><\/pre>\n\n\n\n
Empty HTML Elements<\/p>\n\n\n\n
Void or Empty HTML elements are elements that do not have an end tag and do not contain content. One example is the <br><\/code> element that is used to represent a line break.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
<p>This is a paragraph <br> with a line break.<\/p><\/code><\/pre>\n\n\n\n
Case Sensitivity<\/p>\n\n\n\n
HTML tags are not case-sensitive. Therefore <H1><\/code> and <h1><\/code> are the same. By convention, we will stick with the lowercase examples in this tutorial series.<\/p>\n\n\n\n
For a complete list of all available HTML tags, visit our HTML Tag Reference.<\/p>\n","protected":false},"excerpt":{"rendered":"
An HTML document is made up of HTML elements. These elements are what web designers use to design their web pages. In turn, web browsers use the HTML elements to layout and render the web pages. An element in HTML usually consists of an opening or start tag, a closing or end tag, and content […]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,8],"yoast_head":"\nLearn HTML Elements<\/title>\n<meta name=\"description\" content=\"HTML elements are collections of start tag, attributes, end tag, and the content that is placed between the start and end tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML Elements\" \/>\n<meta property=\"og:description\" content=\"HTML elements are collections of start tag, attributes, end tag, and the content that is placed between the start and end tag.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-19T09:36:16+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-elements\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-elements\/\",\"name\":\"Learn HTML Elements\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T09:26:47+00:00\",\"dateModified\":\"2022-03-19T09:36:16+00:00\",\"description\":\"HTML elements are collections of start tag, attributes, end tag, and the content that is placed between the start and end tag.\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-elements\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML – Elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn HTML Elements","description":"HTML elements are collections of start tag, attributes, end tag, and the content that is placed between the start and end tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.tutorials\/topic\/html-elements\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML Elements","og_description":"HTML elements are collections of start tag, attributes, end tag, and the content that is placed between the start and end tag.","og_url":"http:\/\/local.tutorials\/topic\/html-elements\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2022-03-19T09:36:16+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-elements\/","url":"http:\/\/local.tutorials\/topic\/html-elements\/","name":"Learn HTML Elements","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T09:26:47+00:00","dateModified":"2022-03-19T09:36:16+00:00","description":"HTML elements are collections of start tag, attributes, end tag, and the content that is placed between the start and end tag.","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-elements\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML – Elements"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/55"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=55"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=55"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}