The most Important Html Tags for your Website and Blog

in #introduceyourself7 years ago (edited)

coding-1841550_960_720.jpg

The Html Tags you will need most

Imagine you have write a article. Now you want to formatted it. You can link to other usefull Webpages or make just some Strong Elements or lists. You can use some Html or Shortcuts in a CMS.

We Start with the HTml method

If you want to place a link you can use this code for it: < a href="LINK">Text .

Link stands for the URl and Text for the Anchortext ( This is the type of Text over your Link) you want to use.

Now we can add some more Code. For Example rel="nofollow" and target="_blank". This are the most common to use.

Now i Explain:

rel="nofollow" is the tag you use for Commercials. So Searchengine knows this type of link is a Commercial one. So they can better rate them, because you tell " This is Commercial" ( like Affliate links and this type of Stuff).

target="_blank" is used for " the link opens in new window". So if someone will click it, it opens a new tab in browser. This is sometimes really usefull.

Here the explanation how to use it:

Example 1: < a href="LINK">Text rel="nofollow"

Example 2: < a href="LINK">Text target="_blank"

you can use too both tags. So Commercial will be open in a new tab.

Then it looks like this: < a href="LINK">Text target="_blank" rel="nofollow"

Then you can use some Strong or Bold

This is really usefull for the Reader.

The Code for this is pretty simple: < strong> Your Text < /strong>.

html-386093_960_720.jpg

Headings

Headings are really nice. There are avaible in different sizes.

You can use it with: < h1> Your Heading < /h1> .

The < h1> Heading is the Mainheading. The other ones are some lower Headings.

Here the Examples:

Example Heading h2

Example Heading h2 h3

Example Heading h2 h4

TExample Heading h2 h5

Example Heading h2 h6

If you want to use this lower / smaler Headlines change the < h1> to < h6> ( without using a space between < h and < /). This works for the Numbers 1-6.

If you want to see the code, you can use your browser with right click and look for somethink like " discover". or "looking code". This is different from Web browser to Web Browser.

IF you want to make a listing with Html, this works like this

As seen below, having a listing looks great and makes some sense in the text design.

  • First
  • Secend
  • more...
    • < ul>
      < li>First < /li>
      < li>Secend< /li>
      < li>more...< /li>
      < ul>

      The Code looks like this with Space between < ul> and < /li>. The Reason is, without this space, the code will not be visible.

      If you want to do your own list, start with < ul>. Now you need for each point in you listing < li> Text < /li> . At the end again < ul>.

      The li stands for List Item. I think this helps remember this Html.

      This should be the most Immportant Html Stuff you will need at the Start. If you use a Cms for your Website, you can use Shortcuts too. More about this to a later time.

      In my Opinion it has some Value to know, how it work. So you can easy fix some bugs, if shortcits doesnt work right or somthing like this.

      Immportant:

      IF you want to use the code Copy and paste, you need to Remove the space inside the code. The space is only there, you can see the Code on Steemit.

      I hope you enjoy

      Best Regards

      Your @Goldmann

      Sort:  

      Some basic html tutorial you got here! Nice one.
      Just to remind you about the placing of attributes in your linking
      <a href=“the_url_here” rel=“nofollow” target=“_blank”>The Linked Text</a>
      Nice article!

      Coin Marketplace

      STEEM 0.20
      TRX 0.15
      JST 0.029
      BTC 62864.56
      ETH 2538.87
      USDT 1.00
      SBD 2.93