Diferença entre SRC e HREF

Os atributos SRCe HREFsão usados ​​para incluir algumas entidades externas, como uma imagem, um arquivo CSS, um arquivo HTML, qualquer outra página da web ou um arquivo JavaScript.

Existe uma clara diferenciação entre SRCe HREF? Onde ou quando usar SRCou HREF? Eu acho que eles não podem ser usados ​​de forma intercambiável.

A seguir, mostramos alguns exemplos em que esses atributos são usados:

• Para indicar um arquivo CSS: href="cssfile.css"dentro da tag do link.
• Para referenciar um arquivo JS: src="myscript.js"dentro da tag de script.
• Para referenciar um arquivo de imagem: src="mypic.jpg"dentro de uma tag de imagem.
• Para consultar outra página da web: href="http://www.webpage.com"dentro de uma marca de âncora.

NOTA: A resposta de @ John-Yin é mais apropriada, considerando as alterações nas especificações.

Sim. Há uma diferenciação entre src e href e eles não podem ser usados ​​de forma intercambiável. Usamos src para elementos substituídos enquanto href para estabelecer um relacionamento entre o documento de referência e um recurso externo.

O atributo href (referência de hipertexto) especifica a localização de um recurso da Web, definindo um link ou relacionamento entre o elemento atual (no caso de âncora a) ou documento atual (no caso de link) e a âncora ou recurso de destino definido por este atributo. Quando escrevemos:

<link href="style.css" rel="stylesheet" />

O navegador entende que esse recurso é uma folha de estilo e o em processamentoa análise da página não está em pausa (a renderização pode estar em pausa, pois o navegador precisa das regras de estilo para pintar e renderizar a página). É não semelhante a despejar o conteúdo do arquivo CSS dentro da styletag. (Portanto, é aconselhável usar em linkvez de @importanexar folhas de estilo ao seu documento html.)

O atributo src (Origem) apenas incorpora o recurso no documento atual no local da definição do elemento. Por exemplo. Quando o navegador encontra

<script src="script.js"></script>

O carregamento e o processamento da página são pausados ​​até que o navegador busque, compile e execute o arquivo. É semelhante ao descarte do conteúdo do arquivo js dentro da scripttag. Semelhante é o caso da imgtag. É uma tag vazia e o conteúdo, que deve aparecer dentro dela, é definido pelo srcatributo O navegador interrompe o carregamento até que seja buscado e carregado a imagem. [assim é com iframe]

Essa é a razão pela qual é aconselhável carregar todos os arquivos JavaScript na parte inferior (antes da </body>tag)

atualização : Consulte a resposta de John-Yin para obter mais informações sobre como ela é implementada de acordo com as especificações do HTML 5.

A resposta de apnerve estava correta antes do HTML 5, agora é um pouco mais complicado.

Por exemplo, o scriptelemento, de acordo com a especificação HTML 5 , possui dois atributos globais que alteram o srcfuncionamento do atributo: asynce defer. Isso muda a maneira como o script (incorporado embutido ou importado de arquivo externo) deve ser executado.

Isso significa que existem três modos possíveis que podem ser selecionados usando esses atributos:

1. Quando o asyncatributo estiver presente, o script será executado de forma assíncrona, assim que estiver disponível.
2. Quando o asyncatributo não está presente, mas o deferatributo está presente, o script é executado quando a página termina de analisar.
3. Quando nenhum atributo está presente, o script é buscado e executado imediatamente, antes que o agente continue analisando a página.

Para detalhes, consulte a recomendação do HTML 5

Eu só queria atualizar com uma nova resposta para quem ocasionalmente visita este tópico. Algumas das respostas devem ser verificadas e arquivadas pelo stackoverflow e por todos nós.

Eu acho que <src>adiciona alguns recursos à página e <href>serve apenas para fornecer um link para um recurso (sem adicionar o próprio recurso à página).

Definição Simples

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

SRC ( S ou rc e) - Quero carregar esse recurso para mim.

Por exemplo:

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

HREF ( H ypertext REF erência) - Quero referir-me a este recurso para alguém.

Por exemplo:

Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>

Relative URL with link element: <link href="mystylesheet.css" type="text/css">

Cortesia

H REF : É um REF rência à informação para a página atual ou seja, informações css para o estilo da página ou link para outra página. A análise de página não está parada.

SRC : É uma nova fonte a ser adicionada / carregada na página como em imagens ou javascript. A análise da página pode parar, dependendo do atributo codificado. É por isso que é melhor adicionar script antes da tag do corpo final, para que a renderização da página não seja mantida.

Se você estiver falando de HTML4, sua lista de atributos pode ajudá-lo com as sutilezas. Eles não são intercambiáveis.

Do W3:

Quando o atributo href do elemento A é definido, o elemento define uma âncora de origem para um link que pode ser ativado pelo usuário para recuperar um recurso da Web. A âncora de origem é o local da instância A e a âncora de destino é o recurso da Web.

Fonte: http://www.w3.org/TR/html401/struct/links.html

Este atributo especifica a localização do recurso de imagem. Exemplos de formatos de imagem amplamente reconhecidos incluem GIF, JPEG e PNG.

Fonte: http://www.w3.org/TR/REC-html40/struct/objects.html

Uma definição simples

• SRC: se um recurso puder ser colocado dentro da tag body (para imagem, script, iframe, quadro)
• HREF: se um recurso não puder ser colocado dentro da tag body e puder ser vinculado apenas (para html, css)

Você deve se lembrar de quando usar todos e é isso que
o href é usado com links

<a href="#"></a>
<link rel="stylesheet" href="style.css" />

o src é usado com scripts e imagens

<img src="the_image_link" />
<script type="text/javascript" src="" />

o URL é usado geralmente em CSS para incluir algo, por exemplo, para adicionar uma imagem de plano de fundo

selector { background-image: url('the_image_link'); } 

depois de passar pela documentação HTML 5.1 (1 de novembro de 2016):

parte 4 (Os elementos do HTML)

capítulo 2 (metadados do documento)

a seção 4 (o elemento link) afirma que:

O destino do (s) link (s) é fornecido pelo hrefatributo, que deve estar presente e deve conter uma URL não vazia válida, potencialmente cercada por espaços. Se o hrefatributo estiver ausente, o elemento não definirá um link.

não contém o srcatributo ...

O witch é lógico porque é um link.

capítulo 12 (Script)

a seção 1 (o elemento script) afirma que:

Os scripts clássicos podem ser incorporados em linha ou importados de um arquivo externo usando o srcatributo que, se especificado, fornece a URL do recurso de script externo a ser usado. Se srcfor especificado, deve ser um URL não vazio válido, potencialmente cercado por espaços. O conteúdo dos elementos de script embutido, ou o recurso de script externo, deve estar em conformidade com os requisitos da produção de Script da especificação JavaScript para scripts clássicos.

nem sequer menciona o hrefatributo ...

isso indica que, ao usar tags de script, sempre use o srcatributo !!!

capítulo 7 (Conteúdo incorporado)

seção 5 (O elemento img)

A imagem fornecida pelos atributos srce srcset, e qualquer srcsetatributo do elemento de origem irmão anterior, se o pai for um pictureelemento, é o conteúdo incorporado.

também não menciona o hrefatributo ...

isso indica que, ao usar imgtags, o srcatributo também deve ser usado ...

Link de referência à recomendação do W3C

Eles não são intercambiáveis ​​- cada um é definido em diferentes elementos, como pode ser visto aqui .

Eles realmente têm significados semelhantes, então isso é uma inconsistência. Eu presumiria principalmente devido às diferentes tags implementadas por diferentes fornecedores, para depois incluir as especificações como é evitar a quebra da compatibilidade com versões anteriores.

Eles não têm significados semelhantes. 'src' indica um recurso que o navegador deve buscar como parte da página atual. HREF indica um recurso a ser buscado se o usuário solicitar.

Concordo com o que diz a respeito da distinção. Mas no caso de css, parece estranho. Como o css também é baixado para o cliente pelo navegador. Não é como uma marca âncora que aponta para qualquer recurso específico. Então, usar href parece estranho para mim. Mesmo que não esteja carregado com a página ainda sem essa página, não pode parecer completo e, portanto, não é apenas um relacionamento, mas um recurso semelhante, que por sua vez se refere a muitos outros recursos, como imagens.

src é usado para adicionar esse recurso à página, enquanto href é usado para vincular a um recurso específico dessa página.

Quando você usa sua página da Web, o navegador vê que é uma folha de estilos e, portanto, continua com a renderização da página, à medida que a folha de estilos é baixada em paralelo.

Quando você usa sua página da Web, ele informa ao navegador para inserir o recurso no local. Portanto, agora o navegador precisa buscar o arquivo js e carregá-lo. Até o navegador concluir o processo de carregamento, o processo de renderização da página é interrompido. Essa é a razão pela qual a YUI recomenda carregar seus arquivos JS na parte inferior da sua página da web.