Click here to Skip to main content
Click here to Skip to main content

Beginner's guide to HTML5 and CSS3: Writing your first code

, 30 Mar 2014
Rate this:
Please Sign up or sign in to vote.
An introductory article to learning HTML5 and CSS3.

Introduction to HTML5

HTML is an acronym for HyperText Markup Language. HTML is the standard for structuring and presenting content of the WWW, in other words, it is the language in which web pages are written. HTML version 5 written HTML5 is the latest and most enhanced version of HTML developed in 2004 by WHATWG to subsume HTML Version 4.01.

Mouse over acronyms written in upper case to see their full meaning. This is done using an HTML tag (<abbr>) we will discuss later on.

HTML5 is compatible with XHTML and HTML 4.01 and easier to write than both. As an open standard, HTML5 embodies some of the best aspects of the web: it works everywhere, and on any device with a modern browser and natively supports features like video and audio playback support, drag and drop capabilities, offline capabilities that let users interact with web apps even when they don’t have an internet connection, 3D graphics and animations, MathML etc. most of which in earlier version of HTML required plugins like Adobe™ Flash, Microsoft™ Silverlight or Google™ gears.

Browsers are programs used to display the presentation (interpret markup) on the web page. A modern browser is an up-to-date browser that supports the features of HTML5, is faster and more secure. The latest version of Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome. Modern browsers are essential to the development of the web, so, take a moment and update your browser – 20 things I learn about browsers and the web

However, not all browsers support the all the features of HTML5 – HTML5 test

Introduction to CSS3

CSS is an acronym for Cascading Style Sheet. CSS gives programmers an easy, efficient way to define a web page's layout and beautify the page with design elements like colours, rounded corners, gradients, and animation. With CSS we can completely transform the look of a web page in just a couple of minutes, and without even having to touch the markup. In essence, CSS controls how the content is presented to the web page browser.

CSS3 is the same as ... you guessed it again, CSS version 3, it has a lot more features than the previous version allowing web developers to easily perform animations and other things using CSS alone and in a lot less code than its predecessor. CSS files have the extension example.css and a reference is placed in your HTML code to the file which the browser will then load to present the content.

CSS are sheets containing styles. These styles don't always have to be in an external file. They can also be used inline i.e. directly in a HTML file. We will get to see how later on. It is recommended however, that you keep large styles in an external style sheet.

How is HTML different from CSS?

Simply, HTML tells the web browser the content to present while CSS tells the web browser how to present it. In simple terms, HTML tells the browser to create a header, CSS tells the browser to how the header will be shown in terms of font, colour, etc. Syntactically, HTML has a completely different syntax from CSS.

Text Editor or where to write code.

An editor is a program designed to perform editorial functions. This is where you will write your HTML5 markup and CSS3 styles to be presented by a browser. Most OS come with a built in editor (Notepad and WordPad on Windows OS, TextEdit on Mac OS X).

Although, you can write a HTML markup and CSS styles in the default text editor for your OS, most designers prefer a more friendly and easy to use editor like Sublime Text for Mac and Windows or Notepad++ for Windows which provide line numbers, syntax highlighting among other things. In order to start writing HTML code, you should download either editor or check if you are comfortable with your current editor.

There are also other advanced editors like Microsoft Visual Studio, Adobe Dreamweaver, JetBrains WebStorm if you need advanced functionality

File extensions are important when writing web content. HTML files have the extension .html or .htm and CSS files have the extension .css, so, when saving your html files you should save them as example.html or example.htm but be consistent, both files are treated differently by the browser. It is recommended that you set your OS to show all file extensions.

Writing code

Open your editor and type the following

  1  <!doctype html>
  2  <html lang="en">
  3  <head>
  4      <meta charset="utf-8">
  5      <title>My HTML5 enabled web page</title>
  6  </head>
  7  <body>
  8      <!-- This is a comment -->
  9      Hello World
 10  </body>
 11  </html>
To get syntax highlighting
  • Notepad++: Click the Language menu and select H → HTML
  • Sublime Text: Click View → Syntax → HTML or in the lower right of the program, beside Tab Size, Click Plain Text and select HTML
  • The above code is a skeleton HTML5 template and we’ll discuss each line soon. The first word or letter(s) before a space enclosed in angle brackets < and > are called tags and are used to tell the browser what to display. The remaining set of words separated by spaces and on the left side of an equal to (=) sign and the first > character are attributes. The set of words or numbers separated by spaces on the right side of an equal to (=) sign are called values. The set of characters between the first set of angle brackets <> and the last set </> is called the tag content. The set of characters between a </ > having the same name as the first set of words in a <> is called the closing tag and it should not have attributes.

    That is a lot to take in, perhaps this will make it simpler...

    <article class="breaking-news" data-item="first">This text is too short to make the news.</article>
    

    Here, article is the tag name. This is the part that tells the browser, you want to create an article.

    Class and data-item are attributes and they are additional piece of information regarding the tag name and how the browser handles it. For example, the class attribute tells the browser how to markup the content using the provided styles. The class attribute value is breaking-news and the data-item value is first. Mostly, attributes and their values are not visible to the user.

    The string, "This text is too short to make the news." is the tag content and this is the part that is usually visible to the user after the page is rendered by the browser. The content can also contain another HTML tag this is known as nesting.

    And last, </article> is the closing tag and should not contain any attribute. This effectively tells the browser the end of content has been reached.

    HTML tags are numerous and we can only touch a few in this chapter. For a complete list of all HTML tags, visit W3C and for the complete list of tags added in HTML5 see W3C HTML5 Elements for more examples and usage of some elements, see SitePoint HTML reference.

    HTML tags in the content section of another HTML tag should be closed in reverse order of being created. Failure to do this will result in weird behaviours and improper presentation of your content.

    For example

    Proper Nesting:
    <body><div><p><a href="http://www.google.com">Google</a> is the world's most used search engine.</p></div></body>
    
    Improper Nesting:
    <body><div><p><a href="http://www.google.com">Google is the world's most used search engine.</p></a></div></body>
    

    The Improper Nesting example is because the <a> tag was created after the <p> tag and so should be closed before the <p> tag not after.

    Now, let’s examine the piece of code we just wrote.

  • line 1; <!doctype html>: This line informs the browser that the syntax used by the rest of the document is in HTML5 much like file extensions are associated to programs on the computer. This is the new document declaration for HTML5 as opposed to the old monstrous way of writing declaration.
  • Old ways in HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    or in XHTML 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    The new way is simpler and easier to remember, right? right?

  • line 2; the <html lang="en-GB">: This line is tells the web browser that this is the start of an HTML page. Notice that this tag is closed on line 11 and all other HTML tags are nested within it.
  • The attribute lang="en-GB" defines the primary natural language of the document. By natural language, I mean human language, such as French, Thai or even English. This helps screen readers, because for example the word "six" is pronounced very differently in French and English; this may also help search engines. It's a good idea to define the primary language of a document, especially when you are writing pages for an international audience. - Setting the document's primary language. You can also set the document's direction in the tag from the default left-to-right to right-to-left using the dir="rtl" attribute.

    The language tag always defines a language as spoken (or written) by human beings for communication of information to other human beings. Computer languages are explicitly excluded. For help choosing a language tag see W3C Choosing a language tag

  • line 3: The head section contain the header information or meta information. These information describe your web page to the browser and it is not visible to the user. You can use the header section to specify information such as the character encoding of the web page, author information, page expiry, refresh time of the page, description of content, search keywords, location of scripts, location of CSS files, etc. The tag is closed on line 6.
  • line 4: <meta charset="utf-8"> This tag is used to set the character encoding of the web page. UTF-8 Unicode was a brave effort to create a single character set that included every reasonable writing system on the planet and some make-believe ones like Klingon, too – The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets. So, it is a good idea to declare this to make sure you HTML has full international capabilities.
  • Note that the meta tag does not have a content and closing tag. These type of tags are called empty tags or void tags. Examples include img, br, etc. which we will discuss later.
  • line 5: <title>...</title> is used to specify the title of a document. It is usually visible at the top of the browser window or tab. The content of this tag is what the user sees and it does not take attributes yet.
  • line 7: <body>...</body>contains the content that will be visible to the user. This is where you would write all content for your presentation (video, audio, images, paragraphs, headers, etc.)
  • line 8: <!-- ... -->This is an HTML tag used to specify comments. Comments are not visible to the user and are not processed by the browser but can be used in your code for readability. Note that spacing does not matter inside comment tags, the following are all valid <!--A comment -->, <!-- A comment--><!--A comment-->. You can write them however way you want but be sure to always close the comment tags proper;y using -->
  • Notice how the child elements are indented from their parent element. This is not compulsory but it gives you and others that will see and or use your code easier readability. That said, most developers prefer to keep child elements indented from the parent element.

    Okay, now let’s see what we just wrote in a browser, save the file as hello.html or any filename you prefer but like we've discussed earlier, the .html part is essential and must be the last characters in the filename. You should have this

    To see your code and any other HTML code in the browser, press Control + U. The best way to learn is by reading other people's code and how they work in the browser. If you don't know how a particular command is shown, there is a handy tool in most modern browsers called Inspect Element, right click on the page and select it from the menu.

    Questions you might have

  • Do tags and attributes all have to be in lowercase letters?

    Thing is, HTML5 is flexible and you can chose to write your tags and attributes however way you want. <Head>, <head>, <HEAD> and <hEAd> are all the same, likewise Class, class and CLASS but the usual convention is to write your tags and attributes in lowercase letters.

  • Do I have to use double quotes to enclose attribute values?

    You can use either. Single ' and " are valid. In fact, HTML5 allows you to completely ignore quotes when writing attribute values that do not have spaces.

  • How do I write <> without the browser thinking it's an HTML tag?

    An article like this one has be showing you different tags without the browser thinking they are tags, right? If you have to write angle brackets or any other character not on your key board in HTML, you'll have to use HTML entities or character entities. Below is a table of commonly used HTML entities.

    Character

    Entity name

    Entity Number

    <

    &lt;

    &#60;

    >

    &gt;

    &#62;

    ©

    &copy;

    &#169;

    ®

    &reg;

    &#174;

    &trade;

    &#8842;

    "

    &quot;

    &#34;

    (space)

    &nbsp;

    &#32;

    &

    &amp;

    &#38;


    Examples

    © CodeProject 2014. is written &copy; CodeProject 2014 or &#169; Codeproject 2014

    Microsoft® Visual Studio ™ is written Microsoft &reg; Visual Studio &trade;

    2 > 3 is written 2 &gt; 3

    In your code write 2 &lt;1 is written In your code write 2 &amp;lt; 1

    So, to write any of the characters in HTML code, you'd write the one in the entity name or entity number. Note, entity names are case sensitive, you have to type them exactly (they are usually in lower case though) and entity numbers have a # following the ampersand (&) sign.

    The browser removes unnecessary space from your document content, you have to use the HTML entity for non breaking space (&nbsp;) to preserve spacing

    For a complete list of HTML entity names and numbers, see Free Formatter Entities List

    HTML5 elements

    HTML5 adds new elements to the existing ones. which makes it easy to use new web technologies as we discussed earlier.

    We also know that HTML elements are written like this <tag attribute="value">content</>. And in some cases, the content and closing tag is not required.

    HTML is like any word processor, you create headers and paragraphs, insert hyperlinks and images, style texts and so on. Only in this case we will be using tags as opposed to commands.

    To write headings, use <h1>, <h2>, <h3> to <h6>. For example

    HTML5 elements is written <h1>HTML5 Elements</h1>

    HTML5 elements is written <h2>HTML5 Elements</h2>

    HTML5 elements is written <h3>HTML5 Elements</h3>

    To italicize text or emphasize text use, use <i> or <em>. For example.

    This Text is italicized is written as <i>This Text is italicized</i>
    This Text is emphasized is written as <em>This Text is italicized</em>

    To delete/srtike text, use <del>. For example.

    This is no longer important is written <del>This is no longer important</del>

    To create paragraphs use <p>. For example

    This is a paragraph is written <p>This is a paragraph</p>

    To explain abbreviations, use <abbr>. This tag uses the title attribute to show a tooltip explaining the meaning of the abbreviation. For example

    HTML is written <abbr title="HyperText Markup Language">HTML</abbr>

    We will discuss other tags in another article, you can use the links provided to read more on HTML tags.

    Avoid using depreciated tags when writing your code, these tags will be removed in future

    History

    30th March, 2014 - Version 1.

  • License

    This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Share

    About the Author

    Akinmade Bond
    Student
    Nigeria Nigeria
    Bond is a Physics student in a college in Nigeria.
    Started programming right after high school and has fallen in love with computers ever since. Likes using the word 'seriously' and is a big fan of movies especially sci-fi.
     
    Bond is a precise, honest, caring, down to earth gentleman.
    He understands that being negative is easy. There will always be a downside to everything good, a hurdle to everything desirable and a con to every pro. He has realized that the real courage is in finding the good in what you have, the opportunities in every hurdle and the pros in every con.
    Follow on   Twitter   Google+

    Comments and Discussions

     
    GeneralThanks for the submission! PinstaffKevin Priddle3-Apr-14 9:00 
    GeneralRe: Thanks for the submission! PinprofessionalAkinmade Bond5-Apr-14 1:48 
    QuestionGood Article PinmemberGuruprasad.kb30-Mar-14 11:52 
    AnswerRe: Good Article PinprofessionalAkinmade Bond30-Mar-14 11:55 

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

    | Advertise | Privacy | Mobile
    Web04 | 2.8.140821.2 | Last Updated 30 Mar 2014
    Article Copyright 2014 by Akinmade Bond
    Everything else Copyright © CodeProject, 1999-2014
    Terms of Service
    Layout: fixed | fluid