As the name indicates user experience design is a methodology that considers user needs in the design process. Though this may sound as simple as it looks, it isn't really. You see the challenge that designers have nowadays covers several areas, such as information design, user interface design, behavioural design, all contributes to the overall user experience. In any web environment, the 'user' is not always really that well defined. 

For example, let's look at Amazon. The target market is shoppers. Amazon sells a lot of things to a lot of different people of different gender, age, profession, demographic, ...etc. The challenge here is that the target market is not very well defined. So from a design perspective, the need to prioritise which design discipline sequence should be considered is crucial. So, the question here comes back to what is the most important 'scenario' for a user? Is the purchasing scenario, or maybe the searching scenario, could it be the content display or maybe the interaction options available? You will find that designers will decide on what they believe or have researched to be the most important user scenario based on a sequence of criteria, which is often referred to as "the narrative". It is the story of how the user will 'experience' the environment to ensure the best outcome.

In summary, as a designer you may want to 

• Ask yourself what are the most important aspects the user cannot live without? What are the user expectations when they visit such an environment? 
  
• Prioritise these aspects and expectations as criteria for your design approach
• Ensure that these criteria are well addressed from an informational design, user interface design and visual design perspective.
• Field test a beta version. It is important you capture as much feedback as you can to qualify your "design assumptions" towards your set criteria.
• Consider the feedback carefully and qualify/quantify it against the set criteria.
• Redesign

Good luck with your design approach.

HTML5 has added new tags that can help designing websites in a much more efficient way. The additions cover media, form and structural elements that enhance the functionality and layout design. Old tags, such as <big>, <center>, <dir>, <font>, <frame>, <frameset> and others have been removed. Some of the new structural elements are:

• <header>, which defines a header for the document or a section
  
• <nav>, which defines navigation in the document
  
• <main>, which defines the main content of a document
  
• <section>, which defines a section in the document
  
• <article>, which defines an article in the document
  
• <aside>, which defines content aside from the page content
  
• <footer>, which defines a footer of the document or a section
  

It is apparent that with these elements the role of the <div id="name"> is not necessary anymore, as we have now these semantic elements available in HTML5.
Once you start using these elements, you will see how easy they are to place, especially because of their semantic meaning.

Webpage styling can be confusing and to fully understand the power behind its language CSS (Cascading Style Sheets) can take some time and effort. But it does not have to be this way if we can explore the foundation before we venture into styling.
It is important to appreciate that HTML and CSS are two different languages and should be considered as such. Even though that we sometimes add CSS to HTML, this by far does not mean that they are the same. So let's have a look at the foundation first.
There are three main styling methods:

• inline: style attribute
• internal: <style> element
• external: external CSS style sheet(s)

The very first thing to acknowledge here is that we are looking at 3 different ways of styling using an "attribute", then a "tag" and finally a "sheet". All have different powers as outlined below. 

Inline Styling
This method targets a specific tag and is only relevant to this tag. For example, you choose a specific tag, let's say a <p> and decide to style this specific <p> tag as follows: <p style="color:blue;margin-left:20px;">. You have just made this paragraph blue and with an indent of 20 pixels. All other <p> tags are untouched. Your styling instructions are 'inline' within the tag itself. Do you know what this does <h2 style="background-color:red;">This is a heading</h2>?

Internal Styling
This methods has more global powers rather than the specific powers of inline styling. Here we define the style using a style tag that resides in the head section. It looks as follows:

<head>
   <style>
      body {background-color:yellow;}
      p {color:blue;}
   </style>
</head>

The body, i.e. the webpage background is set to a yellow colour and all paragraphs are now blue. Please take note that all paragraphs are now blue unless you have specified a specific paragraph to be different using an inline styling (or defining a class altogether). The inline styling will take precedence over the globally defined styling internally.

External Styling
This methods take all styling instructions between the stye tags and places them in an external style sheet to which several pages link. This means that this method is even more global than the internal styling as a change in settings in that external style sheet will cause a cascading effect onto all pages linking to it.

As you can see the foundation of CSS is based on global and local specificity, with different powers depending on what you want to achieve.

First things first. These are two different languages serving two different purposes. So would you like to mixed them up? Better not and here is why. 
The main purpose of HTML is to structure the content and thereby giving it meaning with respect to hierarchy, grouping, sections and layout. HTML is all about the content, the foundation if you like. If you would like to use a metaphor, HTML is the brick and mortar that builds the foundation of a house.
CSS on the other hand is all about the presentation, the look and feel of the content. In our metaphor that would be the interior design of the house, what colour do we use, what kind of furniture do we use and where.
HTML can live by itself but CSS cannot. Because You can have a house foundation (HTML) without any decoration (CSS), like you can have a webpage without any styling. But who would want to live in such a house or visit such a webpage.
You also don't want to have the builder designing your house, right?! You want to have an architectural designer to do that. Similarly, you don't want to have a designer actually build your house.
Two different mind sets, two different languages and two different purposes. Separation is key!

A good method to explain the anatomy of a web page is by describing Harry. 
Harry is strong man with a big head, muscular body. His bravery has earned him the title of a Lord. To describe Harry, one would say that he has:

• a head 
• a title and
• a body
  

To get Lord Harry attention, you would need to address him accordingly. For example, you would say: "Hello there my Lord" or shorter "HTML".

If a web page is like Lord Harry, one would describe it then as follows: The page speaks HTML, has a head, in which you could see its nobility title and finally a body. These anatomy elements build the foundation of every web page.

And because elements are finite (so can't just have an infinite head that would look ridiculous), we have to define their start and end. We do so simply by adding a forward slash "/" before the element. And to make everything solid, we encompass these elements in special characters ("<" ">") and call them tags. So that the bare minimum of a webpage looks something like that: