HTML part 3
Multiline comments HTML
<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. -->
Meta Data To ensure proper interpretation and correct search engine indexin
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document
represents a container for introductory content or a set of navigational links.
<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> A <header> element typically contains: one or more heading elements (<h1> - <h6>) logo or icon authorship information
specifies independent, self-contained content
<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> Three articles with independent, self-contained content:
element defines a clickable button
<button type="button" on-click="alert('Hello World!')">Click Me!</button> Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.
The ... tag specifies self-contained content, like illustrations, diagrams, photos, code listings with a name
<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>
defines a caption for a <figure> element. The ... element can be placed as the first or as the last child of a <figure> element.
<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure> The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element. The <img> element defines the actual image/illustration.
defines a footer for a document or section.
<footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:[email protected]">[email protected]</a></p> </footer>
specifies whether a form should have autocomplete on or off
<form action="/action_page.php" autocomplete="on"> When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
specifies the HTTP method to be used when submitting the form data.
<form action="/action_page.php" method="get"> The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). GET is good for non-secure data, like query strings in Google Tip: Always use POST if the form data contains sensitive or personal information!
The Novalidate Attribute
<form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit"> </form> When present, it specifies that the form-data (input) should not be validated when submitted.
The Target Attribute in a form
<form action="/action_page.php" target="_blank"> _blank The response is displayed in a new window or tab _self The response is displayed in the current window _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe
The ... element is used to group related data in a form.
<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form> The <fieldset> and <legend> Elements
The ... element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data.
<form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>
defines a button for submitting the form data to a form-handler. The form-handler is specified in the form's action attribute.
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
The Name Attribute for <input>
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all.
element defines a multi-line input field (a text area)
<form action="/action_page.php"> <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> <br><br> <input type="submit"> </form> You can also define the size of the text area by using CSS
defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> </form>
defines a radio button. Radio buttons let a user select ONE of a limited number of choices.
<form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> </form>
The ... defines a single-line input field for text input.
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> The <label> tag defines a label for many form elements . The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
The HTML ... element is used to create an HTML form for user input:
<form> . form elements . </form> The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
Resize the browser window to see how the text size scales.
<h1 style="font-size:10vw;">Responsive Text</h1> <p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p> The text size can be set with a "vw" unit, which means the "viewport width". That way the text size will follow the size of the browser window
Using the max-width Property
<img src="img_girl.jpg" style="max-width:100%;height:auto;"> If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size
Use the ... attribute to specify the number of visible values in select element
<label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
Use the ... attribute to allow the user to select more than one value in select element
<label for="cars">Choose a car:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
The ... element defines a drop-down list:
<label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in
<meta charset="UTF-8"> If not specified, UTF-8 is the default character set in HTML.
Close Empty HTML Elements?
<meta charset="utf-8" /> If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.
defines a set of navigation links.
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option
<option value="fiat" selected>Fiat</option> add the selected attribute to the option
The HTML ... element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
<p>Message from my computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p>
The ... element defines some content aside from the content it is placed in (like a sidebar). The ... content should be indirectly related to the surrounding content.
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside> Use CSS to style the <aside> element
The HTML ... element is used to define keyboard input. The content inside is displayed in the browser's default monospace font
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
The HTML ... element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
Show Different Images Depending on Browser Width
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
The HTML ... element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font
<pre> <code> x = 5; y = 6; z = x + y; </code> </pre> Notice that the <code> element does not preserve extra whitespace and line-breaks. To fix this, you can put the <code> element inside a <pre> element
defines a section in a document
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section> <h1>WWF's Panda symbol</h1> ... </section> According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." A web page could normally be split into sections for introduction, content, and contact information.
Should you specify alt, width, and height for Images?
Good: <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.
style="width:100%" means
Responsive Images Responsive images are images that scale nicely to fit any browser size. Using the width Property If the CSS width property is set to 100%, the image will be responsive and scale up and down
Nesting <article> in <section> or Vice Versa?
The <article> element specifies independent, self-contained content. The <section> element defines section in a document. Can we use the definitions to decide how to nest those elements? No, we cannot! So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
represents the result of a calculation (like one performed by a script).
The <output> Element
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm". If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html."