We room self-proclaimed master of couchsurfingcook.com-based coding who desire to re-superstructure our expertise and assist people

HTML Basics

I’ve noticed that I’ve just really to be posting CSS. But here’s a master short article of HTML basics! I’m not a big fan of html (I much prefer CSS and jQuery really interests me), however some things you simply gotta know.

You are watching: Tumblr html post

A very, very basic, inexplicable cheat sheet is top top this blog, under the attach “basics”.

Reminder: Retype all quotation marks as soon as you placed them in her coding. All codes go under or wherever there’s HTML..

Elements (x)

HTML facets start with a tag surname inside brackets, then you have your content, climate you have actually your finishing brackets. Beginning tags are favor this and also ending tag are choose this therefore the totality thing looks like this:


Always have actually a slash (/) after the first ending bracket (heading and paragraph

have finishing tags, but doesn’t. shows a header, and also suggests that the header is over and also anything exterior of this will certainly not be in header format. Start a paragraph through

and also end it through

a location goes here link is a link, but it won’t go anywhere without the href=“url” attribute. Learn more about web links here.

A break, simply one return button, is and also it does not have actually an finishing tag.

I’d fairly not list every element and also its purpose, therefore I linked it in the location of this section of this post.. However, I will briefly talk about the crucial ones.




The bolded words room the words the the formatting facets are being applied to. They exchange mail to the above snapshot of the formatting facets in action, respectively.

Attributes (x)

Attributes come after the elements, so, the location attribute would be inserted like this, if it were indicating the location of a paragraph. What does the do? If you hover over the actual content, the title will certainly popup.

title=“Paragraph Title>Paragraph Content

Notice exactly how the attribute is adhered to by an equal sign and quotes that contain the title of mine paragraph. Over is the result. Friend can style the means the title looks by complying with this tutorial.

Other characteristics include height=“#px”, width=“#px” and alt=“text”

Additional/summarized information:

All HTML elements can have actually attributesThe HTML title attribute provides additional “tool-tip” informationThe HTML href attribute provides address information because that linksThe HTML width and also height attributes provide size info for imagesThe HTML alt attribute gives text for screen readersThe HTML style attribute permits you to usage CSSMore detailed info/list of qualities is in the “x” in the title of this section

The difference in between elements and also attributes? An facet specifies what kind of “object” friend want and also an attribute helps explain the object. Let’s say I want a sparkly, blue box. Package is mine element, the sparkly blue is the attribute.


Headings are elements, but I desire to go an ext in-depth. Only use this codes for headings, not to make bigger text. In an magazine/webpage, the short articles are titled v a heading. There are sometimes headings inside the article, to rest it up into sections. Through each sub-article, the title of the sub-articles gain smaller. Probably you need a visual?


The password are really similar. heading1 is the biggest and also


is getting smaller and


is getting also smaller and it proceeds like that till heading 6 (heading6), if you take place to have 6 levels of subsections. It’s really an easy if girlfriend don’t shot to explain it.

Basically, the greater the number, the smaller the text of the heading. Border is 6 (smallest) and 1 (biggest). Use for headings, not bigger/smaller text. Scroll under for font codes.


For every kind of color code, you must memorize at the very least black and also white for each. You usage colors for all species of coding, therefore why not just put the in the html master post?

Find generators for all here.


black - #000white - #fff

RGBA (the 1 way opacity):

black - rgba(0, 0, 0, 1)white - rgba(255, 255, 255, 1)

HSLA (the 1 way opacity):

black - hsla(0, 0%, 0%, 1)white - hsla(0, 0%, 100%, 1)

HSLA isn’t sustained in HTML however it is in CSS.. Girlfriend can likewise use the typical names for particular colors, however you won’t get a really wide variety. So, I suggest the three above options.

Span Style/DIV Style

With the code text you can style any kind of text v css, instead of the words through text and css v text and also css, respectively. I’m sorry that obtained confusing. Anyways, the benefits of using this in her html is the you can code inside the heat of text. Because that example, if you have a paragraph and also only want to layout one word, girlfriend would placed that indigenous in this code and it wouldn’t result the various other words in the paragraph.

With the password
you can do the exact same thing yet it will certainly interrupt her paragraph.


The top example is the expectancy style and also the second is the div style. Exact same code but with one indigenous exchanged.

To do the
you’d have actually to include display:inline; to the css, i beg your pardon is extra work, yet it works simply as well. Code for highlighting is in the “basics” popup (nav link)here.

See more: Kim Kardashian Vogue Brasil Cover, North West’S Bathtime, Kim Kardashian Pulls A Marilyn On Vogue Brazil


The password for font color is simple.

Font size (note that this is no in px so common is like a 2 and header is prefer a 6 and the best size is 7 – anything above 7 is still in ~ the 7 size):