Introduction to HTML- Week 3- HTMLSyntax
- 2. Overview Today’s lesson will cover the following: Introduction to HTML HTML Syntax HTML Standard Minimal HTML Testing for valid HTML Testing for Accessibility Publishing
- 3. Introduction to HTML HTML, Hypertext Markup Language, is the language we use to create web documents and applications HTML is an application of something called SGML (Standard Generalized Markup Language) SGML says that a markup language has elements (tags) and attributes, comments and character references/entities
- 4. Introduction to HTML SGML uses a DTD (Document Type Definition) to define a markup language Elements of HTML are defined as tags that have names, and those tags are identified by the tag name inside pointy brackets The DTD also states that any HTML element that can contain text or other HTML elements denote the boundaries of the content with an opening tag and a closing tag
- 5. HTML Syntax HTML is made up of elements, attributes, and comments Elements and attributes are always in all lower-case letters Never use upper-case letters in elements or attributes. This is part of the HTML5 standard.
- 6. Elements HTML consists of a set of pre-defined elements or tags that represent the structure of your web page Many of these elements can contain text, which contains the content of your web page There are elements you will use for paragraphs, document headers and footers, articles, sidebars, lists, tables, forms, and many other standard parts of a document
- 7. Elements There are elements you will use for paragraphs, document headers and footers, articles, sidebars, lists, tables, forms, and many other standard parts of a document Elements don't contain styling properties such as colors, backgrounds, borders, fonts, and layout. These things are configured with CSS (Cascading Stylesheets), which you'll learn in a different set of tutorials Most elements have an opening tag and a closing tag. For example, the paragraph tag <p></p> encloses a paragraph of text and/or other HTML content. A few elements only have an opening tag such as the line-break tag <br> which adds a line break or new-line into a document
- 8. Elements
- 9. Attributes Attributes appear inside an element's opening tag Attributes add extra information to the element Attributes are generally assigned a value. When using an attribute that has a value, always place the value in single- or double-quotes For example, <a href="https://terminallearning.com">Visit TerminalLearning for more tutorials</a> Here the attribute is href
- 10. Comments Comments are special bits of code that are ignored by compilors, parsers, browsers, etc If you have learned a programming language, you've likely learned how to add comments to your program code. We do the same thing in HTML, although the reasons for adding comments and documentation are different The purpose of a comment in programming languages is to describe WHY you're doing something, especially when you're commenting a complex piece of program code or algorithm We also use comments in HTML to label the different parts of our page structure or and explain why we're using certain elements/attributes for certain things
- 11. Comments
- 12. The HTML Living Standard The HTML Living Standard can be found at WHATWG: HTML Living Standard https://html.spec.whatwg.org/ This document outlines the standard structure of HTML documents, the syntax for elements and attributes, and describes the intended use for all the HTML elements and attributes
- 14. Minimal HTML Document Structure In order to remain valid, an HTML document must contain a certain set of elements. These elements are called minimal HTML All documents must contain minimal HTML or they are not valid, well-formed documents (more on what valid/well-formed means later)
- 15. Minimal HTML Document Structure
- 16. Summary of Minimal HTML <!doctype html> or <!DOCTYPE html> The doctype element defines the version of HTML being used. Doctype tells an HTML validator what version of HTML the page should be validated against. The value "html" is used to refer to the current standard version of HTML.
- 17. Summary of Minimal HTML <html lang="en"> The html element contains the entire HTML document, the parent element of all other document elements. The lang="en" attribute inside the HTML element indicates that the document's primary language is in English. This tells screen readers what kind of pronunciation to use when reading the document The lang attribute can be used in other elements, and helps screen readers know what accent to apply to the content of the element
- 18. Summary of Minimal HTML <head> The <head> element contains data about the document The contents of the document head are not visible to the user in the browser viewport (the area inside the browser window that display's the page contents). <title> <title> defines the document's title. This appears in the bookmark list when the page is bookmarked, in the browser window or browser tab when the page is being viewed in the browser and a few other places
- 19. Summary of Minimal HTML <meta> The META element defines data about the document data. For example, it can be used to define the author of the document, a summary description of the document, and many other things The META element's content attribute defines the value of the data item defined with the name attribute
- 20. Summary of Minimal HTML <meta charset="utf-8"> A special <meta> element with the charset attribute defines the character encoding used for the document <body> The <body> element contains all the elements and text content that make up the visible part of the document.
- 21. Some Common HTML Elements: <h1> tag The H1 tag is the HTML tag used to create heading on a webpage (i.e., the H1 or heading one) It contains an opening <h1> tag, the title text, and a closing </h1> tag. The H1 is usually the most prominent text on a page, allowing visitors to quickly learn what the page is about.
- 22. HTML: H1 to H6 Tags <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
- 23. HTML: H1 to H6 Tags
- 24. Some Common HTML Elements: <p> tag There are several ways to display blocks of text, but the most basic and common way is to use the <p> or paragraph element. In fact, most of the blocks of text in these tutorials are in paragraph elements The <p> element is a block element, so it has a new-line above and below: the block always starts on a new line and it ends with a newline
- 25. <p> tag
- 26. Some Common HTML Elements: <br> tag we can use the line break element, which some coders call the "new-line" element. The <br> element adds a line break or a new-line to the content. Note that the <br> element does not have a closing tag! You simply type <br> where you want the line break to go, there is no such thing as </br> Do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the CSS margin property to control their size
- 27. <br> tag
- 28. Some Common HTML Elements: <strong> tag The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency Browsers typically render the contents in bold type
- 29. <strong> Tag
- 30. <strong> tag
- 31. <b> Tag The B or <b> element is not semantic, so it has no meaning, it simply displays its content in bold:
- 32. Differences Between <strong> and <b> Tags When a user is using a screen reader to view your page, the screen reader interprets semantic elements to the user in a different way than non- semantic elements. In the case of the STRONG element, the screen reader will add an audial tone of importance or an emphasis to the content, so that the listening user understands that the content is important. If you use the B element instead, the screen reader will read the content in the same tone as all the rest of the text.
- 33. Some Common HTML Elements: <em> Tag The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis The <em> (emphasis) element is a semantic element
- 34. <em> Tag
- 35. Some Common HTML Elements: <i> Tag The <i> tag in HTML is used to display the content in italic style This tag is generally used to display the technical term, phrase, the important word in a different language The <i> tag is a container tag that contains the opening tag, content & closing tag
- 36. <i> Tag
- 37. Some Common HTML Elements: <a> Tag The <a> tag defines a hyperlink, which is used to link from one page to another The most important attribute of the <a> element is the href attribute, which indicates the link's destination By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
- 38. <a> Tag
- 39. Overview Of The Lesson In this lesson, we learned about what is HTML, why it is used, and how to define some popular HTML elements In the next lesson, we will learn more about HTML elements and attributes