#tag figcaption do html5 | Explore Tumblr posts and blogs

linthm · 6 years ago

Note

hi I'm asking because I'm curious tbh, what do you do differently with your themes that makes them more accessible? what makes a theme accessible in general?

generally i just adopt a common sense approach to what i make, like... i test my themes on actual blogs before releasing them so if i think certain design choices detract from navigability then i nix them right there. it sorta depends on the theme and the look i’m going for? but i do have a list of things i stick to at all times

things like colors (all colors imo, but at least the text-related ones) should be customizable. you don’t know that your default color choices look good or soothing to other people.

(dark text on light bg is considered most readable as a standard practice, but the rising prevalence of dark modes in apps shows that a lot of people prefer the opposite. but, again, not all - discord removing their light theme as an april fool’s joke screwed over a lot of people who needed the light theme for readability reasons)

fonts and font sizes should be customizable. i can’t stress this enough. literally 50% of what i’m complaining about when i say that a lot of themes are inaccessible is that they use some godforsaken 8 pt pixel font - impossible to read, and can’t be changed without going into the actual HTML, which not everyone is comfortable with or can navigate

the posts themselves should be formatted with care because tumblr’s default styling for blockquotes and such is just... horrible. i hate super narrow post widths for tumblr themes because if the blockquotes aren’t styled a certain way then even a post with like, 4-5 comments on it will bunch up until there’s just one letter on each line. it’s ridiculous. the unnested captions people prefer these days do a better job, but the documentation for that on the official tumblr variables page is still really shoddy and it’s clear they don’t intend for theme makers to be able to properly use them so. honestly using this website is a daily battle

infinite scroll is bad like... it’s just really bad and i hate how many themes have it. i know it exists on all social media feeds because you’re going to waste a lot more time scrolling down an endless feed than if you had to switch pages at intervals. predatory design that cares more about #engagement than anything else is depressingly prevalent. but just from an archiving standpoint, if someone is going down your blog looking for content, then infinite scroll makes it a nightmare to remember where you left off - and bad code can result in it just murdering your browser if you go deep enough

images in photo posts and such should have alt-text fields so screen readers can describe them if they’re captioned

on that note, a lot of newer HTML5 tags are designed to play nice with assistive tech and browsers as a whole, so using proper “figure” “figcaption” “article” “nav” etc tags is important for reasons other than divitis looking bad

flashing images/graphics/colors/text in a theme are all bad, both because they can cause seizures and because they distract from content. i have fading/blinking effects in some of my themes, but i keep the transitions slow and allow for the animation to be disabled (both thru customization options and as a javascript toggle for visitors)

tiny cursors are a blight and i don’t know who came up with them but they suck in particular

all iconified navigation (such as when you have a house icon to signify “go back to the index page”) should have tooltips that say what they do in plain text. iconography is not universally intuitive and there’s a lot of context we tend to take for granted

there’s probably other stuff tbh like. this is just off the top of my head and it’s by no means comprehensive or even like... high-effort? there’s a lot more that could be done if specializing accessibility features for specific disabilities (legally blind people have different needs than sighted people who can’t read small text, for starters) but this is just a For General Audiences kind of deal

#tuts #anon #asks

31 notes · View notes

michaelandy101-blog · 4 years ago

Text

A Newbie's Information to HTML5

New Post has been published on http://tiptopreview.com/a-beginners-guide-to-html5/

A Newbie's Information to HTML5

HTML5 was designed to do nearly something you need to do online with out having to obtain browser plugins or different software program. Need to create animations? Embed music and films? Construct superior functions that run in your browser? You may with HTML5.

On this submit, we’ll cowl every part it’s essential to find out about HTML5, together with:

What’s HTML5?

HTML5 is the latest model of HTML. The term refers to two things. One is the updated HTML language itself, which has new elements and attributes. The second is the larger set of technologies that work with this new version of HTML — like a new video format — and enable you to build more complex and powerful websites and apps.

To understand how HTML has evolved over the years, let’s look at the differences between HTML and HTML5.

HTML vs HTML5

HTML is the World Wide Web’s core markup language. Originally designed to semantically describe scientific documents, it has since evolved to describe much more.

Most pages on the web today were built using HTML4. Although much improved since the first version of HTML written in 1993, HTML4 still had its limitations. It’s biggest was if web developers or designers wanted to add content or features to their site that weren’t supported in HTML. In that case, they would have to use non-standard proprietary technologies, like Adobe Flash, which required users to install browser plugins. Even then, some users wouldn’t be able to access that content or feature. Users on iPhones and iPads, for example, wouldn’t be able to since those devices don’t support Flash.

Cue, HTML5. HTML5 was designed to cut out the need for those non-standard proprietary technologies. With this new version of HTML, you can create web applications that work offline, support high-definition video and animations, and know where you are geographically located.

To understand how HTML5 can do all that, let’s look at what’s new in this latest version of HTML.

What is new in HTML5?

HTML5 was designed with major objectives, including:

Making code easier to read for users and screen readers

Reducing the overlap between HTML, CSS, and JavaScript

Promoting design responsiveness and consistency across browsers

Supporting multimedia without the need for Flash or other plugins

Each of these objectives informed the changes in this new version of HTML. Let’s focus on seven of those changes below.

New Semantic Elements

HTML5 introduced several new semantically meaningful tags. These include <section>, <header>, <footer> <nav>, <mark>, <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter> and <main>. These make it easier to write cleaner code that clearly delineates style from content, which is particularly important to users with assistive technologies like screen readers.

Inline SVG

Using HTML4, you’d need Flash, Silverlight, or another technology to add scalable vector graphics (SVGs) to your web pages. With HTML5, you can add vector graphics directly in HTML documents using the <svg> tag. You can also draw rectangles, circles, text, and other vector-based paths and shapes using this new element. Below is an example of a circular shape created using the SVG <circle> element.

Form Features

You can create smarter forms thanks to HTML5’s expanded form options. In addition to all the standard form input types, HTML5 offers more, including: datetime, datetime-local, date, month, week, time, number, range, email, and url. You can also add date pickers, sliders, validation, and placeholder text thanks to the new placeholder attribute, which we’ll discuss later.

WebM Video Format

Before HTML5, you needed browser plugins to embed audio and video content into web pages. Not only did HTML5 introduce <audio> and <video> tags which eliminated the need for browser plugins, it also introduced the WebM video format. This is a royalty-free video format developed by Google that provides a great compression to quality ratio. This can be used with the video element and is supported by most browsers.

Placeholder Attribute

HTML5 introduced the placeholder attribute. You can use this with the <input> element to provide a short hint to help users fill in passwords or other data entry fields. This can help you create better forms. However, it’s important to note that this attribute is not accessible to assistive technologies. Feel free to read more about the problems with the placeholder attribute.

Server-sent Occasions

A server-sent occasion is when an internet web page routinely will get up to date information from a server. This was potential with HTML4, however the net web page must ask

HTML5 helps one-way server-sent occasions. Meaning, information is repeatedly despatched from a server to the browser. Consider how helpful this may be in case your web site included inventory costs, information feeds, Twitter feeds, and so forth. Server-sent occasions had been supported within the earlier model of HTML, however the net web page must repeatedly request it.

Native Net Storage

With the earlier model of HTML, information is saved regionally through cookies. With HTML5, net storage is used instead of cookies because of a scripting API. This lets you retailer information regionally, like cookies, however in a lot bigger portions.

Now that we perceive what’s new in HTML5, let’s check out why you need to be utilizing it in your web site.

Why HTML5?

HTML5 presents a variety of advantages over earlier variations of HTML — a few of which we’ve talked about briefly above. Let’s take a better take a look at only a few the reason why HTML5 is so particular.

It’s suitable throughout browsers.

HTML5 is supported by all the main browsers, together with Chrome, Firefox, Safari, Opera, in addition to iOS for Chrome and Safari and Android browsers. It could even work with the older and fewer well-liked browsers like Web Explorer. Meaning when constructing with HTML5, that customers could have a constant expertise in your website, it doesn’t matter what browser they use or whether or not they’re on cell or desktop.

It permits offline shopping.

HTML5 means that you can construct offline functions. Browsers that assist HTML5 offline functions (which is most) will obtain the HTML, CSS, JavaScript, photos, and different sources that make up the appliance and cache them regionally. Then, when the consumer tries to entry the net software and not using a community connection, the browser will render the native copies. Meaning you received’t have to fret about your website not loading if the consumer loses or doesn’t have an energetic web connection.

It means that you can write cleaner code.

With HTML5’s new semantic components, you may create cleaner and extra descriptive code bases. Earlier than HTML5, builders had to make use of numerous common components like divs and elegance them with CSS to show like headers or navigation menus. The consequence? Lots of divs and sophistication names that made the code tougher to learn.

HTML5 means that you can write extra semantically significant code, which permits you and different readers to separate model and content material.

It’s extra accessible.

Additionally because of HTML5’s new semantic components, you may create web sites and apps which might be extra accessible. Earlier than these components, display screen readers couldn’t decide that a div with a category or ID identify “header” was truly a header. Now with the <header> and different HTML5 semantic tags, display screen readers can extra clearly look at an HTML file and supply a greater expertise to customers who want them.

The best way to Use HTML5

To start out utilizing HTML5 in your web site, it’s really useful that you just create an HTML template first. You may then use this as a boilerplate for all of your future tasks transferring ahead. Right here’s what a primary template seems to be like:

<!DOCTYPE html> <html lang=”en” manifest="/cache.appcache"> <head> <title>That is the Title of the Web page</title> <meta charset="utf-8"> <hyperlink rel="stylesheet" rel="noopener" goal="_blank" href="https://blog.hubspot.com/bootstrap/css/bootstrap.min.css">  <model> /* These model tags are solely essential in case you’re including inside CSS */ </model> </head> <physique> <h1>It is a Heading</h1> <p>It is a paragraph.</p> </physique> </html>

Let’s stroll via the method of constructing this file line-by-line so you may create an HTML template in your net tasks. You may observe alongside utilizing a basic text editor like Notepad++.

First, declare the type of document as HTML5. To do so, you’d add the special code <!DOCTYPE html> on the very first line. There’s no need to add “5” in this declaration since HTML5 is just an evolution of previous HTML standards.

Next, define the root element. Since this element signals what language you’re going to write in, it’s always going to be <html> in an HTML5 doc.

Include a language attribute and define it in the opening tag of the HTML element. Without a language attribute, screen readers will default to the operating system’s language, which could result in mispronunciations of the title and other content on the page. Specifying the attribute will ensure screen readers can determine what language the document is in and make your website more accessible. Since we’re writing this post in English, we’ll set the file’s lang attribute to “en.”

Also include the manifest attribute in your opening HTML tag. This points to your application’s manifest file, which is a list of resources that your web application might need to access while it’s disconnected from the network. This makes it possible for a browser to load your site even when a user loses or doesn’t have an internet connection.

Create the head section of the doc by writing an opening <head> and closing </head> tag. In the head, you’ll put meta information about the page that will not be visible on the front end.

In the head section, name your HTML5 document. Wrap the name in <title></title> tags.

Below the title, add meta information that specifies the character set the browser should use when displaying the page. Generally, pages written in English use UTF-8 so add the line: <meta charset = “UTF-8“ />.

Below, add links to any external stylesheets you’re using. If you’re loading Bootstrap CSS onto your project, for example, it will look something like this: <link rel=”stylesheet” rel=”noopener” target=”_blank” href=”https://blog.hubspot.com/bootstrap/css/bootstrap.min.css”>. For the sake of this demo, I’ll include a dummy link and a comment in HTML noting that it’s optional.

Now create the body section of the doc by writing an opening <body> and closing </body> tag. The body section contains all the information that will be visible on the front end, like your paragraphs, images, and links.

In the body section, add a header and paragraph. You’ll write out the heading name and wrap it in <h1></h1> tags, and write out the paragraph and wrap it in <p></p> tags.

Lastly, don’t forget the closing tag of the html element.

When you’re done, you can save your file with the .html extension and load it into a browser to see how it looks.

Image Source

When did HTML5 come out?

The primary public draft of HTML5 was launched by the Net Hypertext Software Know-how Working Group (WHATWG) in 2008. Nevertheless, it was not launched as a World Vast Net Consortium (W3C) suggestion till October 28, 2014. This suggestion was then merged with the HTML Dwelling Commonplace by WHATWG in 2019.

To know why the specification course of spanned over a decade, let’s take a look at the sophisticated historical past of HTML5.

In 1999, the yr after HTML4 was launched, the W3C determined to cease engaged on HTML and as an alternative concentrate on creating an XML-based equal referred to as XHTML. 4 years later, there was a renewed curiosity in evolving HTML as folks started to understand the deployment of XML relied completely on new applied sciences like RSS.

In 2004, Mozilla and Opera proposed that HTML ought to proceed to be developed at a W3C workshop. When the W3C members rejected the proposal in favor of constant to develop XML-based replacements, Mozilla and Opera — joined by Apple — launched the Net Hypertext Software Know-how Working Group (WHATWG) to proceed evolving HTML.

In 2006, the W3C reversed course and indicated they had been serious about taking part within the growth of the HTML5 specification. A yr later, a gaggle was shaped to work with the WHATWG. These two teams labored collectively for quite a few years till 2011, after they determined that they had two separate objectives. Whereas the W3C wished to publish a completed model of HTML5, the WHATWG wished to publish and repeatedly keep a dwelling normal for HTML.

In 2014, the W3C printed their “final” model of HTML5 and the WHATWG continued to take care of a “living” model on their website. These two paperwork merged in 2019, when the W3C and WHATWG signed an agreement to collaborate on the event of a single model of HTML transferring ahead.

Which browsers assist HTML5?

All the newest variations of main browsers — together with Google Chrome, Opera, Mozilla Firefox, Apple Safari, and Web Explorer — assist many HTML5 options however not all. Presently, Chrome and Opera are probably the most suitable with HTML5, with Firefox and Safari following carefully behind. Web Explorer is the least suitable, though it partially or absolutely helps most HTML5 options.

Beneath is a desk to point out the various compatibility of the main browsers. This is a key:

✓ Absolutely supported

≈ Partially supported

✗ Not supported

Chrome opera Firefox safari Web explorer New semantic components ✓ ✓ ✓ ✓ ≈ Inline SVG ✓ ✓ ✓ ✓ ✓ Expanded kind options ✓ ✓ ≈ ≈ ≈ WebM video format ✓ ✓ ✓ ≈ ✗ Placeholder attribute ✓ ✓ ✓ ✓ ≈ Server-sent occasions ✓ ✓ ✓ ✓ ✗ Native net storage ✓ ✓ ✓ ✓ ✓

If you would like a extra detailed breakdown of the totally different variations of browsers that assist HTML5, take a look at Caniuse.com.

HTML5 is the Way forward for the World Vast Net

With its new semantic components, expanded kind choices, format-independent video tag, and extra, HTML5 is revolutionizing how builders construct net pages. This, in flip, is altering shoppers’ experiences online. We are able to now watch movies with out being requested to replace Flash or obtain one other software program. We are able to use functions after we don’t have an web connection. We are able to have the identical nice expertise on a website whether or not utilizing a cellphone, pill, or Sensible TV — and extra.

Source link

#General

0 notes

suzanneshannon · 6 years ago

Text

Quoting in HTML: Quotations, Citations, and Blockquotes

It’s all too common to see the incorrect HTML used for quotes in markup. In this article, let’s dig into all this, looking at different situations and different HTML tags to handle those situations.

There are three major HTML elements involved in quotations:

<q>

<cite>

Let’s take a look.

Blockquotes

Blockquote tags are used for distinguishing quoted text from the rest of the content. My tenth grade English teacher drilled it into my head that any quote of four lines or longer should be set apart this way. The HTML spec has no such requirement, but as long as the text is a quote and you want it to be set apart from the surrounding text and tags, a blockquote is the semantic choice.

By default, browsers indent blockquotes by adding margin on each side.

See the Pen The Blockquote Tag by Undead Institute (@undeadinstitute) on CodePen.

As a flow element (i.e. “block level” element), blockquote can contain other elements inside it. For example, we can drop paragraphs in there with no problem:

But it could be other elements, too, like a heading or an unordered list:

It’s important to note that blockquotes should only be used for quotations rather than as a decorative element in a design. This also aids accessibility as screen reader users can jump between blockquotes. Thus a blockquote element used solely for aesthetics could really confuse those users. If you need something more decorative that falls outside the bounds of extended quotations, then perhaps a div with a class is the way to go.

blockquote, .callout-block { /* These could share styling */ }

Quoting with Q

Q tags (<q>) are for inline quotes, or what my tenth grade teacher would say are those under four lines. Many modern browsers will automatically add quotation marks to the quote as pseudo elements but you may need a backup solution for older browsers.

See the Pen The Q Tag by CSS-Tricks (@css-tricks) on CodePen.

Typical quotation marks are just as valid for inline quotes as the <q> element. The benefits of using <q>, however, are that it includes a cite attribute, automatic handling of quotation marks, and automatic handling of quote levels. <q> elements should not used for sarcasm (e.g. “you would use a <q> tag for sarcasm, wouldn’t you?”), or signifying a word with air quotes (e.g. “awesome” is an “accurate” description of the author). But if you can figure out how to mark up air quotes, please let me know. Because that would be “awesome.”

The citation attribute

Both <q> and blockquotes can use a citation (cite) attribute. This attribute holds a URL that provides context and/or a reference for the quoted material. The spec makes a point of saying that the URL can be surrounded by spaces. (I’m not sure why that’s pointed out, but if you want to anger the semantic code deities, you’ll have to do more than throw spaces around.)

<p>The officer left a note saying <q cite="https://johnrhea.com/summons">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

That cite attribute isn’t visible to the user by default. You could add it in with a sprinkle of CSS magic like the following demo. You could even fiddle with it further to make the citation appear on hover.

See the Pen Attributable citations by CSS-Tricks (@css-tricks) on CodePen.

Neither of those options are particularly great. If you need to cite a source such that users can see it and go to it, you should do it in HTML and probably with the <cite> element, which we’ll cover next.

The citation element

The <cite> tag should be used for referencing creative work rather than the person who said or wrote the quote. In other words, it’s not for quotes. Here are the examples from the spec:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by Peter F. Hamilton. My favorite comic is <cite>Pearls Before Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive Samba</cite> by the Cannonball Adderley Sextet.</p>

Here’s another example:

See the Pen Cite This! by CSS-Tricks (@css-tricks) on CodePen.

If the author of this article told you he’d give you a cupcake, and you <cite> him by name, that would be semantically incorrect. Thus no cupcakes would change hands. If you cited the article in which he offered you a cupcake, that would be semantically correct, but since the author wouldn’t do that, you still wouldn’t get a cupcake. Sorry.

By default, browsers italicize cite tags and there’s no requirement that a <q> or <blockquote> be present to use the cite element. If you want to cite a book or other creative work, then slap it in the cite element. The semantic deities will smile on you for not using either <i> or <em> elements.

But where to put the cite element? Inside? Outside? The upside down? If we put it inside the <blockquote> or the <q>, we’re making it part of the quote. That's forbidden by the spec for just that reason.

<blockquote> Quote about cupcake distribution from an article <cite>The Article</cite> </blockquote>

Putting it outside just feels wrong and also requires you to have an enclosing element like a <div> if you wanted to style them together.

<div class="need-to-style-together"> <blockquote> Quote about cupcake distribution from an article </blockquote> <cite>The Article</cite> </div>

N.B. If you google this issue you may come across an HTML5 Doctor article from 2013 that contradicts much of what's laid out here. That said, every time it links to the docs for support, the docs agree with the article you're currently reading rather than the HTML5 Doctor article. Most likely the docs have changed since that article was written.

Hey, what about the figure element?

One way to mark up a quotation — and in a way that pleases the semantic code deities — is to put the blockquote within a figure element. Then, put the cite element and any other author or citation information in a figcaption.

<figure class="quote"> <blockquote> But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity. </blockquote> <figcaption> — Jeremy Keith, <cite>Mental models</cite> </figcaption> </figure>

While this doubles the number of elements needed, there are several benefits:

It’s semantically correct for all four elements.

It allows you to both include and encapsulate author information beyond citing the name of the work.

It gives you an easy way to style the quote without resorting to divs, spans or wretchedness.

See the Pen It Figures You'd Say That by CSS-Tricks (@css-tricks) on CodePen.

None of this is for dialogue

Not <dialog>! Those are for attention-grabbing modals. Dialogue, as in, conversational exchanges between people speaking or typing to each other.

Neither <blockquote> nor <q> nor <cite> are to be used for dialogue and similar exchanges between speakers. If you’re marking up dialogue, you can use whatever makes the most sense to you. There’s no semantic way to do it. That said, the spec suggests <p> tags and punctuation with <span> or <b> tags to designate the speaker and <i> tags to mark stage directions.

Accessibility of quotes

From the research I’ve done, screen readers should not have any issue with understanding semantic-deity-approved <q>, <blockquote>, or <cite> tags.

[VIDEO]

More “ways” to “quote”

You can add quotation marks to a <blockquote> using CSS pseudo elements. The <q> element comes with quotation marks baked in so they need not be added, however adding them as pseudo-elements can be a workaround for older browsers that don’t automatically add them. Since this is how modern browsers add the quotation marks there's no danger of adding duplicate quotes. New browsers will overwrite the default pseudo elements, and older browsers that support pseudo elements will add the quotes.

But you can’t, like I did, assume that the above will always give you smart opening and closing quotes. Even if the font supports smart quotes, sometimes straight quotes will be displayed. To be safe, it’s better to use the quotes CSS property to up the intelligence on those quotation marks.

blockquote { quotes: "“" "”" "‘" "’"; }

See the Pen "Quot-a-tizing" the blockquote by CSS-Tricks (@css-tricks) on CodePen.

Multi-level quoting

Now let’s look at quote levels. The <q> tag will automatically adjust quote levels.

Let’s say you’re in an area that uses the British convention of using single quotes. You could use the CSS quotes rule to put the opening and closing single quotes first in the list. Here’s an example of both ways:

See the Pen Quote Within a Quote by CSS-Tricks (@css-tricks) on CodePen.

There is no limit to nesting. Those nested <q> elements could even be within a blockquote that’s within a blockquote.

If you add quotation marks to a blockquote, know that the blockquote does not change the quote level the way a <q> tag does. If you expect to have quotes within a blockquote, you may want to add a descendant selector rule to start <q> elements within a blockquote at the single quote level (or double quotes if you follow British conventions).

blockquote q { quotes: "‘" "’" "“" "”"; }

The last quote level you put in will continue through subsequent levels of quotation. To use the double, single, double, single… convention, add more levels to the CSS quotes property.

q { quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”"; }

Hanging punctuation

Many typography experts will tell you that hanging the quotation marks on blockquotes looks better (and they’re right). Hanging punctuation is, in this case, quotation marks that are pushed out from the text so that the characters of the text line up vertically.

One possibility in CSS is using a slightly negative value on the text-indent property. The exact negative indentation will vary by font, so be sure to double check the spacing with the font you end up using.

blockquote { text-indent: -0.45em; }

There is a nicer way to handle this by using the hanging-punctuation CSS property. It’s only supported in Safari at the time of this writing, so we’ll have to progressively enhance:

/* Fallback */ blockquote { text-indent: -0.45em; } /* If there's support, erase the indent and use the property instead */ @supports ( hanging-punctuation: first) { blockquote { text-indent: 0; hanging-punctuation: first; } }

Using hanging-punctuation is better because it’s less fiddly. It’ll just work when it can.

See the Pen Hanging Your Punctuation by CSS-Tricks (@css-tricks) on CodePen.

Can we animate quotation marks?

Of course we can.

See the Pen Dancing Quotes by CSS-Tricks (@css-tricks) on CodePen.

Why you’d need to do this, I’m not totally sure, but the quotation marks in a <q> tag are added are pseudo elements in the UA stylesheet, so we’re able to select and style them — including animation — if we need to.

Wait, maybe we just solved the air quotes thing after all.

The post Quoting in HTML: Quotations, Citations, and Blockquotes appeared first on CSS-Tricks.

Quoting in HTML: Quotations, Citations, and Blockquotes published first on https://deskbysnafu.tumblr.com/

0 notes

vkreatejaipur · 5 years ago

Text

What is the Difference between html and html5?

In this article of VKREATE, we will learn difference between html and html5.Friends, if you want to go into the field of a web developer or website designer, then you should start learning Html. It is a basic thing to move forward in the field of web development.

By the way, learning Html Programming language is much easier as compare to Java, PHP, JavaScript, Python, C ++ etc.So to move forward in this field you must need to know Markup language like - HTML, XML etc. It is very important to learn.

If any person wants to become a web developer or design any website by himself, first of all he should know about HTML. A lot of people say that to become a web developer, you must have a computer related degree, but there is nothing like this, if you have the knowledge then the degree has no importance because not all companies provide jobs by looking at the degree.

What is the Difference between html and html5?

Let us discuss what is difference between html and html5 one by one so that you will get clear idea about both language and it will be easy for you all to understand.

What is HTML?

HTML is a Markup language, where the full form of html is "Hypertext Markup Language". Html is most commonly used in creating web pages.

The website you are reading now has also been used using Structure Html language. Hypertext and markup are two different terms, whose definition is as follows:

· Hypertext links or combines two web pages within a single text. So that when a user clicks on that text, it will access it on the next web-page. Thus, the links available on web pages are called hypertext.

· Markup language is used to create the structure of any web page. Apart from html, DHTML, XHTML, XML XSLT etc. There is also markup language. But Html is the most commonly used language

Features of HTML:

There are many common features of HTML, so let's look at all the features one by one to know the actual difference between html5 and html.

It is easy and simple language which can be understood easily and can be easily modified.

It is platform-independent language meaning that it can be opened or run in any operating system.

This provides the facility to the programmer to make the web-page attractive by adding graphics, video, audio, images etc. to the web-pages.

This provides the facility to add link to the programmer in the web-page so that it can be easily moved from one page to another.

It is much easier due to the tag being defined in it.

HTML is not case sensitive language, meaning we can write the tag in capital letter or small letter, but it is usually written in small letter only. But some of the codes in this are case sensitive such as & nbsp;

How to Learn HTML

To learn Html, it is most important to have knowledge of Html tags. Html has many types of codes. Which are called Html tag. Which tells Browser where and how to show the text written inside the tag in the web page. All these Html tags are already programmed in the computer.

That is why as soon as you give the command to the browser with the help of these codes, it immediately shows the language of these HTML tags and shows it in the web page. Although the list of Html tag is very long, but some basic tags which are basically used are as follows.

HTML Basic Tags

1. HTML tag - <html>

2. Head tag- <head>

3. Title tag- <title>

4. Body tag- <body>

5. Heading tag- <h1>

6. Paragraph tag- <p>

7. Line break tag- <br/>

8. Centering content tag- <center>

9. Horizontal line tag- <hr>

What is HTML5?

HTML5 is the latest version of HTML that was published in 2014. HTML or Hypertext Markup Language is a language that is used to create a web page.

Many people call HTML as programming language which is wrong. HTML is not a programming language but it is a language that identifies the meaning, purpose and structure of text within any document (web page).

As you know, there are constant changes in the world of technology and things are being improved from time to time. Similarly, there have been many updates in HTML as well, the most recent version being HTML5.

Some Important features of html5

We are providing some feature of html5 so that u may know about the difference between html and html5. Some Important features are given below:-

1. DOCTYPE

<! DOCTYPE html>

Actually, did you know that this is not really necessary even for HTML 5? However, it is used for current and older browsers that require a specified doctype. Browsers that do not understand this principle will simply present the markup contained in standard mode. So, without worry, feel free to blow caution into the air, and embrace the new HTML5 doctype.

2. Figure Element

Consider the following mark-up for an image:

<p> Image of Mars. </p>

Unfortunately there is no easy or meaningful way to add captions wrapped in paragraph tags with an image element. HTML 5 improves this with the introduction of the <figure> element. When combined with the <figcaption> element, we can now combine captions with their image counterparts.

<p> This is an image of something interesting. </p>

</figcaption>

</figure>

3. No More Types for Scripts and Links

You probably still add the type attribute to your link and script tags.

It is no longer necessary. It is implied that both of these tags refer to stylesheets and scripts, respectively. Thus, we can remove all types of type attributes.

4. Quote or do not quote.

. Remember, HTML 5 is not XHTML. If you don't want to, you don't have to wrap your attributes in quotation marks. You do not have to turn off your elements. Also, there is nothing wrong with doing this, if it makes you feel more comfortable. I have found it perfect.

<p class = myClass id = someId> Start the reactor.

Make up your mind on it. If you like a more structured document, then by all means, do it with quotes.

Read more feature here

Html 5 tags

The list of new tags included in HTML 5 is given below. These HTML 5 tags (elements) provide a better document structure. All HTML 5 tags in this list are given in alphabetical order with description.

Tag with Description

<article> this element is used to define independent piece of content in a document such as a blog, magazine or newspaper article.

<aside> states that the article is slightly related to the rest of the page.

<audio> It is used to play audio file in HTML.

<bdi> The full name of bdi is bi-directional isolation. It isolates a part of the text (which is formatted in the other direction from the outside text document).

<canvas> It is used to draw canvas.

<data> It provides a machine readable version of its data.

<datalist> It provides auto complete feature for textfield.

<details> It tells about additional information or controls required by the user.

<dialog> This defines the window or dialog box.

<figcaption> This is used to define the caption for the <figure> element.

<figure> It defines self-contained content like photos, diagrams etc.

<footer> This defines the footer for the section.

<header> This defines the header for the section.

<main> This defines the main content of the document.

<mark> This specifies the marked or expanded content.

<menuitem> This defines a command that the user can invoke from the popup menu.

<meter> It is used to measure the scalar value within the given range.

<nav> This is used to define the navigation link in the document.

<progress> It tells about the progress of work.

<rp> tells what to show in a browser that does not support ruby annotation.

<rt> This defines the explanation / pronunciation of the characters.

<ruby> It also defines ruby annotation with <rp> and <rt>.

<section> This defines the section in the document.

<summary> This specifies the visible heading for the <detailed <element.

<time> It is used to define date / time.

<video> It is used to play a video file in HTML.

<wbr> This defines possible line break.

Difference between html and html5

HTML's full name is "Hypertext Markup Language" while HTML5 is known as "Hypertext Markup Language Fifth version".

HTML is the first and first version of all its types, used in the creation of various websites while HTML5 is the fifth version of HTML which was introduced in October 2014.

Only primary tags are available in HTML whereas HTML5 has a repository of tags, ie Variety has tags.

The complete code of HTML can be written which will also know the basic of computer languages, while HTML5 is currently in progress and various additions are being made, for which it is necessary to have mandatory information.

HTML codes are error free while HTML5 may contain some errors.

All browsers support HTML code but not all browsers support HTML5 code.

There is also a difference in the way these two work. The body of HTML5 consists of two articles whereas normal HTML has two post options instead.

Vector graphics is a core part in HTML5, while some technologies have to be used to use them in HTML.

It is not possible to determine the exact location of the person using the website at any given time using HTML, while the current status can also be determined on mobile devices via HTML5.

Summary

So hopefully, by now you must have known detail information about difference between html and html5.If you like this article on difference between html5 and html please share this to your friends so that they can also learn this.

Read More: Ping Submission and Factor of SMO

#html #html5 #htmlandhtml5 #developer #coding

0 notes

dicazoinstitute · 8 years ago

Text

First developed by Tim Berners-Lee in 1990, HTML is short for HyperText Markup Language. HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every web page you see on the Internet is written using one version of HTML code or another.

HTML code ensures the proper formatting of text and images so that your Internet browser may display them as they are intended to look. Without HTML, a browser would not know how to display text as elements or load images or other elements. HTML also provides a basic structure of the page, upon which Cascading Style Sheets are overlaid to change its appearance. One could think of HTML as the bones (structure) of a web page, and CSS as its skin (appearance).

What does an HTML tag look like?

As seen above in the above HTML tag example, there are not many components. Almost all HTML tags have an opening tag that contains the name with any attributes and a close tag that contains a forward slash and the name of the tag that is being closed. For tags that do not have a closing tag like the <img> tag, it is best practice to end the tag with a forward slash.

Each tag is contained within a less than and greater than angle brackets and everything between the opening and closing tag is displayed or affected by the tag. In the above example, the <a> tag is creating a link called "Computer Hope" that is pointing to the hope.html file.

What does HTML look like?

The following is an example of a basic web page written in HTML as well as a description of each section and its function.

<!DOCType HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.dicazo.org/TR/html4/loose.dtd">

<head> <title>Example page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> </head> <body> <h1>This is a heading</h1> <p>This is an example of a basic HTML page.</p> </body>

</html>

The box above contains the key ingredients to a basic web page. The first line (DOCType) describes what version of HTML the page was written in so that an Internet browser can interpret the text that follows. Next, the HTML opening tag lets the browser know that it is reading HTML code. The HTML tag is followed by the head section which contains information about the page such as its title, meta tags, and where to locate the CSS file. The body section is all content that is viewable on the browser. For example, all the text you see here is contained within the body tags. Finally, closing tags wrap each element for proper syntax.

See our HTML and Web Design Help for a full listing of HTML tags.

What is HTML5?

HTML5 is the update made to HTML from HTML4 (XHTML follows a different version numbering scheme). It uses the same basic rules as HTML4, but adds some new tags and attributes which allow for better semantics and for dynamic elements that are activated using JavaScript. New elements include section, <article>, <aside>, <audio>, <bdi>, <canvas>, <datalist>, <details>, <embed>, <figure>, <figcaption>, <footer>, <header>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <time>, <track>, <video>, and <wbr>. There are also new input types for forms, which include tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, and color.

With the increasing movement to keep structure and style separate, a number of styling elements have been removed along with those that had accessibility issues or saw very little use. These following elements should no longer be used in HTML code: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, and <tt>. HTML5 also simplifies the doctype declaration to the tag in the following box.

What does HTML5 look like?

As shown below the HTML5 code is very similiar to the earlier HTML4 example, but is much cleaner with the revised doctype tag.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Example page</title> </head> <body> <h1>This is a heading</h1> <p>This is an example of a basic HTML page.</p> </body> </html>

How to create and view HTML

Because HTML is a markup language it can be created and viewed in any text editor as long as it is saved with a .htm or .html file extension. However, most find it easier to design and create web pages in HTML using an HTML editor.

Once the HTML file is created it can be viewed locally or uploaded to a web server to be viewed online using a browser.

Which file extensions are used with HTML?

HTML files use either the .htm or .html file extension. Older versions of Windows (Windows 3.x) only allow three-letter file extensions, so they used .htm instead of .html. However, both file extensions have the same meaning, and either may be used today. That being said, we recommend sticking to one naming convention as certain web servers may prefer one extension over the other.

#website designing course #best institute for website designing #education

0 notes

jakobkerkhove · 8 years ago

Text

Why you should avoid <div> and <span>

When I built my first HTML page, CSS wasn't that popular. Most webpages were created with tables for no reason other than styling. Whenever you saw a paragraph with rounded corners on the web, it was usually built with a table element and some images:

<table> <thead></thead> <tbody cellspacing="0" cellpadding="0"> <tr> <td><img src=“top-left-corner.gif” height=“10” width=“10” /></td> <td bgcolor="red"></td> <td><img src=“top-right-corner.gif” height=“10” width=“10” /></td> </tr> <tr bgcolor="red"> <td></td> <td>Lorem ipsum</td> <td></td> </tr> <tr> <td><img src=“bottom-left-corner.gif” height=“10” width=“10” /></td> <td bgcolor="red"></td> <td><img src=“bottom-right-corner.gif” height=“10” width=“10” /></td> </tr> </tbody> </table>

However, this practice was not ideal for multiple reasons. First of all, the code is long and not that readable. Except for server side rendering, there is no way to re-use this paragraph. In bigger projects, it’s really important to write maintainable, reusable and readable code. Secondly, four images are used, which increases bandwidth, load time and will decrease performance of the website. In this particular case, the images were created in red, but need to be recreated for each other color. Besides all of that, it’s just semantically wrong to use a table in this case. The purpose was not to create a table, but a paragraph. But, let’s get back to that later.

It took years till people started switching from the ‘table strategy’ to using CSS, mostly because border-radius wasn't supported till the 9th version of Internet Explorer. Although it took a while, most websites eventually switched to a complete separation between structure (HTML) and styling (CSS). This was a great improvement, however a new bad practice was introduced as well.

<div class=“rounded-box” > Lorem ipsum </div> <style> .rounded-box { border-radius: 50%; background-color: #ff0000; } </style>

The div-tag became the solution to life, the universe and everything. Literally everything was done with that tag, because it could easily be styled with CSS. Why div? It had mostly no default styling and was also known as the element that could be used when nothing else was in place. For all kinds of inline styling, people preferred the usage of span-tags.

Years later, HTML5 (nowadays known as HTML) became very trendy, but with a lot of misunderstandings about what it actually meant. HTML, HyperText Markup Language is the idea of structuring text, media, links and more in a standardised way. It’s nothing more or less of a worldwide agreement of how to structure documents so that everyone and everything knows what’s a title, an image, etc in the document. It has nothing to do with styling, interactions, design, feeling, whatsoever. HTML5 became the newest version of this standard.

With HTML5, some new elements were introduced:

Tag Description <article> Defines an article in the document <aside> Defines content aside from the page content <bdi> Defines a part of text that might be formatted in a different direction from other text <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <figcaption> Defines a caption for a <figure> element <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for the document or a section <header> Defines a header for the document or a section <main> Defines the main content of a document <mark> Defines marked or highlighted text <menuitem> Defines a command/menu item that the user can invoke from a popup menu <meter> Defines a scalar measurement within a known range (a gauge) <nav> Defines navigation links in the document <progress> Defines the progress of a task <rp> Defines what to show in browsers that do not support ruby annotations <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <ruby> Defines a ruby annotation (for East Asian typography) <section> Defines a section in the document <summary> Defines a visible heading for a <details> element <time> Defines a date/time <wbr> Defines a possible line-break <datalist> Defines pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation <canvas> Draw graphics, on the fly, via scripting (usually JavaScript) <svg> Draw scalable vector graphics <audio> Defines sound content <embed> Defines containers for external applications (like plug-ins) <source> Defines sources for <video> and <audio> <track> Defines tracks for <video> and <audio> <video> Defines video or movie content

(Source: w3schools)

It’s a shame, but even in 2017, those are still rarely used. Video and canvas became very popular lately, but the other ones seem to be forgotten. On the web, most developers still use div and span for everything.

But why am I whining about this?

Accessibility

Some users need special equipment to browse the web. Take blind users for example. They need specialised software to browse the web and this software relies on the semantics of HTML. This goes way beyond the alt tag on images. If you would use a table-tag for styling, this software would think it’s an actual table and try to pronounce the columns and rows.

SEO

Google and other search engines trust the semantic of your HTML-document. It parses the document and indexes everything based on whatever you describe as title (h1), section (section), paragraph (p) and so on. In short, a website will be ranked higher with a better HTML structure. Also all other websites (such as Facebook, twitter) relies on the same standard and will understand the document better.

Code quality

Who else likes a correct semantic structure? Developers, because it actually describes the code. This is more readable

<main> <nav></nav> <aside></aside> <article> <section> <h1>Title</h1> <p>Lorem ipsum</p> </section> </article> <footer></footer> </main>

than this

<div> <div></div> <div></div> <div> <div> <span>Title</span> <div>Lorem ipsum</div> </div> </div> <div></div> </div>

The future

Some browsers already have plugins based on the new HTML elements and the future is bright. For example, a browser could use the time tag to add something to your calendar. A device could know if the page is busy or not based on the progress element. Those are just some examples of what could be done.

Despite all of this might seem like common sense, it’s not really common on the web right now. (I’m not even sure if Tumblr will parse a correct HTML for this blog). The point is, if you weren’t using the new tags before, yesterday was the day to change…

0 notes

lewiskdavid90 · 8 years ago

Text

75% off #The Complete HTML5 and CSS3 Course – $10

Design amazing, attractive and responsive website for all devices. Include huge projects

All Levels, – 15 hours, 124 lectures

Average rating 4.4/5 (4.4 (20 ratings) Instead of using a simple lifetime average, Udemy calculates a course’s star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.)

Course requirements:

You don’t need to learn anything. i will teach you everything form Zero to Hundred Desire for learning is very important for you If you want to earn money from design website and want to learn web design take this course No matter if you dont know what is web designing. i will teach you everything with all details

Course description:

Do you want Design a Website? You Don’t know how?

The key is in my course.

In the recent century, using the Internet has become essential to communication and gaining access to information. Internet comes with a certain level of expectation regarding the attractiveness and ease of use of web pages. Web designers need to create attractive and successful websites. HTML5 and CSS3 are some of the most essential and evolving web technologies that enable you to structure content and present it on the web. Knowledge of these languages will help you create web pages that are easy to read and appealing to users. This course lays the foundation for mastering these two popular web publishing technologies.

This course also focuses on the new and advanced features of HTML5, covering how to create HTML5 and CSS3 markup that will work well on the widest possible variety of web browsers, mobile devices. The course also show you how to use advanced HTML5 multimedia features such as video, audio and use CSS3 for animation

This course contains Projects and prepare you for learning and coding better.

At the End of this course you can design Responsive Website and i designed a responsive Technology Website for all devices(Mobile, Tablet, Computer)

This course contains 16 sections:

Section 1 : Students will learn about what is this course about and Install Software requires

Section 2 : students will learn about Tags, such as Head,Paragraph, Lists,Images, Tables and etc…

Section 3 : Students will be able to create different kind of forms

Section 4 : Students will be able to use kinds of semantic element such as figure and figcaption,mark, article,section and etc…

Section 5 : Students will be able to use Video and Audio in HTML(5) Web page

Section 6 : Students will be know about CSS and style webpage with CSS for example change color,set format for text , set positions and etc…

Section 7 : Students will be know how to create 2D Elements

Section 8 : Students will be know how to create 3D Elements

Section 9 : Students able to change property values smoothly over a given duration

Section 10 : Students able to change element from one style to another style

Section 11 : Students able to change style images

Section 12 : Students able to change style Buttons

Section 13 : Students able to use responsive pagination with CSS(3)

Section 14 : Students able to design web page for all devices

Section 15 : Students able to design responsive websites by using HTML(5) and CSS(3)

Section 16 : Students will be ready for next step

Full details Create Web Page with HTML(5) & CSS(3) How to set Headers , Paragraph for web page How to set pages for webpage Create animation elements How to create a responsive website for all devices such as(Mobile,Tablet,Computer) How to create Box and set Positions for elements How To create buttons and use for pages or send forms How to create to insert Video and Audio in webpage How to create Vertical,Horizontal,Dropdown Navigation Bar(menus) Create attractive differents Forms How to create Circle,Thumbnail and set Text on images

Full details Those People love Coding and Programming Those people want design web site After finish this course you have lots of knowledge of design websites and get a job in this way After finish this course you are able to design your website with your knowledge and codes

Reviews:

“Not so good” (SAYED Mahmoud)

“sehr detailreich und anschaulich erklärt” (Guy Koedinger)

“Great course! This HTML5 and CSS3 course broadened my learning and building websites in html5. Instructor define and teach like organized map, It also give me knowledge to plan and build actually websites in different browsers and devices. It is complete course to learn html5. Thanks.” (Awais Riaz)

About Instructor:

Aatef Jaberi

Hi, my name is Aatef. I am engineer in Information Technology and Web Development Designer. I have experience in Information Technology and Web Development Designer for 5 years. I have worked as an online supporter and I also work as a networking in companies and online Web Designer I love information Technology (IT) and programming. I study very much to learn more and add to my knowledge then I help myself and other people to improve together. My Slogan: The key to success is perseverance, effort and Do Not Stop

Instructor Other Courses:

Configuring Windows 10 Aatef Jaberi, IT Engineer & Web Development Designer (6) $10 $20 Configuring Windows 7 (70-680) …………………………………………………………… Aatef Jaberi coupons Development course coupon Udemy Development course coupon Web Development course coupon Udemy Web Development course coupon The Complete HTML5 and CSS3 Course The Complete HTML5 and CSS3 Course course coupon The Complete HTML5 and CSS3 Course coupon coupons

The post 75% off #The Complete HTML5 and CSS3 Course – $10 appeared first on Course Tag.

from Course Tag http://coursetag.com/udemy/coupon/75-off-the-complete-html5-and-css3-course-10/ from Course Tag https://coursetagcom.tumblr.com/post/157339208913

0 notes