Sitemap

10 HTML TİPS FOR CODE NEWBIES — 2

3 min readJan 27, 2021

This is the second article that I write about HTML tips. While studying HTML basics, you can not notice the importance of the tags or attributes at first. But, after several reviews, you will wonder about situations that they are used for. Let’s begin the second 10 HTML tips and tricks.

HTML Tip-1:

Extra spaces and lines in HTML code are removed automatically. Then, what will you do, when there is a poem? No need to add <br>, etc. line by line. Just insert your poem or content within the <pre> (pre-formatted text) element. It will display the spaces and line breaks:

Press enter or click to view image in full size

HTML Tip-2:

The <i> and <em> elements both makes the text italic. Moreover, the <em> element is semantic and declares the emphasized text to the browsers, so that screen readers pronounce the content in <em> with emphasis.

Press enter or click to view image in full size

HTML Tip-3

If you want to create a download link, use the “download” attribute so that the file will be downloaded when a user clicks on the hyperlink.

Press enter or click to view image in full size

HTML Tip-4:

If you want to make phone numbers “clickable”, then use “tel:” inside the “href” attribute. It is especially useful for mobile phones.

Press enter or click to view image in full size

HTML Tip-5

You can use javascript codes in HTML, without using <script> element. Just use “javascript:” inside the “href” attribute.

Press enter or click to view image in full size

HTML Tip-6:

If a web page is very long, you can add a link to different sections or chapters of the page, so that when the link is clicked, the page will scroll down or up to that section. Use “#” inside the “href” attribute to jump to other sections.

Press enter or click to view image in full size

HTML Tip-7

Do you know the difference between “HTML width and height attributes” and “CSS width and height properties”?

HTML width and height attributes define size in pixels, even if there is no unit declared with numbers.

CSS width and height properties define size automatically if there is no unit with numbers. You should declare units like cm, px, in, etc.

Press enter or click to view image in full size

HTML Tip-8:

Use <ol type=”a”> to order the list items with lowercase letters.

Press enter or click to view image in full size

HTML Tip-9:

If you don’t want users to jump on the links and leave your website, put an iframe (inline frame). And, use iframe name inside the “target” attributes of the links.

Press enter or click to view image in full size

HTML Tip-10:

Make the <title> element in the <head> section as meaningful as possible! It is important for SEO (search engine optimization)! The <title> element displays a title for the page in search engine results and gives a page name when it is added to favorites.

Press enter or click to view image in full size

Thanks for reading. I hope all tips be useful for you.

--

--

Ertuğrul Koruyucu
Ertuğrul Koruyucu

Written by Ertuğrul Koruyucu

I am in “Clarusway IT Course”, “Full Stack Web Development Path”

Responses (1)