Meet the building blocks of markup
It’s time to start looking at the various HTML elements that make up the HTML language. The elements that we’re going to examine in this section are:
<a>
<br />
<button>
<em>
<form>
<h1>
<h2>
<hr />
<img>
<input>
<li>
<table>
<thead>
<tr>
<th>
<tbody>
<td>
<textarea>
<ul>
Let’s examine the code on the next page in more detail. It may look cluttered in the beginning, but when you start looking at it closely, you’ll notice that it follows a simple pattern. Let’s look at the code together. We’ll begin by locating the opening body tag <body>.
The first tag is the <h1> tag; it creates a main heading. When looking at a webpage, you can normally find this as the title of an article. Search Engines look for the main heading when indexing your page; the search engine algorithm knows that this depicts a topic. The <h1> tag is easy to spot: it’s usually text that’s much larger than the other text on the screen.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Dino Cajic</h1>
<h2>Sample Website</h2>
<a href="http://dinocajic.xyz">Portfolio</a>
<div>DIV Element</div>
<p>Paragraph</p>
<br />
<button>Button</button>
<em> Emphasis</em>
<form>
Input Text: <input type="text" name="text_name" /> <br />
Textarea: <textarea name="text_area">Textarea content</textarea>
<input type="submit" name="submit" value="Submit" />
</form>
<hr />
<img src="some-photo.jpg" />
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td> January</td>
<td>2016</td>
</tr>
<tr>
<td>February</td>
<td>2016</td>
</tr>
</tbody>
</table>
</body>
</html>
The <h2> tag creates a subheading in an article. Usually, you will find this tag after the <h1> tag. A <font> tag can be used to manipulate the size of the font, but in order to follow SEO (Search Engine Optimization) standards, the designer should incorporate the <h1> and <h2> tags throughout the document. After all, the website is no good if it can’t be easily indexed by the search engine. Other heading tags that exist include <h3>, <h4>, <h5>, and <h6> tags.
The anchor, <a>, tag links to a different portion of the website, and even to pages outside of the website. The href points to the specific location. If you have two pages, one called index.html and the other called contact.html, you could link to contact.html by adding the “a href” tag inside the index.html file. To link to the contact page, you would enter the following code:
<a href=”contact.html”>Contact Page</a>
Both the contact.html and the index.html pages have to be in the same directory in order to link to the page as specified above.
Consider the <div> tag as a container. You can place text, images, and even other containers within the <div> container. For now, remember that after the closing </div> tag, a carriage return will be entered and the next portion of you code will appear on the line below. For example, if you entered
<div>Dino Cajic</div>Some other text
the output would be:
Dino Cajic
Some other text
The <p> tag is the paragraph tag. If you write multi-paragraph articles, each paragraph should be wrapped in a <p></p> tag. A blank line will be entered between each paragraph, just as you would normally skip a line when writing paragraphs.
Hopefully by now, you’re seeing a pattern emerge; the computer is not as intelligent as a human being. It needs rules and it has to follow those rules strictly in order to be able to display content in a structured way. The naming convention of each tag is self-explanatory and mimics standard English.
When you need to quickly display a carriage return, you’ll need to type the <br> tag. Prior to HTML5, self-closing tags were necessary. Since the <br> tag doesn’t have a closing tag, i.e. <br></br>, it needed to be closed within itself. That’s why you used to write <br />. With HTML5, it’s now ok to write <br>.
Need a button? Use the <button> tag to create one. Just type
<button>Click Me</button>
This will create a button with the text “Click Me” filling the inner portion of the button. Buttons can be used in conjunction with links or forms and are used on almost every website.
If you need to provide emphasis to a portion of the text, you’ll need to use the <em> tag. The <em></em> tag italicizes the text within the tags.
Forms are the primary way to take input from a website user. The data can be manipulated and/or stored in a database. The form is outlined with the <form> tag. Within the form tag, you’ll add certain inputs. These inputs allow the user to enter information that’s requested. For example, typing in,
Input Text: <input type=”text” name=”some_name” />
will create an input field like the one shown below.
If you want to provide the user with more space, you might want to consider adding a textarea to the form. An example might include,
Textarea: <textarea name=”some_textarea”>Textarea content</textarea>.
The result of the textarea is shown below.
If you have been paying careful attention, you might have noticed a name attribute appear in both the textarea and the input tags. The name will be used when we start developing the PHP code.
The last tag is a special input tag that creates a Submit button. Once the Submit button is clicked, the action attribute located in the <form> tag will help direct the contents of the form to its final destination. The action attribute looks like this:
<form action=”process_form.php”>…</form>.
The <hr /> tag provides a horizontal rule across the length of the container where it’s located, or in this case, across the entire page. It’s literally a line that goes across the page separating the top content from the bottom content more visually.
We come across another tag that should be quite clear to understand even without an explanation: the <img> tag. The <img> tag has a src attribute that specifies the location of the image within the folder. The index.html file contains the <img> tag. Within the root directory, there is another directory called images and within the images folder there is a picture titled example.jpg. To link to example.jpg from the index.html file, you would enter <img src=”images/example.jpg” />.
Need to create a list of items? Do they need to be ordered from 1 to n or should they be bullet points? If you chose bullet points, you would write an unordered list with the <ul> tag. Within the <ul> tag, the list elements <li> are stored. Reference the two code snippets below to see differences between the ordered and unordered lists.
Tables are a convenient way to group items into a row/column format. To create a table, you first specify the <table> tag. The next portion, <thead> notates the beginning of the top row which usually depicts the contents in the rows below it.
Each row is separated with the <tr> tag. Each row can have multiple columns; each column is represented with the <th> tag. Following the heading is the body of the table. The body is displayed by using the <tbody> tag. The body can also have rows and columns; rows are represented with the <tr> tag and columns are represented with the <td> tag. The code below produces the table shown on the right.
That’s it for the elements review. There are a few other tags that may be used. It is strongly encouraged that you at least get acquainted with most of them. Throughout this series, we may venture slightly outside of the scope of the reviewed elements, but each element should be straight forward and easy to follow, especially if you work out the examples and test them in your browser.
HTML Series
Continue your HTML Learning.
Lay the foundation of every webpage
HTML — Basic Website Structure
Part two of our HTML fundamentals series shows how a well-organized file turns scattered tags into a real website. Build the classic header-main-footer layout, add navigation links, embed assets, and keep markup semantic for accessibility and SEO.
Meet the building blocks of markup
Part three of our HTML fundamentals series explores the vast library of elements that give every page its purpose. From headings and paragraphs to lists, forms, and multimedia tags, learn each element’s role, default behavior, and best-practice usage for clean, semantic markup.