Understanding the runat server attribute

asp.net Problem Overview

I'm really new to ASP.NET. I was just checking out a default ASP.NET web application. It comes by default with a few pages (Default.aspx, About.aspx etc).

I noticed that the Site.master file is the file where i create the main layout for my pages. But i also noticed that the head tag has a runat="server" attribute.

I know this tag is used in <asp:XXX> tags, but why in a <head> tag???

Also, when i remove that attribute, then all of the styles are gone from the webpage. So appearently it's doing something. I just don't understand what its exactly doing...

So why is it there, on an HTML tag...??? I don't see any code in there that should be run on the server...

<head runat="server">
    <title>Hallo</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

    <!-- This part is run on the server. So why does the head tag
         also need a runat=server ?? -->
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

asp.net Solutions

Solution 1 - asp.net

You asked why the styles are not applied anymore when removing the runat="server" from the<head> element.

It is simple: by running on the server side, the parser will replace the ~/ from the stylesheet declaration <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> with the root path of the application.

The ~ is illegal in a URL. Thus, if this is not replaced by the parser, the file will not be found thus the stylesheet will not be applied.

Oh, btw, setting the runat="server" attribute on the <head> element will force all its sub-elements to be run on the server, thus why the <link> element is run on the server.

Solution 2 - asp.net

The head element contains a runat="server" attribute, which indicates that it is a server control (rather than static HTML). All ASP.NET pages derive from the Page class, which is located in the System.Web.UI namespace. This class contains a Header property that provides access to the page's region. Using the Header property we can set an ASP.NET page's title or add additional markup to the rendered section. It is possible, then, to customize a content page's element by writing a bit of code in the page's Page_Load event handler.

' Programmatically add a <meta> element to the Header

Dim keywords As New HtmlMeta()
keywords.Name = "keywords"
keywords.Content = "master page,asp.net,tutorial"
Page.Header.Controls.Add(keywords)

For more info see Specifying Meta Tags in ASP.NET with VB.NET.

Solution 3 - asp.net

The runat="server" tag in ASP.NET allows the ability to convert/treat most any HTML element as a server-side control that you can manipulate via code at generation time. Some controls have explicit implementations, others simply revert to a generic control implementation.

Solution 4 - asp.net

The runat attribute basically tells ASP.Net that it needs to parse the element, its attributes and it's contents as a server control. Enabling code, on the server, to be executed to configure the response.

Without it, any child controls contained within the <head> section will not get parsed. So, any dynamic header includes, title manipulations or any other server-controls will not be interpreted.

Content Type	Original Author	Original Content on Stackoverflow
Question	Vivendi	View Question on Stackoverflow
Solution 1 - asp.net	xypho	View Answer on Stackoverflow
Solution 2 - asp.net	Joe	View Answer on Stackoverflow
Solution 3 - asp.net	David W	View Answer on Stackoverflow
Solution 4 - asp.net	Alex	View Answer on Stackoverflow