{"id":54,"date":"2022-03-19T09:18:55","date_gmt":"2022-03-19T09:18:55","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&p=54"},"modified":"2022-03-19T09:28:39","modified_gmt":"2022-03-19T09:28:39","slug":"html-basics","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-basics\/","title":{"rendered":"HTML – Basics"},"content":{"rendered":"\n

The HTML Document forms the basis of what a web page is. All HTML documents must start with a document type declaration: <!DOCTYPE><\/code>. This tells the browser what version of HTML is expected within the document in order for the browser to render the page correctly.<\/p>\n\n\n\n

The <!DOCTYPE><\/code> declaration must appear only once, at the top of the page before any HTML tags, and is not case sensitive.<\/p>\n\n\n\n

The document type declaration below is what you should use as this is the declaration for HTML5, the modern HTML version.<\/p>\n\n\n\n

<!DOCTYPE html><\/code><\/pre>\n\n\n\n
The HTML document itself is a root element marked by a starting tag that begins the element with <html><\/code> and an ending tag that ends the element with <\/html><\/code>. There must only be one element in an HTML document.<\/p>\n\n\n\n
The root element of the non-visible part of the HTML document is <head><\/code> and <\/head><\/code>. Meta-related elements are typically placed within the <head><\/code> element.<\/p>\n\n\n\n
The visible part of the HTML document is the content that appears between <body><\/code> and <\/body><\/code>. It can include other elements, tags, and plain text.<\/p>\n\n\n\n
Example of an HTML document.<\/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
HTML Title<\/h2>\n\n\n\n
The HTML title is defined using the opening <title><\/code> and closing <\/title><\/code> tags. The content (typically plain text) is placed in between these two tags to complete the element. The content represents the title of the HTML document and appears in the Title bar or Tab of the HTML document. It is also the text that is used in search engine results. There must only be one element in an HTML document.<\/p>\n\n\n\n
<title>This is the web page title<\/title><\/code><\/pre>\n\n\n\n
HTML Headings<\/h2>\n\n\n\n
HTML headings are defined with the <h1><\/code> to <h6><\/code> tags.<\/p>\n\n\n\n
<h1><\/code> tag defines the most important heading while <h6><\/code> tag defines the least important heading. An HTML document can have as many of these tags as needed.<\/p>\n\n\n\n
<h1>This is heading 1<\/h1>\n<h2>This is heading 2<\/h2>\n<h3>This is heading 3<\/h3>\n<h4>This is heading 4<\/h4>\n<h5>This is heading 5<\/h5>\n<h6>This is heading 6<\/h6><\/code><\/pre>\n\n\n\n
HTML Paragraphs<\/h2>\n\n\n\n
HTML paragraphs are defined with the <p> tag. An HTML document can have zero or more <p><\/code> tags.<\/p>\n\n\n\n
<p>This is a paragraph.<\/p>\n<p>This is another paragraph.<\/p><\/code><\/pre>\n\n\n\n
HTML Links<\/h2>\n\n\n\n
HTML links are defined with the <a><\/code> tag: The tag also requires the href<\/code> attribute to specify the destination of the link as shown in the example below.<\/p>\n\n\n\n
Note: Attributes are used to provide additional information about HTML elements. We will be looking at attributes later in this tutorial series.<\/p><\/blockquote>\n\n\n\n
<a href="https:\/\/brightwhiz.com">This is a link<\/a><\/code><\/pre>\n\n\n\n
HTML Images<\/p>\n\n\n\n
HTML images are defined with the <img><\/code> tag. This tag requires the src attributes to work as expected. Our example uses the following attributes:<\/p>\n\n\n\n
  • src<\/strong> – The source file (path to the image, base64 representation of the image, vector code such as SVG, etc)<\/li>
  • alt<\/strong> – The text to display if the src above connot retrieve the image<\/li>
  • width <\/strong>– The width of the image<\/li>
  • height <\/strong>– The display height of the image<\/li><\/ul>\n\n\n\n
    <img src="brightwhiz.jpg" alt="brightwhiz.com" width="320" height="270"><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    The HTML Document forms the basis of what a web page is. All HTML documents must start with a document type declaration: <!DOCTYPE>. This tells the browser what version of HTML is expected within the document in order for the browser to render the page correctly. The <!DOCTYPE> declaration must appear only once, at the […]<\/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 Basics<\/title>\n<meta name=\"description\" content=\"Learn the HTML Basics showing you the building blocks from tags to elements and attributes that make up the meat of HTML documents\" \/>\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-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML Basics\" \/>\n<meta property=\"og:description\" content=\"Learn the HTML Basics showing you the building blocks from tags to elements and attributes that make up the meat of HTML documents\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-basics\/\" \/>\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:28:39+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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-basics\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-basics\/\",\"name\":\"Learn HTML Basics\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T09:18:55+00:00\",\"dateModified\":\"2022-03-19T09:28:39+00:00\",\"description\":\"Learn the HTML Basics showing you the building blocks from tags to elements and attributes that make up the meat of HTML documents\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-basics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-basics\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-basics\/#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 – Basics\"}]},{\"@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 Basics","description":"Learn the HTML Basics showing you the building blocks from tags to elements and attributes that make up the meat of HTML documents","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-basics\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML Basics","og_description":"Learn the HTML Basics showing you the building blocks from tags to elements and attributes that make up the meat of HTML documents","og_url":"http:\/\/local.tutorials\/topic\/html-basics\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2022-03-19T09:28:39+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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-basics\/","url":"http:\/\/local.tutorials\/topic\/html-basics\/","name":"Learn HTML Basics","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T09:18:55+00:00","dateModified":"2022-03-19T09:28:39+00:00","description":"Learn the HTML Basics showing you the building blocks from tags to elements and attributes that make up the meat of HTML documents","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-basics\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-basics\/#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 – Basics"}]},{"@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\/54"}],"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=54"}],"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=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=54"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}