Bonuses like learning resources and free HTML5 templates are available for you, so take this chance to kick-start your HTML5 journey!<\/p>\n
Changes between HTML4 and HTML5<\/h2>\n
You may be wondering why it\u2019s even important to switch into HTML5. There are a myriad of reasons, but mostly because you\u2019ll be working with the global Internet standards<\/strong> like every other designer.<\/p>\n In this way you\u2019ll find more support online and your websites will render properly in modern browsers<\/strong> which are constantly improved.<\/p>\n Comparison between HTML4 and HTML5 is difficult to spot at surface level. From viewing the new HTML5 draft<\/a> you can see featured elements and corrected error handling procedures. Browser developers have specifically enjoyed the new specifications for rendering default web pages.<\/p>\n What\u2019s more from HTML5 is the conversion of our modern web browser. With these new specifications the web as a whole is now viewed as an application platform<\/strong> for HTML (especially HTML5), CSS, and JavaScript to be built upon.<\/p>\n Also, this system elegantly creates harmony between web designers and developers<\/strong> by setting common standards which all browsers should follow.<\/p>\n Additionally many elements have been created to represent new-age digital media<\/strong>. These include Granted there is still a heavy need for jQuery, since there are many software developers who have yet to recognize the features. If you\u2019d like a list of tags check this W3Schools table<\/a> to learn more about them.<\/p>\n I find the easiest way to understand any topic is to dive right into it<\/strong>. So I\u2019ll be constructing a very basic HTML5 skeleton template for a web page.<\/p>\n I included a few of the newer elements, which I hope to categorize a bit later.<\/p>\n Right away this isn\u2019t very different from a standard HTML4 web page. What you may notice is that we do not need to include any more self-closing tags<\/strong>. This is truly wonderful news as it will save lots of time off your development projects.<\/p>\n For those who don\u2019t know, in XHTML drafts there were many elements labelled self-closing<\/strong>. These would end with a forward slash before the \u2018greater than\u2019 operator to signify you wouldn\u2019t need to include another closing tag elsewhere. As an example, to create a meta keywords tag you would use This rule still applies in HTML5. But now you don\u2019t even need the extra forward slash<\/strong>! For all standards-compliant browsers both elements will render the same way.<\/p>\n The majority of our new code shouldn\u2019t be too shocking. Our doctype is hilariously simpler<\/strong> than ever, no need for excessive body attributes<\/strong>, and information in our heading is clearly labelled.<\/p>\n Moving on I\u2019d like to focus your attention on the content inside our First you\u2019ll see the entire page is encapsulated within a div<\/em> tag<\/strong>. I\u2019ve labelled this with an ID of wrapper<\/em>, meaning it wraps around our entire website content.<\/p>\n This is useful to set a maximum width or position content<\/strong> around on the screen. Next I\u2019ve fractured the page into 3 core elements \u2013 one Inside my custom header area I have added a simplistic display of the page\u2019s title, and navigation items using the Now for the Similarly the quiet footer<\/em> tag<\/strong> works well to differentiate this content among the page. Inside I have placed a solemn paragraph which may contain some copyright and ownership information. But chances are good you\u2019ll want to include a bit more content, such as secondary links to your pages.<\/p>\n To finish off this basic stencil layout we can use a few CSS styles. In the basic HTML5 template I added an external CSS stylesheet<\/strong> so we can keep our code areas separated.<\/p>\n This will clear up a lot of confusion<\/strong> in the long run when your pages and styles begin to run on for different pages.<\/p>\n So I haven\u2019t spent a great deal of time with CSS, but enough to showcase a couple of neat effects. First off I\u2019ve used some of the border-radius settings<\/strong> to build very cool navigation link hover effects.<\/p>\n You can target this same effect in the template code, just add the following lines into the CSS document.<\/p>\n Another neat effect is the clearfix styles<\/strong>. This isn\u2019t an entirely new concept with CSS3, but it is important for building standards-compliant web pages.<\/p>\n Often when you\u2019re looking to float content next to each other you\u2019ll experience buggy positioning glitches. This is caused by offset margins and errors in setting absolute widths for your floated content.<\/p>\n This concept can seem a bit confusing, and I\u2019ve added a small bit of code below to help. Basically we\u2019re targeting two Since our container These bits of code are simple for getting started. They also pertain to our HTML5 template code constructed earlier, so this is simple practice. But when it comes to real web junkies you\u2019ll be looking into more CSS3 functionality.<\/p>\n To construct full HTML5\/CSS3 web pages you\u2019ll begin to use some much more complex stylesheets. Many designers know of shorthand code (such as the But there are a few new properties in CSS3 which many designers aren\u2019t thinking about. Many of these aren\u2019t just for aesthetics, but also include animation effects.<\/p>\n Below is a short list explaining a few of the properties you may consider playing with. Try googling for syntax examples if you feel lost.<\/p>\n These properties all have their upsides and downfalls. I wouldn\u2019t recommend trying to cram them all into your web pages. But practice will give you a clear mindset<\/strong> to enter into developing further websites with ease.<\/p>\n One more core piece of added syntax worth mentioning is attribute selectors<\/strong>. With CSS3 you can now define styles based on HTML attributes<\/strong> (such as type, href, title) and even provide specific values.<\/p>\n So for example we could target links with a defined title attribute and give them a set of background icon.<\/p>\n If you notice I\u2019ve included a caret symbol<\/em> before the equals sign. This is an operator which defines all list items holding the prefix, ico<\/em><\/strong>. Alternatively you can replace the caret(^) with a dollar sign($) to target the suffix area of your title. In this way CSS3 knows to add background images where you could set the titles as \u2018first ico\u2019 or \u2018book ico\u2019. Read up a bit more about attribute selectors<\/a> if you\u2019re interested.<\/p>\n At the core of HTML5 and CSS3 web pages is simplicity<\/strong>. Web developers are trying to build highly creative websites in less time and with less stress.<\/p>\n The new features in HTML5 allow this with plenty of wiggle room. And using some of the new CSS3 selectors and properties<\/a> will give you advantages in the long run.<\/p>\n But as well you should be considering the end user<\/strong>. The process of building a web page ultimately ends after launching the website public.<\/p>\n \\Your goal is to please audience with easy-to-access information<\/strong>, and not just human readers, but search engine crawlers and indexing bots<\/strong>. Semantics have greatly evolved to include new HTML5 layout elements, splitting up page layouts consistently.<\/p>\n It\u2019s never been easier to construct a small navigation and footer section in line with all modern web browsers.<\/p>\n Once you have become comfortable building HTML5 web pages you\u2019ll likely start looking into page animations. Even minor effects with JavaScript and AJAX can majorly improve user experience and site performance<\/strong>.<\/p>\n![\"html5](\"https:\/\/assets.hongkiat.com\/uploads\/building-html5-css-webpages\/html5-semantics.jpg\")
<\/figure>\n<videogt;<\/code> and <audiogt;<\/code> which are huge for multimedia support. In some browsers you may complete form validation directly in HTML.<\/p>\nBare HTML5 Skeleton<\/h2>\n
<!doctype htmlgt;\r\n<head>\r\n <meta charset=\"utf-8\"gt;\r\n <titlegt;Our First HTML5 Page<\/titlegt;\r\n <meta name=\"description\" content=\"Welcome to my basic template.\"gt;\r\n <link rel=\"stylesheet\" href=\"css\/style.css?v=1\"gt;\r\n<\/headgt;\r\n\r\n<bodygt;\r\n <div id=\"wrapper\"gt;\r\n \t<headergt;\r\n <h1gt;Welcome, one and all!<\/h1gt;\r\n \r\n <navgt;\r\n \t<ulgt;\r\n <ligt;<a href=\"#\"gt;Home<\/agt;<\/ligt;\r\n <ligt;<a href=\"#\"gt;About us<\/agt;<\/ligt;\r\n <ligt;<a href=\"#\"gt;Contacts<\/agt;<\/ligt;\r\n <\/ulgt;\r\n <\/navgt;\r\n <\/headergt;\r\n \r\n <div id=\"core\" class=\"clearfix\"gt;\r\n <section id=\"left\"gt;\r\n \t<pgt;some content here.<\/pgt;\r\n <\/sectiongt;\r\n \r\n <section id=\"right\"gt;\r\n <pgt;but some here as well!<\/pgt;\r\n <\/sectiongt;\r\n <\/divgt;\r\n \r\n <footergt;\r\n <pgt;Some copyright and legal notices here. Maybe use the \u00a9 symbol a bit.<\/pgt;\r\n <\/footergt;\r\n <\/divgt;\r\n\r\n<\/bodygt;\r\n<\/htmlgt;\r\n<\/pre>\n
<meta name=\"keywords\" content=\"HTML5,CSS3,JavaScript\" \/gt;<\/code> without the need for a closing <\/metagt;<\/code> elsewhere.<\/p>\n<meta name=\"keywords\" content=\"HTML5,CSS3,JavaScript\"gt;<\/code> is completely valid<\/strong>, although you are allowed to continue using the XHTML\/XML standard.<\/p>\nDefining our Page Areas<\/h2>\n
<bodygt;<\/code> tag. This includes all of the main page\u2019s structure. I\u2019ve purposefully used a few nice HTML5 tags to signify how you may include them in your own work.<\/p>\n<header><\/code>, a core <div><\/code>, and a short <footer><\/code>.<\/p>\n<nav><\/code> tag as a wrapper.<\/p>\n<div><\/code> with an ID of core<\/em> I have applied a secondary clearfix<\/em>. This feature makes it so we can freely float 2 columns inside<\/strong> and we won\u2019t experience any dropped content or strange phenomena. And rightfully so, as inside I have placed two <sectiongt;<\/code> tags which will include our main content area and sidebar, respectively. We\u2019ll be using CSS styles to float them apart.<\/p>\nCreative CSS3 Wizardry<\/h2>\n
![\"html5](\"https:\/\/assets.hongkiat.com\/uploads\/building-html5-css-webpages\/html5-css3-styling.jpg\")
<\/figure>\n\r\nnav {\r\n\tdisplay: block;\r\n\tmargin-bottom: 10px;\r\n}\r\nnav ul {\r\n\tlist-style: none;\r\n\tfont-size: 14px;\r\n}\r\nnav ul li {\r\n\tdisplay: inline;\r\n}\r\nnav ul li a {\r\n\tdisplay: block;\r\n\tfloat: left;\r\n\tpadding: 3px 6px;\r\n\tcolor: #575c7d;\r\n\ttext-decoration: none;\r\n\tfont-weight: bold;\r\n}\r\nnav ul li a:hover {\r\n\tbackground: #deff90;\r\n\tcolor: #485e0f;\r\n\t-webkit-border-radius: 3px;\r\n\t-moz-border-radius: 3px;\r\n\tborder-radius: 3px;\r\n\tpadding: 3px 6px;\r\n\tmargin: 0;\r\n\ttext-decoration: none;\r\n}\r\n<\/pre>\n<sectiongt;<\/code> elements, #left<\/code> and #right<\/code> to correspond to their side of the page. I\u2019ve set each with a definite width and floating left, so they\u2019ll stack right up next to each other.<\/p>\ndiv#core<\/code> contains the clearfix<\/em> class, this means all internal content can be move around freely<\/strong> and automatically clears extra space afterwards.<\/p>\n\/* page core *\/\r\ndiv#core {\r\n\tdisplay: block;\r\n\tclear: both;\r\n\tmargin-bottom: 20px;\r\n}\r\nsection#left {\r\n\twidth: 550px;\r\n\tfloat: left;\r\n\tmargin: 0 15px;\r\n}\r\nsection#right {\r\n\tfloat: left;\r\n\twidth: 300px;\r\n}\r\n\r\n \r\n\/* clearfix *\/\r\n.clearfix:after {\r\n\tcontent: \".\";\r\n\tdisplay: block;\r\n\tclear: both;\r\n\tvisibility: hidden;\r\n\tline-height: 0;\r\n\theight: 0;\r\n}\r\n.clearfix {\r\n\tdisplay: inline-block;\r\n}\r\n \r\nhtml[xmlns] .clearfix {\r\n\tdisplay: block;\r\n}\r\n* html .clearfix {\r\n\theight: 1%;\r\n}\r\n\r\n<\/pre>\nLesser Known CSS3 Syntax<\/h2>\n
font: property<\/code><\/strong>), since these have been standards even before CSS2.<\/p>\n\n
box-shadow<\/code>: adds a neat shadow effect to your page elements. You are given 4 parameters which set the position left\/right, up\/down, shadow blur and color. Note that box shadows are not considered additional space to the original width\/height.<\/li>\ntext-shadow<\/code>: creates beautiful shadows behind your page text. With the right effects your letters could appear to pop right off the page.<\/li>\nborder-radius<\/code>: Rounded corners have taken a long time to become accepted standards. Few years ago many web 2.0 designers were crafting background images just to fit rounded corners in with CSS. But using CSS3 border-radius you can manipulate the curve of each border on any element.<\/li>\nopacity<\/code>: Seems like a simple property which many designers don\u2019t consider. Opacity expects a single numerical input ranging from 0 to 1.0 (0% \u2013 100%). This effect works great as a hover animation.<\/li>\n@font-face<\/code>: Another beautiful example of some complex CSS styles and typography. Web designers are now able to work with their own custom fonts by defining them as variables inside your CSS documents.<\/li>\nbox-sizing<\/code>: by default box-sizing will set all of your elements as content-box<\/strong>. This means width, padding, and borders are all included into the max width. But set to border-box<\/code> you can define a max width (say 20px) and added padding\/borders will include themselves into this, thus removing space inside the object. It\u2019s a fantastic property once you master its resourcefulness.<\/li>\n<\/ul>\n\r\nul li[title^=\"ico\"] {\r\n\tbackground: url('my-icon.gif');\r\n}<\/pre>\nPutting it all together<\/h2>\n
![\"html5](\"https:\/\/assets.hongkiat.com\/uploads\/building-html5-css-webpages\/html5-performance-and-integration.jpg\")
<\/figure>\n