Page 1 : HTML(HYPER TEXT MARKUP LANGUAGE), HTML TO HTML5, Introduction, , What is HTML?, HTML (Hypertext Markup Language) is not a programming language. It is a markup language that, tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as, the web developer wants it to be. HTML consists of a series of elements, which you use to enclose,, wrap, or mark up different parts of content to make it appear or act in a certain way. The, enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so, on. For example, consider the following line of text:, My cat is very grumpy, , If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a, paragraph (<p>) element:, <p>My cat is very grumpy</p>, , Copy to Clipboard, , Note: Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase., For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will, work. However, it is best practice to write all tags in lowercase for consistency and readability., , Key Points:, , , The word Hypertext refers to the text which acts as a link., , , , The word markup refers to the symbols that are used to define structure of the text. The, markup symbols tells the browser how to display the text and are often called tags., , , , The word Language refers to the syntax that is similar to any other language., , HTML was created by Tim Berners-Lee at CERN., , The History of HTML
Page 2 :
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting, in 1989. It stands for Hyper Text Markup Language., Hypertext means that the document contains links that allow the reader to jump to, other places in the document or to another document altogether. The latest version is, known as HTML5., A Markup Language is a way that computers speak to each other to control how text, is processed and presented. To do this HTML uses two things: tags and attributes., , HTML Versions, The following table shows the various versions of HTML:, Version, , Year, , HTML 1.0, , 1991, , HTML 2.0, , 1995, , HTML 3.2, , 1997, , HTML 4.0, , 1999, , XHTML, , 2000, , HTML5, , 2012, , HTML Tags, Tag is a command that tells the web browser how to display the text, audio, graphics or video on a, web page., Key Points:, , , Tags are indicated with pair of angle brackets.
Page 3 :
, , They start with a less than (<) character and end with a greater than (>) character., , , , The tag name is specified between the angle brackets., , , , Most of the tags usually occur in pair: the start tag and the closing tag., , , , The start tag is simply the tag name is enclosed in angle bracket whereas the closing tag is, specified including a forward slash (/)., , , , Some tags are the empty i.e. they don’t have the closing tag., , , , Tags are not case sensitive., , , , The starting and closing tag name must be the same. For example <b> hello </i> is invalid as, both are different., , , , If you don’t specify the angle brackets (<>) for a tag, the browser will treat the tag name as a, simple text., , , , The tag can also have attributes to provide additional information about the tag to the browser., , Basic tags, The following table shows the Basic HTML tags that define the basic web page:, Tag, , Description, , <html> </html>, , Specifies the document as a web page., , <head> </head>, , Specifies the descriptive information about the web documents., , <title> </title>, , Specifies the title of the web page., , <body> </body>, , Specifies the body of a web document., , The following code shows how to use basic tags., <html>, <head> Heading goes here…</head>, <title> Title goes here…</title>, <body> Body goes here…</body>, </html>, , Formatting Tags, The following table shows the HTML tags used for formatting the text:
Page 4 : Tag, , Description, , <b> </b>, , Specifies the text as bold. Eg. this is bold text, , <em> </em>, , It is a phrase text. It specifies the emphasized text. Eg. Emphasized text, , <strong> </strong>, , It is a phrase tag. It specifies an important text. Eg. this is strong text, , <i> </i>, , The content of italic tag is displayed in italic. Eg. Italic text, , <sub> </sub>, , Specifies the subscripted text. Eg. X1, , <sup> </sup>, , Defines the superscripted text. Eg. X2, , <ins> </ins>, , Specifies the inserted text. Eg. The price of pen is now 2015., , <del> </del>, , Specifies the deleted text. Eg. The price of pen is now 2015., , <mark> </mark>, , Specifies the marked text. Eg. It is raining, , Table Tags, Following table describe the commonaly used table tags:, Tag, , Description, , <table> </table>, , Specifies a table., , <tr> </tr>, , Specifies a row in the table., , <th> </th>, , Specifies header cell in the table.
Page 5 : <td> </td>, , Specifies the data in an cell of the table., , <caption> </caption>, , Specifies the table caption., , <colgroup> </colgroup>, , Specifies a group of columns in a table for formatting., , List tags, Following table describe the commonaly used list tags:, Tag, , Description, , <ul> </ul>, , Specifies an unordered list., , <ol> </ol>, , Specifies an ordered list., , <li> </li>, , Specifies a list item., , <dl> </dl>, , Specifies a description list., , <dt> </dt>, , Specifies the term in a description list., , <dd> </dd>, , Specifies description of term in a description list., , Frames, Frames help us to divide the browser’s window into multiple rectangular regions. Each region, contains separate html web page and each of them work independently., A set of frames in the entire browser is known as frameset. It tells the browser how to divide browser window, into frames and the web pages that each has to load., The following table describes the various tags used for creating frames:, Tag, , Description
Page 6 :
<frameset>, </frameset>, , It is replacement of the <body> tag. It doesn’t contain the tags that are normally, used in <body> element; instead it contains the <frame> element used to add, each frame., , <frame>, </frame>, , Specifies the content of different frames in a web page., , <base> </base>, , It is used to set the default target frame in any page that contains links whose, contents are displayed in another frame., , Forms, Forms are used to input the values. These values are sent to the server for processing. Forms uses, input elements such as text fields, check boxes, radio buttons, lists, submit buttons etc. to enter the, data into it., The following table describes the commonly used tags while creating a form:, Tag, , Description, , <form> </form>, , It is used to create HTML form., , <input> </input>, , Specifies the input field., , <textarea> </textarea>, , Specifies a text area control that allows to enter multi-line text., , <label> </label>, , Specifies the label for an input element., , HTML Page Structure, Below is a visualization of an HTML page structure:
Page 7 : <html>, <head>, <title>Page title</title>, </head>, <body>, <h1>This is a heading</h1>, <p>This is a paragraph.</p>, <p>This is another paragraph.</p>, </body>, </html>, Note: The content inside the <body> section (the white area above) will be displayed in a, browser. The content inside the <title> element will be shown in the browser's title bar or in, the page's tab., , What is a table ?, A table is a structured set of data made up of rows and columns (tabular data). A table allows you to, quickly and easily look up values that indicate some kind of connection between different types of, data, for example a person and their age, or a day of the week, or the timetable for a local swimming, pool.
Page 8 :
Tables are very commonly used in human society, and have been for a long time, as evidenced by this, US Census document from 1800:
Page 9 :
It is therefore no wonder that the creators of HTML provided a means by which to structure and, present tabular data on the web., , How does a table work?, The point of a table is that it is rigid. Information is easily interpreted by making visual associations, between row and column headers. Look at the table below for example and find a Jovian gas giant, with 62 moons. You can find the answer by associating the relevant row and column headers., When implemented correctly, HTML tables are handled well by accessibility tools such as screen, readers, so a successful HTML table should enhance the experience of sighted and visually impaired, users alike., , Table styling, You can also have a look at the live example on GitHub! One thing you'll notice is that the table does, look a bit more readable there — this is because the table you see above on this page has minimal, styling, whereas the GitHub version has more significant CSS applied.
Page 10 : Be under no illusion; for tables to be effective on the web, you need to provide some styling, information with CSS, as well as good solid structure with HTML. In this module we are focusing on, the HTML part; to find out about the CSS part you should visit our Styling tables article after you've, finished here., We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use, that will make your tables more readable than the default you get without any styling. You can find, the stylesheet here, and you can also find an HTML template that applies the stylesheet — these, together will give you a good starting point for experimenting with HTML tables., , When should you NOT use HTML tables?, HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot, of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row, to contain the content columns, one row to contain the footer, etc. You can find more details and an, example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS, support across browsers used to be terrible; table layouts are much less common nowadays, but you, might still see them in some corners of the web., In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are, as follows:, 1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind, people, interpret the tags that exist in an HTML page and read out the contents to the user., Because tables are not the right tool for layout, and the markup is more complex than with CSS, layout techniques, the screenreaders' output will be confusing to their users., 2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex, markup structures than proper layout techniques. This can result in the code being harder to, write, maintain, and debug., 3. Tables are not automatically responsive: When you use proper layout containers (such, as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent, element. Tables on the other hand are sized according to their content by default, so extra, measures are needed to get table layout styling to effectively work across a variety of devices., , Active learning: Creating your first table, We've talked table theory enough, so, let's dive into a practical example and build up a simple table., 1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory, on your local machine., 2. The content of every table is enclosed by these two tags : <table></table>. Add these inside, the body of your HTML.
Page 11 :
3. The smallest container inside a table is a table cell, which is created by a <td> element ('td', stands for 'table data'). Add the following inside your table tags:, 4. <td>Hi, I'm your first cell.</td>, , Copy to Clipboard, 5. If we want a row of four cells, we need to copy these tags three times. Update the contents of, your table to look like so:, 6., 7., 8., 9., , <td>Hi,, <td>I'm, <td>I'm, <td>I'm, , I'm your first cell.</td>, your second cell.</td>, your third cell.</td>, your fourth cell.</td>, , Copy to Clipboard, As you will see, the cells are not placed underneath each other, rather they are automatically aligned, with each other on the same row. Each <td> element creates a single cell and together they make up, the first row. Every cell we add makes the row grow longer., To stop this row from growing and start placing subsequent cells on a second row, we need to use, the <tr> element ('tr' stands for 'table row'). Let's investigate this now., 1. Place the four cells you've already created inside <tr> tags, like so:, 2. <tr>, 3., <td>Hi,, 4., <td>I'm, 5., <td>I'm, 6., <td>I'm, 7. </tr>, , I'm your first cell.</td>, your second cell.</td>, your third cell.</td>, your fourth cell.</td>, , Copy to Clipboard, 8. Now you've made one row, have a go at making one or two more — each row needs to be, wrapped in an additional <tr> element, with each cell contained in a <td>., , Result, This should result in a table that looks something like the following:, Note: You can also find this on GitHub as simple-table.html (see it live also)., , Adding headers with <th> elements, Now let's turn our attention to table headers — special cells that go at the start of a row or column, and define the type of data that row or column contains (as an example, see the "Person" and "Age"
Page 13 : 2. To recognize the table headers as headers, both visually and semantically, you can use, the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>,, except that it denotes a header, not a normal cell. Go into your HTML, and change all, the <td> elements surrounding the table headers into <th> elements., 3. Save your HTML and load it in a browser, and you should see that the headers now look like, headers., Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also)., , Why are headers useful?, We have already partially answered this question — it is easier to find the data you are looking for, when the headers clearly stand out, and the design just generally looks better., Note: Table headings come with some default styling — they are bold and centered even if you don't, add your own styling to the table, to help them stand out., , Tables headers also have an added benefit — along with the scope attribute (which we'll learn about, in the next article), they allow you to make tables more accessible by associating each header with all, the data in the same row or column. Screenreaders are then able to read out a whole row or column, of data at once, which is pretty useful., , Allowing cells to span multiple rows and columns, Sometimes we want cells to span multiple rows or columns. Take the following simple example, which, shows the names of common animals. In some cases, we want to show the names of the males and, females next to the animal name. Sometimes we don't, and in such cases we just want the animal, name to span the whole table., The initial markup looks like this:, <table>, <tr>, <th>Animals</th>, </tr>, <tr>, <th>Hippopotamus</th>, </tr>, <tr>, <th>Horse</th>, <td>Mare</td>, </tr>, <tr>, <td>Stallion</td>
Page 14 :
</tr>, <tr>, <th>Crocodile</th>, </tr>, <tr>, <th>Chicken</th>, <td>Hen</td>, </tr>, <tr>, <td>Rooster</td>, </tr>, </table>, , Copy to Clipboard, But the output doesn't give us quite what we want:, We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and, "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have, the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless, number value, which equals the number of rows or columns you want spanned. For, example, colspan="2" makes a cell span two columns., Let's use colspan and rowspan to improve this table., 1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory, on your local machine. The HTML contains the same animals example as you saw above., 2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two, columns., 3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows., 4. Save and open your code in a browser to see the improvement., Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also)., , Providing common styling to columns, Styling without <col>, There is one last feature we'll tell you about in this article before we move on. HTML has a method of, defining styling information for an entire column of data all in one place —, the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient, having to specify styling on columns — you generally have to specify your styling information, on every <td> or <th> in the column, or use a complex selector such as :nth-child.
Page 15 : Note: Styling columns like this is limited to a few properties: border, background, width,, and visibility. To set other properties you'll have to either style every <td> or <th> in the column, or, use a complex selector such as :nth-child., , Take the following simple example:, <table>, <tr>, <th>Data 1</th>, <th style="background-color: yellow">Data 2</th>, </tr>, <tr>, <td>Calcutta</td>, <td style="background-color: yellow">Orange</td>, </tr>, <tr>, <td>Robots</td>, <td style="background-color: yellow">Jazz</td>, </tr>, </table>, , Copy to Clipboard, Which gives us the following result:, This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd, probably have a class set on all three in a real project and specify the styling in a separate stylesheet)., , Styling with <col>, Instead of doing this, we can specify the information once, on a <col> element. <col> elements are, specified inside a <colgroup> container just below the opening <table> tag. We could create the, same effect as we see above by specifying our table as follows:, <table>, <colgroup>, <col>, <col style="background-color: yellow">, </colgroup>, <tr>, <th>Data 1</th>, <th>Data 2</th>, </tr>, <tr>, <td>Calcutta</td>, <td>Orange</td>, </tr>, <tr>, <td>Robots</td>, <td>Jazz</td>, </tr>
Page 16 : </table>, , Copy to Clipboard, Effectively we are defining two "style columns", one specifying styling information for each column., We are not styling the first column, but we still have to include a blank <col> element — if we didn't,, the styling would just be applied to the first column., If we wanted to apply the styling information to both columns, we could just include, one <col> element with a span attribute on it, like this:, <colgroup>, <col style="background-color: yellow" span="2">, </colgroup>, , Copy to Clipboard, Just like colspan and rowspan, span takes a unitless number value that specifies the number of, columns you want the styling to apply to., , Active learning: colgroup and col, Now it's time to have a go yourself., Below you can see the timetable of a languages teacher. On Friday she has a new class teaching, Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to, highlight the columns containing the days she is teaching., Recreate the table by following the steps below., 1. First, make a local copy of our timetable.html file in a new directory on your local machine. The, HTML contains the same table you saw above, minus the column styling information., 2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which, you can add your <col> elements (see the remaining steps below)., 3. The first two columns need to be left unstyled., 4. Add a background color to the third column. The value for your style attribute is backgroundcolor:#97DB9A;, , 5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;, 6. Add a background color to the fifth column. The value for your style attribute is backgroundcolor: #97DB9A;, , 7. Add a different background color plus a border to the sixth column, to signify that this is a, special day and she's teaching a new class. The values for your style attribute are backgroundcolor:#DCC48E; border:4px solid #C1437A;, , 8. The last two days are free days, so just set them to no background color but a set width; the, value for the style attribute is width: 42px;, See how you get on with the example. If you get stuck, or want to check your work, you can find our, version on GitHub as timetable-fixed.html (see it live also).
Page 17 :
Summary, That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly, more advanced table features, and start to think how accessible they are for visually impaired people., , Creating Your First HTML WebpageFirst off, you need to open your HTML editor, where you will find a clean white page on which to, write your code., From there you need to layout your page with the following tags., , Basic Construction of an HTML PageThese tags should be placed underneath each other at the top of every HTML page that you create., <!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the, language is HTML 5., <html> — This tag signals that from here on we are going to write in HTML code., <head> — This is where all the metadata for the page goes — stuff mostly meant for search, engines and other computer programs., <body> — This is where the content of the page goes., , Further Tags, Inside the <head> tag, there is one tag that is always included: <title>, but there are others that, are just as important:, <title>, This is where we insert the page name as it will appear at the top of the browser window, or tab., <meta>, This is where information about the document is stored: character encoding, name (page, context), description., Let’s try out a basic <head> section:, , <head>, <title>My First Webpage</title>
Page 18 : <meta charset="UTF-8">, <meta name="description" content="This field contains information about your page., It is usually around two sentences long.">., <meta name="author" content="Conor Sheils">, </header>, , Adding Content, Next, we will make <body> tag., The HTML <body> is where we add the content which is designed for viewing by human eyes., This includes text, images, tables, forms and everything else that we see on the internet, each day., , How to Add HTML Headings To Your Web Page, In HTML, headings are written in the following elements:, , o, , , , , , <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, As you might have guessed <h1> and <h2> should be used for the most important titles, while, the remaining tags should be used for sub-headings and less important text., Search engine bots use this order when deciphering which information is most important on, a page., , Creating Your Heading, Let’s try it out. On a new line in the HTML editor, type:, <h1>Welcome to My Page</h1>, And hit save. We will save this file as “index.html” in a new folder called “my webpage.”, , The Moment of Truth: Click the newly saved file and your first, ever web page should open in your default browser. It may not be, pretty it’s yours… all yours. *Evil laugh*, Well let’s not get carried away; we’ve still got loads of great features that we can add to your, page., , How To Add Text In HTML, Adding text to our HTML page is simple using an element opened with the, tag <p> which creates a new paragraph. We place all of our regular text inside the, element <p>.
Page 19 : When we write text in HTML, we also have a number of other elements we can use to control, the text or make it appear in a certain way., , Other Key Elements, They are as follows:, , Element, , Meaning, , Purpose, , <b>, , Bold, , Highlight important informatio, , <strong>, , Strong, , Similarly to bold, to highlight, , <i>, , Italic, , To denote text, , <em>, , Emphasised Text, , Usually used as image caption, , <mark>, , Marked Text, , Highlight the background of th, , <small>, , Small Text, , To shrink the text, , <strike>, , Striked Out Text, , To place a horizontal line acro, , <u>, , Underlined Text, , Used for links or text highligh, , <ins>, , Inserted Text, , Displayed with an underline to, , <sub>, , Subscript Text, , Typographical stylistic choice, , <sup>, , Superscript Text, , Another typographical present, , These tags must be opened and closed around the text in question., Let’s try it out. On a new line in the HTML editor, type the following HTML code:, <p>Welcome to <em>my</em> brand new website. This site will be my, <strong>new<strong> home on the web.</p>, Don’t forget to hit save and then refresh the page in your browser to see the results.
Page 20 : How To Add Links In HTML, As you may have noticed, the internet is made up of lots of links., Almost everything you click on while surfing the web is a link takes you to another, page within the website you are visiting or to an external site., Links are included in an attribute opened by the <a> tag. This element is the first that we’ve, met which uses an attribute and so it looks different to previously mentioned tags., , The Anchor Tag, The <a> (or anchor) opening tag is written in the format:, <a href="https://blogging.com/how-to-start-a-blog/">Your Link Text, Here </a>, The first part of the attribute points to the page that will open once the link is clicked., Meanwhile, the second part of the attribute contains the text which will be displayed to a, visitor in order to entice them to click on that link., If you are building your own website then you will most likely host all of your pages on, professional web hosting. In this case, internal links on your website will <a, href=”mylinkedpage.html”>Linktle Here</a>., , Let’s Create An Anchor Tag, Let’s try it out. Make a duplicate of the code from your current index.html page. Copy / paste it, into a new window in your HTML editor., Save this new page as “page2.html” and ensure that it is saved in the same folder as, your index.html page., On page2.html add the following code:, <a href="http://www.google.com">Google</a>, This will create a link to Google on page 2. Hit save and return to your index.html page., On a new line on index.html add the following code:, <a href="*folder(s)*/page2.html">Page2</a>, Ensure the folder path to the file (page2.html) is correct. Hit save and preview index.html in, your browser., If everything is correct then you will see a link which will take you to your second page., On the second page, there will be a link that will take you to google.com., , How To Add Images In HTML To Your Website
Page 21 : In today’s modern digital world, images are everything. The <img> tag has everything you, need to display images on your site. Much like the <a> anchor element, <img> also contains, an attribute., The attribute features information for your computer regarding, the source, height, width and alt text of the image., You can also define borders and other styles around the image using the class attribute. However, we, shall cover this in a later tutorial., The file types generally used for image files online are: .jpg, .png, and (less and less) .gif., Alt text is important to ensure that your site is ranked correctly on search sites and also for visually, impaired visitors to your site., The <img> tag normally is written as follows:, <img src="yourimage.jpg" alt="Describe the image" height="X" width="X">, Let’s try it out., , Create Your Own Image With An Alt Text, , Don’t be afraid to play around with the test code – it’s a great way to have fun, while learning., Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve, saved index.html and page2.html. Call this image “testpic.jpg.”, On a new line in your HTML editor enter the following code:, <img src="testpic.jpg" alt="This is a test image" height="42" width="42">, Hit save and preview the index.html page in your browser., , How To Make an HTML List, In web design, there are 3 different types of lists which you may wish to add to your site., Ordered List, The first is an <ol>: This is an ordered list of contents. For example:, 1. An item, 2. Another item, 3. Another goes here., Inside the <ol> tag we list each item on the list inside <li> </li> tags., For example:, , <ol>, <li>An item </li>, <li>Another item </li>, <li>Another goes here </li>
Page 22 : </ol>, , Unordered List, The second type of list that you may wish to include is an <ul> unordered list. This is better known as, a bullet point list and contains no numbers., An example of this is:, <ul>, <li>This is </li>, <li>An Unordered </li>, <li>List </li>, </ul>, , Definition List, Finally, you may wish to include a definition list <dl> on your page. An example of a <dl> list is as, follows:, HTML, Hypertext markup language is a programming language used to create web pages and is, rendered by a web browser., The code used for the above is as follows:, , <dl>, <dt>Item</dt>, <dd>The definition goes here</dd>, </dl>, , Let’s try it out. Open index.html and on a new line, enter the following HTML:, <p>This website will have the following benefits for my business:</p>, <ul>, <li>Increased traffic </li>, <li>Global Reach</li>, <li>Promotional Opportunities</li>, </ul>, Now hit save and check out the results in your browser. If everything worked out then it will display a bullet-pointed table displaying the information above., , Defining the Structure of a Form, Every web form must be wrapped in <form> tags. In most cases, all of the form fields will be nested, between these tags. There are several attributes that may optional be used with the form element,
Page 23 : including: accept-charset: This optional attribute is used to identify the character encodings, acceptable to the server and code processing form input. If more than one encoding is specified, one, space should be placed between each encoding. If left blank or not provided, the encoding will default, to the same encoding as the document containing the form. action: This attribute is used to specify, a URL where form data should be sent (for instance: http://example.com/form_file.php). This field was, required prior to HTML5 but is now optional. autocomplete: Use this attribute if you want the, visitors browser to suggest form responses based on saved entries. The default value, is autocomplete="on". If you turn autocomplete off you must also turn it off on every field that may, allow autocompletion. enctype: Used to specify how form data should be encoded. Only used if, the method attribute mentioned below is set to post. There are three possible values:, , , , , application/x-www-form-urlencoded: The default value which replaces all spaces with “+”, and converts all special characters to ASCII HEX values., multipart/form-data: Nothing is encoded. Input is uploaded to the server exactly as it is entered, into the form., text/plain: Spaces are converted into “+” symbols, but not other characters are encoded., method: Dictates the HTTP method a website visitors browser should use to submit form data., If post is specified, form data is enclosed in the body of the HTTP request. If get is specified, form, data is appended to the end of the URL specified in the action attribute with a “?” symbol, data, length is limited to 300 characters, and form input is visible and can be bookmarked. name: Similar to, an id attribute, a name is a unique identifier that may only be used once within an HTML document, and may be used to select the form with JavaScript or another scripting language. novalidate:, Used to override the default validation of form data. target: Specifies where to display the response, received after submitting the form., , , , , , , _self loads the response in the same frame., _blank opens a new window or tab., _parent is used when a form is nested in a descendant browsing context to load the response in the, parent context and behaves the same as _self is there is no parent context., _top is similar to _parent but select the top level browsing context rather than the immediate parent, context., , Grouping Form Fields, The <fieldset> element is used to group together related form fields. It may also be used to, contain an entire form to provide a visual cue that distinguishes the form from surrounding content., The first element within a fieldset is usually a <legend>. The legend will be displayed a part of, the fieldset border giving website visitors a clue about the purpose of a form. For example, if a, contact form were nested within a web page full of otherwise unrelated content,, the fieldset element could be used in combination with the legend element to isolate the contact, form from the rest of the content both semantically and visually., <p>Paragraph content.</p> <form>, <fieldset disabled>, <legend>Contact Form</legend>, <!--These elements are discussed later in this tutorial-->, <p>Name: <input type="text, " size="30"></p>, <p>Email: <input type="text" size="30"></p>, <p>Subject: <input t
Page 24 : ype="text" size="30"></p>, <p><input type="submit"></p>, , <p>Message: <textarea>Type your message here</textarea></p>, </fieldset> </form> <p>Additional paragraph content</p>, , When rendered in the browser, the contact form would be clearly separated from surrounding, content., Paragraph content., Contact Form, Name:, Email:, Subject:, Message:, , Additional paragraph content, , The fieldset element is optional but is commonly used to group related elements on long and, complex forms, or to isolate form fields from nearby elements when a form is presented along with, non-form content. HTML5 added three attributes which can be applied to fieldset elements:, , , , , disabled: Used to disable all of the forms in a fieldset. Note that we used this attribute in the, example form above., form: Used to associate a fieldset with the id of one or more form elements. Note that browser, support for this attribute is very limited., name: Associates a name with the fieldset., , The Input Element, Depending on the type of form you are creating, it’s entirely possible to have a form that only includes, two types of elements: one form element and one or more input elements. The <input> element, is used to create a variety of different types of input fields for form users to interact with., , Common <input type=""> Values, The input element is a very flexible element who appearance and behavior can change dramatically, based on the type attribute applied to the element. The most common type values include: text:, The default value for the type="" attribute. Defines a single line of text 20 characters wide. The, width can be adjusted with the size attribute as you can see in the form code in our previous, example. password: The password type is basically the same as the text field with the exception that, characters entered into a password field are masked. radio: Radio buttons can be used to provide, multiple options of which only one may be chosen. checkbox: Checkboxes are similar to radio, buttons, but more than one selection can be active at a time. This means multiple values can be, submitted with a set of checkboxes while a set of radio buttons will only accept one value. submit:, The submit type value creates a form submission button. When clicked, the form will take the action, specified in the action attribute associated with the form element. Many forms make use of just
Page 25 :
one or two input types, and most simple forms are built using just the types listed above. However,, there are many additional types you can use to accept form data that doesn’t fit into any of the types, listed above., , Less Common <input type=""> Values, These input types are less common than those listed above but are supported by virtually all, browsers and can be used to build many different types of form inputs. button: If you want to run, a script when a button is clicked, the button input type can be used to create a button which can, be associated with a variety of actions. hidden: This attribute type is usually used simultaneously, with the value attribute, which we’ll cover momentarily, to add a pre-defined value to every form, submission. For example, if you have contact forms on five different pages you could add <input, type="hidden" value="page_name"> to each form to submit the name of the page where the, contact form was submitted from. reset: This type is used to create a reset button that will return, all form fields to their default state. file: If you want to allow form users to upload and submit, files, <input type="file"> will provide that capability. image: In the past, it was common to use, an image as a submit button. While this type value is still valid, it is not used very frequently in, modern web form design. Instead, use CSS to style the button., , New <input type=""> Values Added by HTML5, Several additional input types are defined by the HTML5 specification. Many of these types have, limited browser support. So if you use them, be sure to check caniuse.com for browser support and, provide adequate fallback options where appropriate. search: This is the proper type to specify if, your form provides search functionality. Unlike most of the other types of inputs added in, HTML5, type="search" is supported by all browsers. Just remember that this feature doesn’t, actually provide search functionality, it just creates a form input field designed to be used as a part of, a search feature. color: When this input type is specified it will display a colored-button that, launches a basic color selector tool. Set the default color value by using the value attribute and a, hex color code like this: <input type="color" value="#0000FF">. number: This type, produces a field for entering a number which has increment buttons on the righthand side of box., Limits can be placed on the range of acceptable entries with the max, min, and step attributes, but, browsers that lack support for this element typically fallback to a standard text input that does not, recognize these limits. range: Browser support for this element is pretty good with a few exceptions., Use this attribute to produce a slider which can be used to select a value within a specified range. For, example, this code would produce a slider to select a number between 100 and 1000 in increments of, 50: <input type="range" name="range" min="100" max="1000" step="50">. You’ll, need to pair the range element with another technique to provide a live preview of the selected, value. Thankfully, HTML5 Doctor has a simple way to do this using the output element. Date and, Time Types: HTML5 added a number of input types that can be used to specify time and date, values. For example, the date type defines a control to enter a year, month, and day. To add time to, the date input, use datetime-local. If you want time without date information use the time input, type. Less specific input types include the month and week options which can be used to select a, week or month within a year without specifying the day or time. Browsers have been slow to add, support for this type, so be sure to check for browser support and provide fallbacks if you use this, type of input. Contact Detail Types: Broad support is available for the three input types used to
Page 26 :
collect pertinent details like email addresses (email), telephone numbers (tel), and website URLs, (url)., , Common Input Attributes, While the type attribute is by far the most-used and most useful input attribute, there are several, other attributes you will need to know to build useful forms. name: The name assigned to, an input element will be submitted along with the value entered into the associated field. In other, words, if the value “Fred” were entered into an input element with this code <input type="text", name="first_name"> the value submitted would be “first_name=Fred”. value: The value of an, input element performs a different function depending on the type of input it is applied to. When, applied to the submit, reset, or button types the value is used as the text on the button. When, applied to text fields it provides the default value associated with the field. When associated with a, checkbox or radio button, the value provides the value that will be associated with that field if, selected., , Free Form Text Areas, All of the text inputs we’ve seen so far, such as <input type="text">, only accept a single line of, text. However, if you want to create a larger text area for longer text input a single line input field isn’t, going to work. The textarea element is the correct choice for creating a large text input area, capable of accepting text input that won’t render well on a single line. There are three parts to, a textarea:, 1. The textarea is created by inserting opening and closing tags. Any text nested between the tags, will be loaded in the text area when the form loads and will be submitted along with the form unless, the visitor submitting the form deletes the text out of the textarea., 2. If you want to define the size of the text area use the rows attribute to define the number of rows of, text that should able to be displayed without resizing the text area., 3. To set a predefined width use the cols attribute. The value applied will be the number of characters, that will appear on a single row before wrapping to the second row., Text area elements are resizable. However, the rows and cols attributes will define the size of, the textarea when it is first rendered by the browser and will also set the minimum space the area, may be resized to fit., <textarea rows="3" cols="60" placeholder="Enter Text Here"> </textarea> <b, r> <textarea rows="3" cols="60">, Enter Text Here </textarea>, This code will produce two identically sized text areas that are three rows tall and can accept 60, characters per row. They will be resizable to any size larger than the default size. Note how the, placeholder text was added to the first with the placeholder element but simply nested between, the opening and closing tags in the second example. Below you can see how these two bits of code, are rendered.
Page 27 :
While textarea size can be specified using ‘rows’ and ‘cols’, it is a better practice to use CSS, to style and size text areas. Many of the attributes that can be applied to input elements can also, be applied to textarea elements. In addition, to those included in our example above, attributes that, can be applied to text areas, include: autofocus, disabled, form, maxlength, name, readonly, required, and wrap., , Flexible Buttons, There are two ways to create buttons for forms:, , , , <input type="button/submit/reset/image">, <button type="button/submit/reset/"></button>, We’ve already talked about the input element and the different types that can be used to create, buttons. So why is there another button? There are least two ways that button elements are, different from their input cousins., , 1. Because buttons are made with an opening and closing tag, different types of content – usually text, and images – can be nested between the opening and closing tags and will be rendered on the, button., 2. Buttons do not have to be associated with a form element. They can be used as standalone buttons, to initiate scripts, as the content of an anchor element, and to perform other actions., , Frequently Asked Questions, How do you restrict a form field to only accept numbers?, In the past, restricting a field to numbers only required the use of JavaScript. However, with the, release of HTML5, it’s now simple to limit a field to numeric input only. Just apply the number value, to the type attribute of the applicable input element. For example:, <input type="number">, When rendered, produces a text input field that will only accept numbers., , How do you make a form submit when the user presses enter?, If you’ve come across a form that does not submit when you press enter, then someone has, intentionally designed the form to behave that way – and they really shouldn’t have done that. Web, accessibility specs are clear: design forms to allow implicit submission. What is implicit submission?
Page 28 :
Submitting a form by pressing enter. Browsers are designed to support implicit submission. Here’s, how it works. Take this form for instance:, <form>, <label for="name">Name: </label><input type="text" name="name"><b, r>, <label for="age">Age: <input type="text" name="age"><br>, <input typ, e="submit"> </form>, If you were focused on any element in that form and pressed enter, the form would be submitted. This, is implicit submission and all modern browsers support this behavior. Use the button element in the, form and you don’t even have to use the submit value for the type attribute. Hit enter while focused, on any element in this form and the form will still be submitted., <form>, <label for="name">Name: </label><input type="text" name="name"><b, r>, <label for="age">Age: <input type="text" name="age"><br>, <button>Su, bmit</button> </form>, So how do developers break this behavior? One way to get around this behavior–and to be clear, we, don’t recommend this–is to drop the form elements. The browser knows what to submit by grouping, together everything between the form tags. Drop those tags and the browser doesn’t know what to, submit. Another way some developers manipulate browser behavior is to use CSS to make buttons, rather than proper HTML elements, like this., <style> .submitButton {, padding: 10px 20px;, margin-top: 10px;, backgr, ound-color: #ddd;, border-radius: 5px;, display: inline-block; } .submit, Button:hover {, background-color: #ccc; } .submitButton:active {, backgr, ound-color: #ddd; } </style> <form>, <label for="name">Name: </label><inp, ut type="text" name="name"><br>, <label for="age">Age: <input type="text", name="age"><br>, <span class="submitButton">Submit</span> </form>, Which, when rendered by the browser, would produce a button that looked like a button but did not do, anything when enter is pressed., .submitButton{padding: 10px 20px; margin-top: 10px; background-color: #ddd; border-radius: 5px;, display: inline-block;}.submitButton:hover{background-color: #ccc;}.submitButton:active{backgroundcolor: #ddd;} Name:, Age:, Submit, Usually, developers have good intentions when they do things like this. Typically, what they’re trying, to do is tie form validation to an onClick JavaScript event. Form validation is a good thing, but, creating a barrier to accessibility in the name of form validation is not a good thing. So,, what should you do instead of disabling implicit submission? Leave implicit submission intact and use, JavaScript to add an event listener to each field. Use the event listener to trigger form validation like, this., document.getElementById('name').addEventListener('keypress', function(even, t) {, if (event.keyCode == 13) {, /* Run Form Validation JavaScript */, } };
Page 29 : That code leaves implicit submission intact, but still runs validation code when the user presses enter., , Div Element, The div element in HTML is a container element that encapsulates other elements and can be used, to group and, separate parts of a webpage. A div by itself does not inherently represent anything but is a powerful, tool in web, design. This topic covers the purpose and applications of the div element ., , Section 19.1: Basic usage, The <div> element usually has no specific semantic meaning by itself, simply representing a division,, and is typically, used for grouping and encapsulating other elements within an HTML document and separating those, from other, groups of content. As such, each <div> is best described by its contents., <div>, <p>Hello! This is a paragraph.</p>, </div>, The div element is typically a block-level element, meaning that it separates a block of an HTML, document and, occupying the maximum width of the page. Browsers typically have the following default CSS rule:, div {, display: block;, }, It's strongly encouraged by the The World Wide Web Consortium (W3C) to view the div element as, an, element of last resort, for when no other element is suitable. The use of more appropriate elements, instead of the div element leads to better accessibility for readers and easier maintainability for, authors., For example, a blog post would be marked up using <article>, a chapter using <section>, a page's, navigation aids, using <nav>, and a group of form controls using <fieldset>., div elements can be useful for stylistic purposes or to wrap multiple paragraphs within a section that, are all to be, annotated in a similar way., , Section 19.2: Nesting, It is a common practice to place multiple <div> inside another <div>. This is usually referred to as, "nesting", elements and allows for further dividing elements into subsections or aid developers with CSS styling., The <div class="outer-div"> is used to group together two <div class="inner-div"> elements; each, containing, a <p> element., <div class="outer-div">, <div class="inner-div">, <p>This is a paragraph</p>, </div>, <div class="inner-div">
Page 30 : <p>This is another paragraph</p>, </div>, </div>, This will yield the following result (CSS styles applied for clarity):, , Nav Element, The <nav> element is primarily intended to be used for sections that contain main navigation, blocks for the, website, this can include links to other parts of the web page (e.g. anchors for a table of contents) or, other pages, entirely., Inline items, The following will display an inline set of hyperlinks., <nav>, <a href="https://google.com">Google</a>, <a href="https://www.yahoo.com">Yahoo!</a>, <a href="https://www.bing.com">Bing</a>, </nav>, Use list items when needed, If the content represents a list of items, use a list item to show this and enhance the user experience., Note the role="navigation", more on this below., <nav role="navigation">, <ul>, <li><a href="https://google.com">Google</a></li>, <li><a href="https://www.yahoo.com">Yahoo!</a></li>, <li><a href="https://www.bing.com">Bing</a></li>, </ul>, </nav>, Avoid unnecessary usage, <footer> elements may have a list of links to other parts of the site (FAQ, T&C, etc.). The footer, element alone is, sufficient in this case, you don't need to further wrap your links with a <nav> element in the <footer>., <!-- the <nav> is not required in the <footer> -->, <footer>, <nav>, <a href="#">...</a>, </nav>, </footer>, <!-- The footer alone is sufficient -->, <footer>, <a href="#">...</a>, </footer>, Notes:, <main> element descendants are not allowed within a <nav>, Adding a role="navigation" ARIA role to the <nav> element is advised to aid user agents that don't
Page 31 : support HTML5 and also to provide more context for those that do., , Article Element, The <article> element contains self-contained content like articles, blog posts, user comments or, an interactive, widget that could be distributed outside the context of the page, for example by RSS., When article elements are nested, the contents of the inner article node should be related to the outer, article, element., A blog (section) with multiple posts (article), and comments (article) might look something like this., <section>, <!-- Each individual blog post is an <article> -->, <article>, <header>, <h1>Blog Post</h1>, <time datetime="2016-03-13">13th March 2016</time>, </header>, <p>The article element represents a self contained article or document.</p>, <p>The section element represents a grouping of content.</p>, <section>, <h2>Comments <small>relating to "Blog Post"</small></h2>, <!-- Related comment is also a self-contained article -->, <article id="user-comment-1">, <p>Excellent!</p>, <footer><p>...</p><time>...</time></footer>, </article>, </section>, </article>, <!-- ./repeat: <article> -->, </section>, <!-- Content unrelated to the blog or posts should be outside the section. -->, <footer>, <p>This content should be unrelated to the blog.</p>, </footer>, Avoid unnecessary usage, When the main content of the page (excluding headers, footers, navigation bars, etc.) is simply one, group of, elements. You can omit the <article> in favour of the <main> element., <article>, <p>This doesn't make sense, this article has no real `context`.</p>, , Header Element, The <header> element represents introductory content for its nearest ancestor sectioning content or, sectioning, root element. A <header> typically contains a group of introductory or navigational aids., Note: The header element is not sectioning content; it doesn’t introduce a new section.
Page 32 : Examples:, <header>, <p>Welcome to...</p>, <h1>Voidwars!</h1>, </header>, In this example, the <article> has a <header>., <article>, <header>, <h1>Flexbox: The definitive guide</h1>, </header>, <p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox, expert, either.</p>, </article>, , HTML5 Navigation Bar, To make a navigation bar using the HTML5 nav element, encase the links within the nav tag., <nav>, <a href="#">Home</a>, <a href="#">About</a>, <a href="#">Contact</a>, </nav>, , Media Elements, Attribute Details, width -Sets the element's width in pixels., Height- Sets the element's height in pixels., <source>- Defines resources of the audio or video files, track -Defines the text track for media elements, controls -Displays controls, autoplay- Automatically start playing the media, loop- Plays the media in a repeated cycle, muted- Plays the media without sound, poster - Assigns an image to display until a video is loaded, , 1: Audio, HTML5 provides a new standard for embedding an audio file on a web page., You can embed an audio file to a page using the <audio> element:, <audio controls>, <source src="file.mp3" type="audio/mpeg">, Your browser does not support the audio element., </audio>, , 2: Video, You can embed also a video to a webpage using the <video> element:
Page 33 :
<video width="500" height="700" controls>, <source src="video.mp4" type="video/mp4">, Your browser does not support the video tag., </video>, , Meta Information, Meta tags in HTML documents provide useful information about the document including a description,, keywords,, author, dates of modifications and around 90 other fields. This topic covers the usage and purpose of, these tags., , Page Information, application-name, Giving the name of the Web application that the page represents., <meta name="application-name" content="OpenStreetMap">, If it’s not a Web application, the application-name meta tag must not be used., author, Set the author of the page:, <meta name="author" content="Your Name">, Only one name can be given., description, Set the description of the page:, <meta name="description" content="Page Description">, The description meta tag can be used by various search engines while indexing your web page for, searching, purpose. Usually, the description contained within the meta tag is the short summary that shows up, under the, page/website's main title in the search engine results. Google usually uses only the first 20-25 words, of your, description., generator, <meta name="generator" content="HTML Generator 1.42">, Identifies one of the software packages used to generate the document. Only to be used for pages, where the, markup is automatically generated., keywords, Set keywords for search engines (comma-separated):, <meta name="keywords" content="Keyword1, Keyword2">, The keywords meta tag is sometimes used by search engines to know the search query which is, relevant to your, web page., As a rule of thumb, it is probably a good idea to not add too many words, as most search engines that, use this meta, tag for indexing will only index the first ~20 words. Make sure that you put the most important, keywords first.
Page 34 :
Mobile Layout Control, Common mobile-optimized sites use the <meta name="viewport"> tag like this:, <meta name="viewport" content="width=device-width, initial-scale=1">, The viewport element gives the browser instructions on how to control the page's dimensions and, scaling based, on the device you are using., In the above example, content="width=device-width means that the browser will render the width of, the page at, the width of its own screen. So if that screen is 480px wide, the browser window will be 480px wide., initialscale=, 1 depicts that the initial zoom (which is 1 in this case, means it does not zoom)., Below are the attributes this tag supports:, Attribute Description, width The width of the virtual viewport of the device., Values1: device-width or the actual width in pixels, like 480, height The height of the virtual viewport of the device., Values2: device-height or the actual width in pixels, like 600, initial-scale The initial zoom when the page is loaded. 1.0 does not zoom., minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom., maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom., user-scalable Allows the device to zoom in and out. Values are yes or no. If set to no, the user is not, able to zoom, in the webpage. The default is yes. Browser settings can ignore this rule., Notes:, 1 The width property can be either specified in pixels (width=600) or by device-width (width=devicewidth) which, represents the physical width of the device's screen., 2 Similarly, the height property can be either specified in pixels (height=600) or by device-height, (height=device-height) which represents the physical height of the device's screen., , Structure-
