Html codes and tips

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don’t worry if we use tags you have not learned about yet.

HTML Documents

All HTML documents must start with a document type declaration: .

The HTML document itself begins with and ends with .

The visible part of the HTML document is between and .

Example

My First Heading

My first paragraph.

The Declaration

The declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The declaration is not case sensitive.

The declaration for HTML5 is:

HTML Headings

HTML headings are defined with the to tags.

defines the most important heading. defines the least important heading:

Example

This is heading 1

This is heading 2

This is heading 3

HTML Paragraphs

HTML paragraphs are defined with the

tag:

Example

This is a paragraph.

This is another paragraph.

HTML Links

HTML links are defined with the tag:

Example

The link’s destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the tag.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

Example

How to View HTML Source

Have you ever seen a Web page and wondered «Hey! How did they do that?»

View HTML Source Code:

Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Источник

HTML Style Guide

A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Here are some guidelines and tips for creating good HTML code.

Always Declare Document Type

Always declare the document type as the first line in your document.

The correct document type for HTML is:

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to write

Good:

Bad:

Close All HTML Elements

In HTML, you do not have to close all elements (for example the

element).

However, we strongly recommend closing all HTML elements, like this:

Good:

Bad:

This is a paragraph.

This is a paragraph.

Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to write

Good:

Bad:

Always Quote Attribute Values

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

• Developers normally quote attribute values
• Quoted values are easier to read
• You MUST use quotes if the value contains spaces

Good:

This will not work, because the value contains spaces:

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good:

Bad:

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good:

Bad:

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.

Try to avoid too long code lines.

Blank Lines and Indentation

Do not add blank lines, spaces, or indentations without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Good:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

Bad:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

Good Table Example:

Good List Example:

Never Skip the Element

The element is required in HTML.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results

So, try to make the title as accurate and meaningful as possible:

Omitting and ?

An HTML page will validate without the and tags:

Example

This is a heading

This is a paragraph.

However, we strongly recommend to always add the and tags!

Omitting can produce errors in older browsers.

Omitting and can also crash DOM and XML software.

Omitting ?

The HTML tag can also be omitted.

Browsers will add all elements before , to a default element.

Example

This is a heading

This is a paragraph.

However, we recommend using the tag.

Close Empty HTML Elements?

In HTML, it is optional to close empty elements.

Allowed:

Also Allowed:

If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.

Add the lang Attribute

You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

Example

This is a heading

This is a paragraph.

Meta Data

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding charset«> should be defined as early as possible in an HTML document:

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Источник

Top 10 HTML and CSS Codes That All Bloggers Should Know

Thanks to powerful visual editors that are standard with most content management systems (like WordPress!), almost anyone can write and format their blog posts without the need for learning HTML or CSS. But just because you can, doesn’t mean that you should in this case. I believe a little knowledge can go a really long way, and so I have compiled a list of the Top 10 HTML & CSS codes that a blogger should know.

Headings

^ See that? That’s a heading. It’s a way of formatting and breaking up a blog post so that the information is easier to read. It not only looks better visually, it makes the content easy to follow and visually digest. Every blogger should be using headings and know how to use them correctly.

There are 6 size options as follows:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

It’s important to know first that for SEO purposes, you should use headings in order of importance – the most important heading on the page (for a blogger, this would be the title of the page or blog post) should utilize Heading 1 or 2, while headings in the content would use Headings 3-6.

Here’s what the coding would look like:

Hyperlinks

Learning how to write out a link yourself and understanding how they work is something any blogger should know – especially if you’re linking to content outside of your website. Here’s what a pretty standard link would look like, and how to create it:

Adding No Follow Tag

Did you know that the FTC requires your sponsored and affiliate links to include what’s called a “No Follow” tag? It prevents other websites from capitalizing further on those links. Not including a No Follow tag is sort of like giving the page found at that link a “vote” in favor of its content. Here’s how you add the tag to your links:

Manually Inserting Images

Sure, you probably have some sort of visual editor (like the one in WordPress), but every blogger should know how to manually insert an image into a post, page, or widget.

Linking an Image

Turning your images into links is not only easy – it’s a great way to get people to click through to important content. You can combine the HTML for making links, and manually inserting images – even add in the no follow tag too if you’d like!

Lists

I love a good list… and they don’t have to be difficult to put together. There are a couple of types of lists: Ordered (1, 2, 3) and Unordered (usually made of bullet points). Here’s what they look like.

1. List Item 1
2. List Item 2
3. List Item 3

• List Item 1
• List Item 2
• List Item 3

These are so simple to make, and they are a nice formatting trick that makes everything easy to read in your blog posts. The big difference between the two types is the opening and closing tag – “ol” for Ordered List, and “ul” for Unordered List. Easy, right!?

Basic Text Styling

Putting special emphasis on words in your blog posts is a bold way to add make your sentences striking! See what I did there? Basic text styling is one of the more commonly used HTML codes, and are a great way to change the voice of your blog posts.

Advanced Text Styling

Maybe you want more advanced ways of changing the styling of your text including changing the color of a few words , or even changing the font family or the size of your words .

CHANGING THE FONT COLOR

CHANGE THE FONT

CHANGE THE SIZE OF WORDS

Email Address Link

You can make it easy for people to email you with just one click by turning your email address into a link like this one: Click Here to email Hello You Designs

This is a great way to provide another form of communication in case your contact forms ever fail you.

Table with Headings

Another fantastic formatting trick for your blog posts that can keep information organized is a Table with a Heading. It looks like this:

Heading 1

Heading 2

These can be a little tricky to make because you have to pay close attention to the tags for Table Headings (th), Table Row (tr), and Table Details (td). Here’s the code for the table shown above:

Buttons

Most themes will come with the option to add a button to your post or page. This button style will be preset within your theme.

What HTML and CSS codes are important to you?

Let us know what codes you use regularly in the comments below.

Similar Posts

5 Blog Investments Worth Making

Why blog posts aren’t getting shared

The Top 10 Tools I use to grow my blog

How to Maintain Consistency as a Blogger

3 Things Slowing Down your WordPress Website

How to Start Earning Affiliate Income from your Blog Now

• Free Theme Install ($100 value)
• Free Genesis Framework ($59 value)
• Free SSL & CDN
• Nightly Backups
• Enhanced Security

See Options

Stock Images

The Shop

Источник