HyperText Markup Language
HyperText Markup Language (HTML) is a language whose meaning is defined via tags and attributes in a hierarchical way. It is used for creating documents such as web pages on the World Wide Web, which are usually displayed in a web browser. They can include texts, links, pictures, and even sound and video.
HTML uses different tags and attributes to define the layout of a web document such as forms.
A tag is an HTML element enclosed by < and >, such as <body>, <p>, and <br>. It consists of an opening tag and an ending tag, with content in-between. For example, consider the following line of HTML:
<p>A paragraph</p>
The opening tag is <p> and the closing tag is </p>, while the content is A paragraph.
An attribute of the HTML element provides additional information about the element and is described by its name and value and has the following syntax: name[="value"]. Specifying the value is optional. For example, the following hyperlink has an attribute with the name href, and the value /home:
<a href="/home">Home</a>
Any HTML document requires the document type declaration, <!DOCTYPE html>, and the <title> tag, like this:
<!DOCTYPE html><title>The document title</title>
There is a list of optional tags that many developers use to create the structure of an HTML document, which are <html>, <head>, and <body>. The <html> tag is the root tag of the HTML document, which is placed immediately after the document type declaration. It will contain the other two optional tags: <head> and <body>. The <head> tag is used for the page metadata and includes <meta> tags to describe the encoding character set used in document for example, it includes the <title> tag, and external resources, such as styles, fonts, and scripts. The <body> block is used to render its contents in a browser window and includes the largest variety of HTML tags.
The aforementioned HTML tags can be seen in any HTML document.
Here's a list of the most frequently used tags:
<div>: This tag defines a section in an HTML document. It is usually used as a wrapper element for other HTML elements.<h1>to<h6>: The heading tags are used to define the heading of the HTML document.<h1>defines the most important headings (they also use the biggest font size), while<h6>defines the least important headings. They can be used anywhere in an HTML document.<p>: The paragraph tag is used to define paragraph content in an HTML document.<em>: The emphasis tag is used to emphasize text.<b>and/or<strong>: The bold tag is used to specify bold content.<a href="..."> Link name </a>: The anchor tag is used to link one page to another page.<ul>and<li>: The unordered list and list item tags are used to list the content without order (like a bulleted list).<ol>: This tag is used to represent a numbered list<br>: The line break tag is used to break the line.<img>: The image tag is used to add an image element to an HTML document.<hr>: The horizontal rule tag is used to display the horizontal line in an HTML document.<table>: The table tag is used to create a table in an HTML document.<tr>: The table row tag is used to define a row in an HTML table.<th>: The table heading cell tag defines the header cell in a table.<td>: The table data cell tag defines the standard cell in a table.<form>: The form tag is used to create an HTML form.<input>: The input tag is used to collect and submit user data (such as forms from a browser).<select>and<option>: The select input tag is used to select an option value from a drop-down list.<label>: The label tag prints the label for a form input.
Consider the following HTML block:
<!DOCTYPE html> <html lang="en"> <head> Â Â Â Â <meta charset="utf-8"> Â Â Â Â <title>HTML Document Title</title> </head> <body> <h1>Heading Text</h1> <p>A paragraph</p> <form method="post"> Â Â Â Â <input type="text" name="domain"> Â Â Â Â <input type="submit" value="Send"> </form> </body> </html>
Let's have a look at the HTML elements in this block:
<!DOCTYPE html>declares the document type to HTML5.<html lang="en">is the opening tag for the root element of the HTML document. Thelangattribute is pointing to the document content language.<head>opens the metadata block.<meta charset="utf-8">declares the character set used in the HTML document.<title>HTML Document Title</title>sets the title toHTML Document Title.<body>opens the HTML document content block.<h1>Heading Text</h1>adds aHeading Textheading.<p>A paragraph</p>adds a paragraph containing the textA paragraph.<form method="post">opens the form block, declaring the method that will be used to send its data (more about this in Chapter 6, Using HTTP).<input type="text" name="domain">adds a text input field calleddomain. The "domain" value is the name of the input type.<input type="submit" value="Send">adds a submit button withSendon it.</form>,</head>,</body>, and</html>are the closing tags for the<form>,<head>,<body>, and<html>tags.
The preceding code will render the following web page:
Figure 1.6: Layout of the web page
We can access the file with a GET request. Submitting the form will result in a POST request:
Figure 1.7: Methods used
Request types and form data submission will be covered in Chapter 6, Using HTTP.
