DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Basic HTML for Everyone

Basic HTML for Everyone

If you're just starting out on the path to becoming a web developer, check out this article with some helpful tips and hints on using HTML.

Jason Chow user avatar by
Jason Chow
·
Jan. 30, 18 · Presentation
Like (7)
Save
Tweet
Share
9.62K Views

Join the DZone community and get the full member experience.

Join For Free

There are so many editors and plugins available that knowing the basics of HTML is no longer required to create a site.

BuildThis - HTML

The problem with this is that if you don’t know a few basics, you can easily get into real trouble and have to hire a pricey developer to fix what may be a minor problem. Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.

And if your content layout doesn’t look right, HTML knowledge can get you back on track.

Here are some very basic HTML pointers for everyone.

Word of Warning Before Writing HTML

I want you to get comfortable using these tags, but you should always remember that if you leave out a portion of the tag, you can cause serious problems.

Each tag has an end and a beginning, and leaving one of those out tells the computer that the tag is still open…and all the following code will be included in that tag.

In addition, please type it out. If you copy and paste what I’ve written, you may get problems when the site interprets your code.

Links: The <a> Tag

One of the most important things to know is how to make links. The latest update of WordPress is experiencing some issues with some “no follow” plugins, so while you are waiting for a compliant plugin, you’ll need to know how to set up a nofollow link for your sponsored and product review posts.

The tag looks like this:

<a href="http://www.websiteyouarelinking.com/" target="_blank" rel="nofollow">Website Name</a>

In the “a” is the tag, “href” tells the browser where to take the visitor once she clicks the link. The target “_blank” tells the browser to open that link in a new tab – very important so that visitors don’t leave your website.

Next, we have the all-important “nofollow” link that you need to ensure you don’t get penalized by Google for compensated posts (if you are writing a post that is not compensated, you can leave out rel=”nofollow” to give the link a boost on Google). Next comes the title – make it accurate and SEO-friendly. Finally, “</a>” closes this tag.

Images: The <img> Tag

Sometimes you’ll want to create text widgets that include images or linked images.

This is the code:

Pulling in a single image:

<img alt="Gluten Free Brownies" src="http://mom-blog.com/wp-content/uploads/2014/04/2014016_brownies.jpg" width="490" height="293" />

Notice that this is a SINGLE tag, but it ends with /> to close the tag. In this tag, you’ll see alt. This is what you fill out after you load your image and is necessary for visitors who are visually impaired (make sure you use it to denote what the photo is, and not what you want your SEO to be). src is the link to where your image is actually located. “Width” and “height” are just that – the size of your image in pixels. This is optional, and should match your actual image size, or else the image will appear warped.

Here’s how to set up an image with a link:

<a href="http://www.websiteyouarelinking.com/" target="_blank" rel="nofollow"><img alt="Gluten Free Brownies" src="http://mom-blog.com/wp-content/uploads/2014/04/2014016_brownies.jpg" width="490" height="293" /></a>

As you can see, you simply replace the text from our <a> tag example (“Website Name”) with an image link and voila!

The Paragraph Tag: <p></p>

Obviously, this tag puts your text or image in it’s own paragraph with spacing above the opening <p> and after the closing </p>.

Usually, it will be styled so that there is a certain amount of space above or below it. You can easily adjust that with a bit of style right in the tag.

This is how it’s done:

<p style="width:200px; padding-right:5px; text-align:center;">Welcome to my blog!</p>

That style tag allows all kinds of sizes and options, but here are some basic ones.

  • “Width” is the actual width of that paragraph. This had created a 200 pixel width paragraph. Make sure your width is NOT bigger than your column or just leave width out to spread text to the size of the column.
  • “Padding” literally puts space around your paragraph. You can add 5 pixels of space just to the right, for example, like it’s done here, if you feel your paragraph is too close to the edge on the right side. You can do the same for padding-left, padding-top, and padding-bottom. You also have the options of “padding:5px” to put 5 pixels on each and every side.
  • “Text-align” justifies your text within the paragraph. Options are center, left, right, and justify, which spreads the text out to be even on both sides.

Finally, you can use a paragraph with images and links as well but make sure your image's width fits in your column too. Note that padding is added to that width:

<p style="padding-right:5px; text-align:center;"><a href="http://www.websiteyouarelinking.com/" target="_blank" rel="nofollow"><img alt="Gluten Free Brownies" src="http://mom-blog.com/wp-content/uploads/2014/04/2014016_brownies.jpg" width="490" height="293" /></a><p>

The Line Break Tag: <br />

This tag gives you a one-line return without a paragraph. It can be used inside a paragraph if you want a series of lines where you have single line breaks that you select yourself (so that you can even out the lines) and still have a paragraph around it, like so:

<p style="width:200px; padding-right:5px; text-align:center;">Welcome to my blog!<br />Come in and make yourself at home.</p>

Styles

Now that I’ve shown you some styles, I’m going to quickly list a few more that are useful for creating text widgets:

  • BOLD: Place bolded text inside these tags: <strong>Text goes here</strong>
  • ITALICS: Place italicized text inside these tags: <em>Text goes here</em>
  • BOLD+ITALICS: Place text inside:<strong><em>Text goes here</em></strong>

Heading Tags

For SEO purposes, you may want to use critical tags with your site’s main keywords in text widgets (on your sidebar, footer, etc.) These are heading tags and Google gives more weight to them. For example, your blog’s theme will usually have titles and your site's name within these tags.

These tags are:

  • <h1>Text goes here</h1>
  • <h2>Text goes here</h2>
  • <h3>Text goes here</h3>
  • <h4>Text goes here</h4>
  • <h5>Text goes here</h5>
  • <h6>Text goes here</h6>

These tags are in order of size, with <h1> being the largest. Google gives the most weight to text in <h1>, then <h2>, and so on.

Often, <h1> tags are quite large and may have a color. To eliminate that, you can enter something this:

<h1 style=”color: #000; font-size: 12px; font-weight:normal;”>Your new title here.</h1>

That will give you black text (color: #000;) in a 12 pixel font (font-size: 12px;) and remove bold (font-weight:normal;). If this does not work, your site may have been coded in a more complex manner and you may simply want to select a smaller heading tag.

Bullets

Bulleted or numbered lists are a great way to show content to your audience. But you might find “weird” or inconsistent spacing when you edit them. This is what they should look like in your text editor:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

<ul> means “unordered list” – this will give you bullets (if you want to use a numbered list, simply change all the “ul” tags to “ol”). <li> means list item. There are times you’ll hit a return and it will create another <ul> within your list or close your list and start a new one in the middle. It should look like some variation of the above, so if you see extra “<ul>” opening and closing tags, you can delete them.

Try Writing Your Own

This will help you get started, but please make sure that you back up your site fully first (including themes) so you can restore if necessary.

If you get into trouble with a widget, you can just remove it to figure out where you wrote the wrong code. Finally, feel free to type as normal in your visual editor and compare what you see in the text editor to get a feel for these basics.

HTML

Published at DZone with permission of Jason Chow. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • 5 Factors When Selecting a Database
  • How Observability Is Redefining Developer Roles
  • OpenID Connect Flows
  • Iptables Basic Commands for Novice

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: