Common HTML Tasks and Tags You Should Know to Get a Coding Job - dummies

Common HTML Tasks and Tags You Should Know to Get a Coding Job

By Nikhil Abraham

HTML is used on every page you browse on the Internet. The purpose of HTML is to create the basic page layout and put text and images on the web page.

With HTML, you style text with special text keywords called elements, which apply a special effect.

The browser recognizes an element and applies its effect if the following three conditions exist:

  • The element is a letter, word, or phrase with special meaning. For example, h1 is an element that applies a header effect, with bold text and a large font size.

  • The element is enclosed with a left-angle bracket (<) and a right-angle bracket (>), such as <h1>. An element enclosed in this way is called a tag.

  • An opening tag (such as <h1>) is followed by a closing tag (</h1>). Note that the closing tag differs from the opening tag by the addition of a forward slash after the first left bracket and before the element.

When all three conditions are met, the text between the opening and closing tags is styled with the tag’s defined effect.

For a better understanding of these three conditions, check out the following example code:

The example code displayed in a browser.
The example code displayed in a browser.
<h1>This is a big heading with all three conditions</h1>
h1 This is text without the < and > sign surrounding the tag /h1
<rockstar>This is text with a tag that has no meaning to the browser</rockstar>
This is regular text

The browser applies a header effect to “This is a big heading with all three conditions” because h1 is a header tag and all three conditions for a valid HTML tag exist:

  • The browser recognizes the h1 element.

  • The h1 element is surrounded with a left (<) and right angle bracket (>).

  • The opening tag (<h1>) is followed by text and a closing tag (</h1>).

Note how the h1 tag itself does not appear in the heading. The browser only displays text between a properly formatted opening and closing HTML tag.

The remaining lines of code are displayed as plain text because they do not fulfill all three conditions.

Every left-angle bracket must be followed after the element with a right-angle bracket. In addition, every opening HTML tag must be followed with a closing HTML tag.

Writing headlines

Use headlines to describe a section of your page. HTML has six levels of headings:

  • h1, which is used for the most important headings

  • h2, which is used for subheadings

  • h3 to h6, which are used for less important headings

The browser renders h1 headings with a font size larger than h2, which in turn is larger than h3. Headings start with an opening heading tag, the heading text, and then the closing heading tag, as follows:

<h1>Heading text here</h1>

Here are some code examples showing various headings:

h1 through h6.” width=”515″/>
Headings created using elements h1 through h6.
<h1>Heading 1: “I’m going to make him an offer he can’t refuse”</h1>
<h2>Heading 2: “Houston, we have a problem”</h2>
<h3>Heading 3: “May the Force be with you”</h3>
<h4>Heading 4: “You talking to me?”</h4>
<h5>Heading 5: “I’ll be back”</h5>
<h6>Heading 6: “My precious”</h6>

Organizing text in paragraphs

To display text in paragraphs, you can use the p element. Place an opening <p> tag before the paragraph and a closing tag after it. The p element takes text and inserts a line break after the closing tag.

To insert a single line break after any element, use the <br> tag. The <br> tag is self-closing, so no closing tag is used.

Paragraphs start with an opening paragraph tag, the paragraph text, and then the closing paragraph tag:

<p>Paragraph text here</p>

Following are examples of coding a paragraph.

p element.” width=”515″/>
Text displayed in paragraphs using the p element.
<p>Armstrong: Okay. I’m going to step off the LM now.</p>
<p>Armstrong: That’s one small step for man; one giant leap for mankind.</p>
<p>Armstrong: Yes, the surface is fine and powdery. I can kick it up loosely with my toe. It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots.</p>

Linking to your (heart’s) content

A hyperlink has two parts:

  • Link destination: The web page the browser visits after the link is clicked.

  • Link description: The words used to describe the link, which are more readable and descriptive than the link destination.

To create a hyperlink in HTML, start with an opening anchor tag (<a>) with an href attribute. Attributes modify HTML elements and are placed inside the opening HTML tag. Then add the value of the href attribute, which is the link destination. Then add text to describe the link after the opening anchor tag, and finally include a closing anchor tag.

The resulting HTML should look something like this:

<a href=“website url”>Link description</a>

Three examples of coding a hyperlink follow:

a element.” width=”535″/>
Three hyperlinks created using the a element.
<a href=“”>Purchase anything</a>
<a href=“”>Rent a place to stay from a local host</a>
<a href=“”>Tech industry blog</a>

When rendering a hyperlink, the browser underlines the link and colors it blue by default.

Google’s search engine ranks web pages on many factors but primarily based on the words used to describe a web page between the opening and closing <a> tags.

Adding images

To include an image on your web page, you must obtain the image’s web address. Websites such as Google Images and Flickr allow you to search for online images based on keywords. When you find an image you like, right-click the image and select Copy Image URL.

To include an image, start with an opening image tag <img>, define the source of the image using the src attribute, and include a forward slash at the end of the opening tag to close the tag. For example:

<img src=“”/>
<img src=“”/>

Here is the result, with US Navy Rear Admiral Grace Hopper on the left and Bill Gates on the right.

<img>.” width=”535″/>
Images of Grace Hopper and Bill Gates rendered using <img>.

The image tag is self-closing, so you don’t use a separate </img> closing image tag.