HTML 5 _ Introduction HTML stands for Hyper Text Markup Language. HTML Code describes the Content & Structure of the Web Page and tells the Web Browser how to display it on different devices. Basic Structure of HTML Code <doctype> <html> <head> Meta Data </head> <body> Page Content </body> </html> - Defines HTML Version HTML Code Start Head Start Data about the Data Head End Body Start Body End HTML Code End HTML Elements The HTML code is made up of HTML Elements. They are used to describe the web page's structure and are usually made up of two tags: an opening tag and a closing tag. Each HTML element tells the web browser something about the content between its tags. HTML elements can be Nested. This means that elements can contain other elements. Empty HTML Elements HTML elements with no content are called empty elements. They don’t have a closing tag. HTML Tags They are characters or keywords surrounded by angle brackets. The closing tag has an extra forward slash in it. <tag> </tag> <tag /> - Opening Tag Closing Tag Empty Element Document Type Declaration (DTD) All HTML documents must start with a DTD, which is not an HTML element. DTD tells the Web Browser about the version of HTML we are using. In HTML 5, the declaration is simple: <!DOCTYPE html> HTML Attributes Attributes describe features of an element, and are made up of two parts: name and value, separated by an equals sign (=). They should always specified in the opening tag of the element. Multiple attributes can be separated by blank space. The name indicates what kind of information you are specifying about the element's content. It should be written in lowercase. The value is the information for the attribute and should be placed in double quotes. For Normal HTML Element: <tag name=”value” name2=”value2”>CONTENT</tag> For Empty Element: <tag name=”value” name2=”value2” /> Ravi Chaitanya Yalamala URLs in HTML URL stands for Uniform Resource Locator. A URL is the address of a particular resource (file). Such resource can be HTML File, CSS File, JavaScript File, Image etc. There are two ways to specify the URL in the HTML: 1. Absolute URL Links to an external resource that is already hosted on the Web. 2. Relative URL Links to a resource within the Website. Generally, it will be on our Computer only. It’s better to save all those files we use on the website in a folder and its subfolders. That folder is called as Root Folder. HTML File Paths File Path describes the location of a file in a website's root folder structure. It’s used for linking to a Relative URL. In the examples, we use the SRC attribute name to link to the file called sample.png File Path Examples in different cases: 1. <tag src=”sample.png”> When the file is located in the same folder as the page 2. <tag src=”folder/sample.png”> When the file is located in another folder in the current folder 3. <tag src=”../sample.png”> When the file is located in a folder one-level-up from the current folder Note: We can use like folder/folder or ../.. when there are multiple levels. <html> Element The <html> element is the container for all other elements. We can include the lang attribute with it to declare the language of the web page, to assist search engines & web browsers. Ex: <html lang=”en”> <head> Element The <head> element is a container for metadata (data about data) and is placed above the <body> element. The following elements can be placed inside the <head> element: ● <title> ● <meta> ● <style> ● <script> ● <link> <title> Element The <title> tag defines the Title of the Document, and it is shown in the browser's title bar or in the page's tab. It is required in all HTML documents. Ex: <title>Title of the Document</title> <meta> Element Metadata is data about the HTML document and is not displayed. We use various attributes to describe different kinds of metadata. ● To Describe Charset (Default is UTF-8): <meta charset=”UTF-8” /> ● To Describe Document’s Description: <meta name=”description” content=”Type the Description” /> ● To Describe Document’s Keywords (Max 15 words): <meta name=”keywords” content=”word1, word2, word3” /> ● To Describe Document’s Author: <meta name=”author” content=”Developer / Company Name” /> ● To Refresh Page Automatically: <meta http-equiv="refresh" content="30" /> ● To Make Document Responsive: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |1 <style> Element The <style> element is used to define internal CSS for a document. <style> CSS Code Here </style> <script> Element The <script> element is used to embed JavaScript. <script> JavaScript Code Here </script> <link> Element The <link> element defines the relationship between the current document and an external resource. <link rel="Relationship" href="Path to the External Resource"> <body> Element The <body> element contains all the content of an HTML document. It supports Global Attributes and Event Attributes. Types of HTML Attributes 1. Data Attributes They are specific to particular elements and not specific to the HTML version. 2. Global Attributes The Global Attributes can be used with all HTML elements. 3. Event Attributes HTML can let events trigger actions in a browser when a particular event takes place (Ex: A user clicks on an element). The Event Attributes can be added to HTML elements to define event actions. HTML Comments Comments in HTML are not displayed in the browser, but they can be used as Notes for other programmers who read our code. We can add HTML Comments anywhere in the <body> element like below: <!-- Write your comments here --> HTML Comments can also be used to hide content temporarily from the Browser. HTML Element Types by Display Property We can separate HTML Elements into two types by their default display properties. 1. Block-Level Elements A block-level element always starts on a new line, and the browser automatically adds some margin before and after the element. That always takes up the full width available. 2. Inline Elements An inline element does not start on a new line and that only takes up as much width as necessary. Note: A block-level element can contain an inline element but an inline element cannot contain a block-level element. The default display property of an HTML element can be changed by the CSS. Box Model In this model, all HTML elements are considered as boxes. You can imagine that every kind of content will be placed in a box, and all those boxes are situated in a BIG BOX. We generally use <div> element to define a box. Note: Even though this concept is generally taught with CSS, it’s better to learn along with HTML. Ravi Chaitanya Yalamala HTML Element Types by The Meaning of Their Names We can separate HTML Elements into two types by the meaning of their names. 1. Non-Semantic Elements Names of the Non-Semantic Elements tell nothing about their content. In other words, we can’t understand or guess the type of content by the container element’s name. Ex: <div>, <span> etc. 2. Semantic Elements Names of the Semantic Elements tell exactly what type of content they contain. In other words, we can accurately understand or guess the type of the content by the container element’s name. Ex: <p>, <img> etc. There are a few new Semantic Elements introduced with HTML 5, to use instead of the <div> element in the box model. Here are a few of them: 1. <header> The <header> element represents a container for the TOP MOST SECTION of the web page, generally containing the Name/Logo of the Organization or Person. 2. <nav> The <nav> element represents a container for a set of navigation links. Note that all links of a web page needn’t to be inside the <nav> element. 3. <main> The <main> element is used to specify the main content of the web page. It should be unique to the page and there shouldn’t be more than one <main> element. Importantly, it shouldn’t be inside of an <article>, <aside>, <footer>, <header> or <nav> element.. 4. <section> and <article> These <section> and <article> elements are used to define a section in a web page. We can use them both interchangeably and can contain each other. 5. <aside> The <aside> element is used to specify the content aside from the primary content. It is often placed as a sidebar on a web page. Note: The <aside> element doesn’t put the content as a sidebar automatically. It is just the name as it is a Semantic Element. However, we can use the CSS to style the element. 6. <footer> The <footer> element represents a container for the BOTTOM MOST SECTION of the web page. Typically it contains info on the Author, Copyright, Contact etc. We can have multiple <footer> elements on a web page. HTML Headings HTML headings are titles or subtitles that we want to display on a web page. They are defined with the <h1> to <h6> elements, with <h1> defining the most important heading and <h6> defining the least important subheading. It’s important to use HTML Headings as Search engines use them to index the structure and content of our web page. Note: If we want BIGGER HEADING than <h1>, we can specify the size with CSS later. HTML Paragraphs The <p> element defines a paragraph. A paragraph always starts on a new line. Note: If we want a new line without starting a new paragraph, we can use <br /> element for a Line Break. |2
